/* ================================================
   FIGMA DESIGN OVERRIDES - Matchmaking Moodboard Final
   ================================================ */

/* -- Import serif font for italic heading accents -- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* -- CSS Variables -- */
:root {
  --forest-green: #1B2014;
  --cream: #FDFAF0;
  --orange: #EC6921;
  --orange-alt: #EC6921;
  --white: #FFFFFF;
  --font-family-serif: 'Playfair Display', Georgia, serif;
}

/* ================================================
   NAVBAR - Transparent over hero, white text
   ================================================ */

#head {
  background-color: transparent !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
}

.navbar {
  background: transparent !important;
  height: 80px !important;
  border-bottom: none !important;
  position: relative !important;
  top: auto !important;
}

header nav a,
.menu-header-menu-container a,
#main-nav a,
#menu-header-menu a {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

header nav a:hover,
#menu-header-menu a:hover {
  color: #EC6921 !important;
}

.contact-number a,
.contact-number-mobile {
  color: #FFFFFF !important;
}

#company-logo {
  filter: brightness(0) invert(1);
}

/* Navbar on scroll - add dark bg via JS class */
.navbar.scrolled,
body.scrolled #head {
  background: rgba(27, 32, 20, 0.95) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--forest-green) !important;
}

.dropdown-menu a {
  color: #FFFFFF !important;
}

/* ================================================
   HERO SECTION
   ================================================ */

#home-banner,
#landing-banner {
  background: var(--forest-green) !important;
  position: relative;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.homepage .overlap-group24 {
  padding: 160px 80px 80px !important;
  min-height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

.homepage .overlap-group24::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(27, 32, 20, 0.55);
  z-index: 0;
}

.homepage .overlap-group24 > * {
  position: relative;
  z-index: 1;
}

/* Hero heading typography */
.homepage .find-your-happily-ever-after,
.homepage .guaranteed,
.hero-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 58px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
}

.homepage .find-your-happily-ever-after em,
.homepage .guaranteed em,
.hero-heading em {
  font-style: italic;
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Hero subtext */
.homepage .vancouvers-1-perso {
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-align: left !important;
  margin-top: 16px !important;
  width: 100% !important;
  max-width: 560px;
}

/* ================================================
   MAIN - Remove top margin (nav is absolute now)
   ================================================ */

main {
  margin-top: 0 !important;
}

body.customize-support main {
  margin-top: 32px !important;
}

/* ================================================
   BUTTONS - Updated orange + pill shape
   ================================================ */

.gform_button,
.homepage .rectangle,
.homepage .rectangle-3,
.homepage .rectangle-14,
.homepage .overlap-group3,
.homepage .overlap-group14,
.homepage .overlap-group18,
.homepage .overlap-group8,
.homepage .overlap-group2,
.homepage .overlap-group5,
.homepage .overlap-group6,
.homepage .overlap-group1-2,
.homepage .overlap-group22,
.homepage .overlap-group-1,
.btn-orange,
.gform_button,
#gform_submit_button_2 {
  background-color: #EC6921 !important;
  border-radius: 60px !important;
  border: none !important;
}

.homepage .overlap-group14,
.homepage .overlap-group18 {
  background-color: #EC6921 !important;
}

/* ================================================
   HOW THE SERVICE WORKS SECTION
   ================================================ */

.homepage .group-3,
#proven-steps,
.how-it-works-section {
  background-color: var(--cream) !important;
  padding: 80px 0 !important;
}

.homepage .our-proven-steps-to {
  color: #1B2014 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
}

/* ================================================
   WHO ARE WE / SUCCESS STORIES - Dark sections
   ================================================ */

#success,
.homepage .our-success-stories,
.homepage .our-success-stories-1,
.success-stories-section,
.who-are-we-section {
  background-color: var(--forest-green) !important;
  color: #FFFFFF !important;
}

.homepage .place,
.homepage .since-2004-our-dedi,
.homepage .our-success-stories-2,
.homepage .your-service-capture,
.homepage .name {
  color: #FFFFFF !important;
}

/* ================================================
   REAL SUCCESS STORIES - Dark section
   ================================================ */

/* Targets the rectangle that has bg #1B2014 for success stories */
.success-dark-section {
  background-color: var(--forest-green) !important;
}

/* ================================================
   OUR COMMITMENT / OUR GUARANTEE - Cream section
   ================================================ */

#first-sec,
.our-commitment-section,
.homepage .overlap-group-container-2 {
  background-color: var(--cream) !important;
}

.homepage .overlap-group15,
.homepage .overlap-group12 {
  background-color: rgba(27,32,20,0.06) !important;
}

/* ================================================
   OUR LOCATIONS
   ================================================ */

.homepage .our-locations {
  background-color: var(--cream) !important;
}

/* ================================================
   SECTION HEADINGS - Serif italic accents
   ================================================ */

h1 em, h2 em, h3 em,
.section-title em,
.our-guarantee em {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
}

/* Section title style matching Figma */
.homepage .our-success-stories-2,
.homepage .our-guarantee,
.homepage .our-locations-1,
.homepage .dating-advice-from-our-experts {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ================================================
   FOOTER - Dark forest green
   ================================================ */

footer {
  background-color: var(--forest-green) !important;
  border-top: none !important;
}

footer p,
footer a,
.footer-content p,
.footer-content a {
  color: rgba(255,255,255,0.75) !important;
}

footer a:hover {
  color: #EC6921 !important;
}

.bottom-content {
  background: var(--forest-green) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.copyright a {
  color: #EC6921 !important;
}

/* ================================================
   FEATURED LOGOS BAR (CBC, NEWS, Globe & Mail)
   ================================================ */

.homepage .featured-logos {
  background-color: rgba(255,255,255,0.08);
  padding: 12px 20px;
  border-radius: 8px;
  margin-top: 40px !important;
}

/* ================================================
   LOCATION CARDS - Darker overlay gradient
   ================================================ */

.homepage .place-1 {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(27,32,20,0.92) 100%) !important;
}

/* ================================================
   MOBILE NAV
   ================================================ */

#sidebar-mobile {
  background: var(--forest-green) !important;
}

#sidebar-mobile a.nav-link,
#main-nav-mobile a,
.contact-number-mobile {
  color: #FFFFFF !important;
}

#sidebar-mobile .social-media {
  background: var(--forest-green) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}

#sidebar-mobile .social-media a {
  color: #FFFFFF !important;
  border-right: 1px solid rgba(255,255,255,0.15) !important;
}

/* Mobile hamburger bars - white */
.bar {
  background-color: #FFFFFF !important;
}

/* ================================================
   TYPOGRAPHY - General updates
   ================================================ */

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Keep body/nav text as Poppins */
body, p, nav, .navbar, button, input, select, textarea {
  font-family: 'Poppins', Helvetica, sans-serif;
}

/* ================================================
   FORM INPUTS - Updated for cream bg sections
   ================================================ */

.ginput_container input,
.ginput_container_text input,
.ginput_container_email input,
.ginput_container_phone input {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(27,32,20,0.2) !important;
  border-radius: 8px !important;
}

/* ================================================
   RESPONSIVE - Mobile
   ================================================ */

@media (max-width: 990px) {
  #head {
    position: fixed !important;
    background: rgba(27, 32, 20, 0.95) !important;
  }

  .navbar {
    background: transparent !important;
    height: 65px !important;
  }

  main {
    margin-top: 65px !important;
  }

  .bar {
    background-color: #FFFFFF !important;
  }

  .homepage .find-your-happily-ever-after,
  .homepage .guaranteed,
  .hero-heading {
    font-size: 36px !important;
  }
}