/*
 Theme Name:   MoveToIrvine Child
 Template:     generatepress
 Version:      3.0.0
 Description:  MoveToIrvine child theme — editorial real estate guide
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --slate:       #1D3557;
  --gold:        #C9973A;
  --teal:        #2A9D8F;
  --warm-white:  #FAF8F5;
  --light-slate: #F0F4F8;
  --dark-text:   #1A1A2E;
  --mid-text:    #4A5568;
  --border:      #D8E4EF;
  --font-head:   'Playfair Display', Georgia, serif;
  --font-body:   'Inter', -apple-system, sans-serif;
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--dark-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* ============================================================
   GENERATEPRESS FULL-WIDTH OVERRIDE
   ============================================================ */
.site-content,
.content-area,
.site-main,
.entry-content,
.inside-article,
.hentry,
.singular-content-area,
.inside-page-hero-image,
.page-content,
.inside-site-container,
.site-container,
.container,
.wp-block-group,
.wp-block-html,
.inside-full-width-content,
#content,
.has-sidebar #content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body .site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   HIDE PAGE TITLE EVERYWHERE
   ============================================================ */
.entry-header,
.page-header,
.entry-title,
.page-title {
  display: none !important;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 8px rgba(29,53,87,.07) !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Desktop header */
@media (min-width: 769px) {
  .inside-header {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* Mobile header — no fixed height, relative so dropdown positions correctly */
@media (max-width: 768px) {
  .inside-header {
    max-width: 100% !important;
    padding: 0 16px !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    position: relative !important;
  }
}

@media (max-width: 480px) {
  .inside-header {
    padding: 0 14px !important;
  }
}

/* ============================================================
   LOGO
   ============================================================ */
.site-title,
.site-title a,
.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--font-head) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

@media (max-width: 768px) {
  .site-title,
  .site-title a {
    font-size: 18px !important;
  }
}

/* ============================================================
   NAVIGATION — DESKTOP ONLY
   All flex rules scoped to min-width:769px so they never
   fight GeneratePress's mobile toggle logic
   ============================================================ */
@media (min-width: 769px) {
  .main-navigation,
  .main-navigation ul {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .main-navigation .inside-navigation {
    display: flex !important;
    align-items: center !important;
  }

  .main-navigation .main-nav {
    flex: 1 !important;
  }

  .main-navigation .main-nav ul {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  .main-navigation .menu-item.nav-cta {
    margin-left: auto !important;
  }
}

/* Nav link styles — shared */
.main-navigation a {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mid-text) !important;
  padding: 8px 14px !important;
  transition: color .2s !important;
  text-decoration: none !important;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--slate) !important;
  background: none !important;
}

/* Dropdown sub-menu */
.main-navigation .sub-menu {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(29,53,87,.12) !important;
  padding: 8px 0 !important;
  min-width: 180px !important;
}

.main-navigation .sub-menu a {
  font-size: 13px !important;
  padding: 9px 18px !important;
  display: block !important;
}

/* ============================================================
   NAVIGATION — MOBILE
   Hide primary nav, show as dropdown when .toggled is added
   ============================================================ */
@media (max-width: 768px) {

  /* Hide primary nav by default on mobile */
  #site-navigation {
    display: none !important;
  }

  /* GP adds class="toggled" to #site-navigation when hamburger tapped */
  #site-navigation.toggled {
    display: block !important;
    position: absolute !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px rgba(29,53,87,.12) !important;
    z-index: 9999 !important;
  }

  #site-navigation.toggled .main-nav ul {
    display: block !important;
    padding: 8px 0 !important;
  }

  #site-navigation.toggled .main-nav ul li a {
    display: block !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    color: var(--slate) !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
  }

  #site-navigation.toggled .main-nav ul li a:hover {
    background: var(--light-slate) !important;
  }

  /* Hide GTranslate language item from mobile nav */
  li.menu-item-gtranslate,
  li[class*="gt-menu"] {
    display: none !important;
  }

  /* Hamburger button */
  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: 1px solid var(--border) !important;
    border-radius: 5px !important;
    color: var(--slate) !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   HAMBURGER BUTTON — BASE STYLES
   ============================================================ */
.mobile-menu-control-wrapper button,
.menu-toggle {
  background: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  color: var(--slate) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* ============================================================
   HEADER CTA BUTTON
   ============================================================ */
.main-navigation .menu-item.nav-cta > a {
  background: linear-gradient(135deg, #C9973A, #D9A441) !important;
  color: #fff !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .3s ease !important;
}

.main-navigation .menu-item.nav-cta > a:hover {
  background: linear-gradient(135deg, #D9A441, #C9973A) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--slate);
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: clamp(28px, 5vw, 52px); }
h2 { font-size: clamp(22px, 3.5vw, 36px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }

p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--mid-text);
  margin-bottom: 1.2em;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--teal);
  text-decoration: none;
  transition: color .2s;
}

a:hover { color: var(--slate); }

@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  p  { font-size: 16px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--font-body) !important;
  background: var(--gold) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  padding: 13px 26px !important;
  transition: background .2s !important;
  cursor: pointer !important;
}

.wp-block-button__link:hover {
  background: #b8852e !important;
  color: #fff !important;
}

/* ============================================================
   IMAGES
   ============================================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--slate) !important;
  color: rgba(255,255,255,.7) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer a {
  color: rgba(255,255,255,.6) !important;
  transition: color .2s !important;
}

.site-footer a:hover {
  color: var(--gold) !important;
}

.footer-bar {
  display: none !important;
}

/* ============================================================
   BLOCK EDITOR — REMOVE DEFAULT PADDING
   ============================================================ */
.wp-site-blocks,
.is-layout-flow,
.is-layout-constrained,
.wp-block-post-content,
.entry-content > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* ============================================================
   WIDGETS
   ============================================================ */
.widget-title {
  font-family: var(--font-head) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--slate) !important;
  margin-bottom: 14px !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb-trail {
  font-size: 13px;
  color: var(--mid-text);
  padding: 14px 0;
}

.breadcrumb-trail a { color: var(--teal); }