/* ==========================================================================
   SPECIALIZED MOWING — GENERATEPRESS HEADER & NAVIGATION

   PURPOSE
   Restyles the theme's own header to match the design system, so the
   hardcoded <header class="hdr"> can be deleted from the page markup and
   the menu stays editable in Appearance > Menus.

   WHERE THIS GOES
   Append to sm-home-styles.css, or add as a second block in
   Appearance > Customize > Additional CSS.

   IMPORTANT — NOT SCOPED
   Unlike sm-home-styles.css, these rules are deliberately global. The
   header sits outside .sm-page, so it cannot be scoped to it. That is
   intentional: the header should look the same on every page.

   BEFORE YOU PASTE
   GeneratePress class names are stable but vary a little by version and
   by which header layout is active. Right-click the nav in the browser,
   choose Inspect, and confirm you see .site-header, .inside-header and
   .main-navigation. If the classes differ, adjust the selectors below
   rather than adding !important.

   CUSTOMIZER SETTINGS TO SET FIRST
   These do the heavy lifting and are cleaner than CSS overrides:
     Layout > Header     : Header Alignment = Left,
                           Navigation Location = Float Right
     Layout > Primary Navigation : Navigation Alignment = Right
     Colors              : set Navigation background to #F1F0EB
     Typography          : Navigation font = IBM Plex Mono, 500,
                           0.76rem, uppercase, letter-spacing 0.1em
   Use the CSS below for what the Customizer cannot reach.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER SHELL
   -------------------------------------------------------------------------- */

.site-header{
  background:rgba(241,240,235,.94);
  border-bottom:1px solid var(--sm-rule);
  position:sticky;
  top:0;
  z-index:100;
}

/* If the admin bar is visible, the sticky header hides under it. */
.admin-bar .site-header{ top:32px; }
@media(max-width:782px){ .admin-bar .site-header{ top:46px; } }

.inside-header{
  max-width:1200px;
  margin-inline:auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
  min-height:78px;
  display:flex;
  align-items:center;
  gap:1.5rem;
}

.site-logo{ margin:0; display:flex; align-items:center; }
.site-logo img,
.header-image{
  width:190px;
  height:auto;
  max-height:none;
  display:block;
}

/* GeneratePress prints the site title and tagline as text when no logo is
   set. The logo carries the name already, so hide them. */
.site-branding .main-title,
.site-branding .site-description{ display:none; }


/* --------------------------------------------------------------------------
   2. PRIMARY NAVIGATION
   -------------------------------------------------------------------------- */

.main-navigation{
  background:transparent;
  margin-left:auto;
}

.main-navigation .inside-navigation{
  padding:0;
  max-width:none;
}

/* Desktop only. Without the media query this overrides GeneratePress's own
   rule that hides the menu behind the mobile toggle, and the nav overflows
   the viewport on phones.

   769px matches GeneratePress's default mobile-menu breakpoint. If you change
   that breakpoint in Customize > Layout > Primary Navigation, change it here
   too or the two will disagree. */
@media(min-width:769px){
  .main-navigation .main-nav > ul{
    display:flex;
    align-items:center;
    gap:1.6rem;
  }
}

.main-navigation .main-nav ul li a{
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sm-ink);
  background:none;
  line-height:1;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .16s ease,color .16s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a{
  color:var(--sm-ink);
  background:none;
  border-bottom-color:var(--sm-orange);
}

/* Remove the pill/box hover GeneratePress applies by default. */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current"] > a{
  background:none;
}


/* --------------------------------------------------------------------------
   3. DROPDOWN  (For Landscapers sits under Services)

   SPECIFICITY NOTE - READ BEFORE EDITING
   GeneratePress writes its navigation colours as
       .main-navigation .main-nav ul li a
   which is two classes deep. Anything written with only ONE class, such as
       .main-navigation ul ul li a
   loses to it, even when loaded afterwards. That is what made this submenu
   unreadable: GP's dark link colour won, the dark background here also won,
   and the result was dark-on-dark.

   Every rule below is therefore written at the same two-class depth as GP,
   so it wins cleanly without !important.

   WHY THE CUSTOMIZER CANNOT CHANGE THESE
   GP's Customizer colour settings output the two-class rules above. These
   rules match that specificity and load afterwards, so they win. To recolour
   the dropdown, edit the values HERE rather than in the Customizer.

   Currently set LIGHT: paper background, ink text - reads as an extension of
   the light header. A dark version is commented out at the end of the block.
   -------------------------------------------------------------------------- */

.main-navigation .main-nav ul ul,
.main-navigation ul ul{
  background:var(--sm-paper);
  border:1px solid var(--sm-rule);
  box-shadow:0 10px 28px rgba(20,23,20,.16);
  min-width:15rem;
  padding:.3rem 0;
}

.main-navigation .main-nav ul ul li a,
.main-navigation .main-nav ul ul li a:visited{
  color:var(--sm-ink);
  background:transparent;
  padding:.75rem 1.1rem;
  border-bottom:0;
  letter-spacing:.08em;
  line-height:1.35;
}

/* DROPDOWN HOVER
   Light grey fill with ink text, plus an orange bar down the left edge.

   This replaces an orange fill with white text. That version measured fine in
   isolation (4.75:1), but GeneratePress sets its own submenu link colour at
   the same specificity, so on some configurations GP won the `color` property
   while this file won `background` - producing dark text on dark orange.

   A light hover removes the failure mode entirely: whichever rule wins the
   colour, dark-on-light stays readable. The orange bar carries the brand cue
   the fill used to, and cannot affect legibility.

   Selectors include .inside-navigation purely to raise specificity to four
   classes, so they beat GP's output without needing !important.

   TO CHANGE THE HOVER SHADE, edit the one value below.
     #FFFFFF  white
     #E9E9E4  very light grey
     #E2E3DE  light grey  <- current
     #DADBD5  mid grey, most obvious against the panel
*/

.main-navigation .inside-navigation .main-nav ul ul li:hover > a,
.main-navigation .inside-navigation .main-nav ul ul li a:hover,
.main-navigation .inside-navigation .main-nav ul ul li a:focus,
.main-navigation .inside-navigation .main-nav ul ul li.current-menu-item > a{
  color:var(--sm-ink);
  background:#E2E3DE;
  border-bottom:0;
  box-shadow:inset 3px 0 0 var(--sm-orange);
}

/* Separator between dropdown items. */
.main-navigation .main-nav ul ul li + li > a{
  border-top:1px solid var(--sm-rule);
}

/* ---- DARK DROPDOWN ALTERNATIVE ----------------------------------------
   To use a dark dropdown instead, delete the four rules above and uncomment
   these. Kept at the same two-class depth so it still beats GP.

.main-navigation .main-nav ul ul,
.main-navigation ul ul{
  background:var(--sm-ink);
  border:0;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  min-width:15rem;
  padding:.3rem 0;
}
.main-navigation .main-nav ul ul li a,
.main-navigation .main-nav ul ul li a:visited{
  color:var(--sm-paper);
  background:transparent;
  padding:.75rem 1.1rem;
  border-bottom:0;
  letter-spacing:.08em;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus{
  color:#fff;
  background:var(--sm-orange);
}
.main-navigation .main-nav ul ul li + li > a{
  border-top:1px solid rgba(241,240,235,.14);
}
   ---------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   4. PHONE NUMBER + CTA BUTTON

   Add these as menu items in Appearance > Menus:
     - Custom Link, URL tel:+15408756559, label 540-875-6559
       CSS Classes field: sm-nav-tel
     - Custom Link, URL /contact-specialized-mowing/, label Get a quote
       CSS Classes field: sm-nav-cta

   If the CSS Classes field is not visible, open Screen Options at the top
   right of the Menus page and tick "CSS Classes".
   -------------------------------------------------------------------------- */

.main-navigation .main-nav ul li.sm-nav-tel a{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:800;
  font-size:1rem;
  letter-spacing:0;
  white-space:nowrap;
  border-bottom:0;
}
.main-navigation .main-nav ul li.sm-nav-tel a:hover{
  color:var(--sm-orange);
  border-bottom:0;
}

.main-navigation .main-nav ul li.sm-nav-cta a{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
  background:var(--sm-orange);
  padding:.8em 1.2em;
  border-bottom:0;
  white-space:nowrap;
  transition:background .16s ease,transform .16s ease;
}
.main-navigation .main-nav ul li.sm-nav-cta a:hover,
.main-navigation .main-nav ul li.sm-nav-cta a:focus{
  background:#cf4f24;
  color:#fff;
  border-bottom:0;
  transform:translateY(-2px);
}


/* --------------------------------------------------------------------------
   5. MOBILE
   -------------------------------------------------------------------------- */

@media(max-width:900px){
  .inside-header{ min-height:66px; gap:.9rem; }
  .site-logo img,
  .header-image{ width:150px; }
}

.menu-toggle{
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sm-ink);
  background:transparent;
  padding:.9rem .6rem;
}
.menu-toggle:hover,
.menu-toggle:focus{
  background:transparent;
  color:var(--sm-orange);
}

/* Mobile dropdown panel */
.main-navigation.toggled .main-nav > ul{
  display:block;
  background:var(--sm-ink);
  padding:.5rem 0;
}
/* Keep the menu hidden until the toggle is pressed, on any width where
   GeneratePress is showing the toggle button. */
@media(max-width:768px){
  .main-navigation:not(.toggled) .main-nav > ul{ display:none; }
}
.main-navigation.toggled .main-nav ul li a,
.main-navigation.toggled .main-nav ul li a:visited{
  color:var(--sm-paper);
  background:transparent;
  padding:.95rem clamp(1.25rem,4vw,2.5rem);
  border-bottom:1px solid rgba(241,240,235,.14);
}
.main-navigation.toggled .main-nav ul li a:hover,
.main-navigation.toggled .main-nav ul li a:focus{
  color:var(--sm-orange);
  background:transparent;
  border-bottom-color:rgba(241,240,235,.14);
}
/* Indent submenu items in the mobile panel so hierarchy is still readable. */
.main-navigation.toggled .main-nav ul ul li a{
  padding-left:calc(clamp(1.25rem,4vw,2.5rem) + 1.1rem);
  background:rgba(255,255,255,.04);
}
/* The mobile panel is dark, so the light desktop hover would be invisible
   there. Keep mobile hover as orange text on the dark panel. */
.main-navigation.toggled .inside-navigation .main-nav ul ul li a:hover,
.main-navigation.toggled .inside-navigation .main-nav ul ul li a:focus{
  color:var(--sm-orange);
  background:rgba(255,255,255,.04);
  box-shadow:none;
}

/* Keep the CTA looking like a button inside the mobile panel */
.main-navigation.toggled .main-nav ul li.sm-nav-cta a{
  background:var(--sm-orange);
  color:#fff;
  margin:.6rem clamp(1.25rem,4vw,2.5rem);
  padding:.9em 1.2em;
  text-align:center;
}


/* --------------------------------------------------------------------------
   6. ACCESSIBILITY
   -------------------------------------------------------------------------- */

.site-header a:focus-visible,
.menu-toggle:focus-visible{
  outline:3px solid var(--sm-orange);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  .main-navigation .main-nav ul li.sm-nav-cta a{ transition:none; }
  .main-navigation .main-nav ul li.sm-nav-cta a:hover{ transform:none; }
}


/* --------------------------------------------------------------------------
   7. CUSTOM PROPERTY FALLBACK

   sm-home-styles.css declares the --sm-* variables on :root, so they are
   already available here. This block only matters if you use this file on
   its own, without the page styles.
   -------------------------------------------------------------------------- */

:root{
  --sm-orange:#E75D2E;
  --sm-yellow:#FFF00F;
  --sm-ink:#141714;
  --sm-paper:#F1F0EB;
  --sm-rule:#C6C8C2;
  --sm-orange-dark:#C74A1B;  /* accessible hover shade for small text */
}