/* Satmarin site chrome — Phase 7.1 header/nav + footer. Consumes sm-tokens.css. No shadows; hairlines + bg shifts. */

/* hide Blocksy's native header/footer if the theme still renders any remnant */
.ct-header, #offcanvas .ct-header, .ct-footer { /* defensive; child header.php already replaces these */ }

.sm-skip{position:absolute;left:-9999px;top:0;background:var(--sm-navy);color:var(--sm-offwhite);padding:10px 16px;border-radius:0 0 8px 0;z-index:200;}
.sm-skip:focus{left:0;}

/* ---- header ---- */
/* NOTE: no backdrop-filter — it would establish a containing block for position:fixed descendants,
   breaking the mobile fixed-bottom search bar and the nav drawer. Near-opaque bg instead of the blur. */
.sm-nav{position:sticky;top:0;z-index:100;background:rgba(248,250,253,0.98);border-bottom:1px solid var(--sm-hairline);font-family:var(--sm-font-body);}
.sm-nav__bar{max-width:var(--sm-maxw);margin:0 auto;padding:0 var(--sm-pad);height:var(--sm-nav-h);display:flex;align-items:center;justify-content:space-between;gap:28px;}
.sm-nav__logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.sm-nav__logo img{height:28px;width:auto;display:block;}
.sm-nav__menu{display:flex;align-items:center;justify-content:space-between;flex:1;gap:28px;}
.sm-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.sm-nav__item{position:relative;}
/* Asymmetric vertical padding (total still 42px, so the click box + mega-menu attach point are
   unchanged) shifts the link text DOWN so its baseline lines up with the bottom edge of the 28px
   logo, which is vertically centered in the 64px bar. Logo + utils positions are untouched. */
.sm-nav__link{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--sm-graphite);text-decoration:none;padding:29px 0 13px;transition:color var(--sm-transition);white-space:nowrap;}
.sm-nav__link:hover,.sm-nav__item:hover .sm-nav__link,.sm-nav__item:focus-within .sm-nav__link{color:var(--sm-navy);}
.sm-caret{font-size:10px;color:var(--sm-muted);}

/* mega dropdown — must render ABOVE the desktop search row (which sits just below the bar) */
.sm-mega{position:absolute;top:100%;left:0;z-index:60;min-width:520px;background:var(--sm-white);border:1px solid var(--sm-hairline);border-radius:var(--sm-radius-card);padding:24px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--sm-transition),transform var(--sm-transition),visibility var(--sm-transition);}
.sm-nav__item.has-mega:hover .sm-mega,.sm-nav__item.has-mega:focus-within .sm-mega,.sm-mega.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.sm-mega__inner{display:flex;gap:40px;}
.sm-mega__col{display:flex;flex-direction:column;gap:2px;min-width:180px;}
.sm-mega__title{margin:0 0 8px;font:600 12px/1 var(--sm-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sm-orange);}
.sm-mega__link{font-size:14px;color:var(--sm-graphite);text-decoration:none;padding:7px 0;border-bottom:1px solid transparent;transition:color var(--sm-transition);}
.sm-mega__link:hover{color:var(--sm-navy);}

/* utilities */
.sm-nav__utils{display:flex;align-items:center;gap:16px;flex:0 0 auto;}
.sm-ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;display:block;}
.sm-util{text-decoration:none;color:var(--sm-graphite);position:relative;line-height:1;transition:color var(--sm-transition);display:inline-flex;}
.sm-util:hover{color:var(--sm-navy);}

/* ---- always-visible search: desktop row under the menu bar ---- */
/* z-index:1 so open mega dropdowns (z-index:60) render fully OVER this row, never covered */
.sm-searchrow{position:relative;z-index:1;border-top:1px solid var(--sm-hairline);background:var(--sm-nav-bg);}
/* desktop row: breadcrumb fills the left, a compact search box sits on the right */
.sm-searchrow__inner{max-width:var(--sm-maxw);margin:0 auto;padding:5px var(--sm-pad);display:flex;align-items:center;gap:18px;}
.sm-searchrow__crumbs{flex:1 1 auto;min-width:0;}
.sm-searchrow__crumbs .ct-breadcrumbs{font:400 12px/1.4 var(--sm-font-body);color:var(--sm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-searchrow__crumbs .ct-breadcrumbs a{color:var(--sm-graphite);text-decoration:none;}
.sm-searchrow__crumbs .ct-breadcrumbs a:hover{color:var(--sm-navy);}
.sm-searchrow__form{flex:0 0 auto;width:min(420px,40vw);margin-left:auto;position:relative;display:flex;align-items:center;gap:8px;}
.sm-searchrow__form > .sm-searchrow__ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--sm-muted);pointer-events:none;}
.sm-searchrow__form input[type=search]{flex:1;box-sizing:border-box;height:36px;border:1px solid var(--sm-border);border-radius:var(--sm-radius-pill);
  background:var(--sm-white);font:400 14px/1 var(--sm-font-body);color:var(--sm-navy);padding:0 16px 0 40px;outline:none;
  transition:border-color var(--sm-transition);}
.sm-searchrow__form input[type=search]:focus{border-color:var(--sm-aqua);}
.sm-searchrow__go{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:36px;min-height:36px;min-width:152px;padding:0 20px;border:0;cursor:pointer;
  background:var(--sm-navy);color:var(--sm-offwhite);border-radius:var(--sm-radius-pill);font:500 14px/1 var(--sm-font-body);
  transition:background-color var(--sm-transition);}
.sm-searchrow__go:hover{background:var(--sm-orange);color:#fff;}
.sm-searchrow__go .sm-ic{stroke:currentColor;}

/* DESKTOP: the breadcrumb now lives in the search row, so hide the in-content (hero) copy.
   The single-product hero held only the breadcrumb -> hide it entirely; archive heroes keep their title. */
@media (min-width:1081px){
  .hero-section .ct-breadcrumbs{display:none!important;}
  .single-product .hero-section{display:none!important;}
}
.sm-cart__n{position:absolute;top:-6px;right:-7px;background:var(--sm-orange);color:#fff;font:600 10px/1 var(--sm-font-body);min-width:15px;height:15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;}
.sm-btn-quote{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-height:36px;min-width:152px;background:var(--sm-navy);color:var(--sm-offwhite);text-decoration:none;padding:0 20px;border-radius:var(--sm-radius-pill);font:500 14px/1 var(--sm-font-body);transition:background-color var(--sm-transition);white-space:nowrap;}
.sm-btn-quote:hover{background:var(--sm-orange);color:#fff;}

/* burger (mobile only) */
.sm-nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:0;}
.sm-nav__burger span{width:22px;height:2px;background:var(--sm-navy);transition:transform var(--sm-transition),opacity var(--sm-transition);}

/* ---- footer ---- */
.sm-foot{font-family:var(--sm-font-body);background:var(--sm-offwhite);border-top:1px solid var(--sm-hairline);}
.sm-foot__inner{max-width:var(--sm-maxw);margin:0 auto;padding:64px var(--sm-pad) 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;}
.sm-foot__brand img{height:26px;width:auto;display:block;margin-bottom:16px;}
.sm-foot__tag{margin:0 0 18px;font-size:15px;color:var(--sm-graphite);max-width:30ch;}
.sm-foot__h{margin:0 0 14px;font:600 12px/1 var(--sm-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sm-muted);}
.sm-foot__col{display:flex;flex-direction:column;gap:10px;}
.sm-foot__col a{font-size:14px;color:var(--sm-graphite);text-decoration:none;transition:color var(--sm-transition);}
.sm-foot__col a:hover{color:var(--sm-navy);}
.sm-foot__bar{max-width:var(--sm-maxw);margin:0 auto;padding:22px var(--sm-pad);border-top:1px solid var(--sm-hairline);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.sm-foot__logo-sm{height:22px;width:auto;}
.sm-foot__bar p{margin:0;font-size:13px;color:var(--sm-muted);}

/* ---- responsive ---- */
@media (max-width:1080px){
  /* MOBILE: search becomes a FIXED bottom bar — always visible, thumb-reachable, page still scrolls,
     nothing covered (no overlay). Safe-area inset keeps it above the OS gesture/home bar. */
  .sm-searchrow{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:120;background:var(--sm-white);
    border-top:1px solid var(--sm-hairline);border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);} /* no shadow — border-top only (design system) */
  .sm-searchrow__inner{padding:10px 14px;gap:8px;}
  .sm-searchrow__crumbs{display:none;} /* breadcrumb stays in the hero on mobile (fixed bottom bar has no room) */
  .sm-searchrow__form{width:100%;gap:8px;}
  .sm-searchrow__form > .sm-searchrow__ic{left:18px;width:18px;height:18px;}
  .sm-searchrow__form input[type=search]{height:46px;font-size:16px;padding:0 18px 0 46px;} /* 16px avoids iOS zoom-on-focus */
  .sm-searchrow__go{height:46px;min-width:0;padding:0 16px;}
  .sm-searchrow__golabel{display:none;} /* icon-only submit on mobile to save width */
  /* clear the fixed bar so the footer / last content row is never hidden behind it */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px));}
  /* while the nav drawer is open, hide the bottom search to avoid overlap */
  body.sm-drawer-open .sm-searchrow{display:none;}

  .sm-nav__burger{display:flex;}
  .sm-nav__menu{position:fixed;inset:var(--sm-nav-h) 0 0 auto;width:min(380px,86vw);background:var(--sm-white);border-left:1px solid var(--sm-hairline);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:16px 20px 32px;overflow-y:auto;transform:translateX(100%);transition:transform var(--sm-transition);}
  .sm-nav__menu.is-open{transform:translateX(0);}
  .sm-nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .sm-nav__item{border-bottom:1px solid var(--sm-hairline);}
  .sm-nav__link{padding:14px 0;justify-content:space-between;font-size:16px;}
  .sm-mega{position:static;min-width:0;border:0;border-radius:0;padding:0 0 12px 12px;opacity:1;visibility:visible;transform:none;display:none;}
  .sm-mega.is-open{display:block;}
  .sm-mega__inner{flex-direction:column;gap:18px;}
  .sm-nav__utils{flex-wrap:wrap;gap:12px;margin-top:18px;}
  .sm-search input[type=search]{width:100%;flex:1;}
  .sm-search{flex:1 0 100%;}
  .sm-foot__inner{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){ .sm-foot__inner{grid-template-columns:1fr;} .sm-foot__bar{flex-direction:column;align-items:flex-start;} }

/* ============================================================================
   BUTTON CONFORMANCE — design system: pill (999px), navy fill -> orange hover,
   ghost = transparent + 1px border -> navy hover, NO shadows anywhere.
   Remaps Blocksy's button system to tokens so theme/WooCommerce buttons stop
   inheriting the palette green and any drop-shadow. (Presentation only.)
   ============================================================================ */
:root{
  --theme-button-background-initial-color:var(--sm-navy);
  --theme-button-background-hover-color:var(--sm-orange);
  --theme-button-text-initial-color:var(--sm-offwhite);
  --theme-button-text-hover-color:#ffffff;
  --theme-button-shadow:none;
  --theme-button-shadow-hover:none;
}
/* kill shadows on every button surface we touch */
.sm-btn,.sm-btn-quote,.sm-searchrow__go,.sm-catbar .sm-btn,.sm-chip,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,
.wp-element-button,.ct-button,.single_add_to_cart_button{box-shadow:none!important;}
/* primary fill — our classes AND WooCommerce buttons (kills Blocksy palette green #22c20a) */
.sm-btn--primary,.sm-btn-quote,.sm-searchrow__go,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,
.woocommerce #respond input#submit,.wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order,.single_add_to_cart_button{
  background:var(--sm-navy)!important;color:var(--sm-offwhite)!important;border:0!important;
  border-radius:var(--sm-radius-pill)!important;box-shadow:none!important;
  text-transform:none!important;letter-spacing:0!important;} /* sentence case site-wide (Blocksy customizer defaults buttons to uppercase) */
.sm-btn--primary:hover,.sm-btn-quote:hover,.sm-searchrow__go:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce .button:hover,.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #place_order:hover,.single_add_to_cart_button:hover{
  background:var(--sm-orange)!important;color:#fff!important;}
/* ghost / secondary */
.sm-btn--ghost{
  background:transparent!important;color:var(--sm-navy)!important;
  border:1px solid var(--sm-border)!important;border-radius:var(--sm-radius-pill)!important;}
.sm-btn--ghost:hover{border-color:var(--sm-navy)!important;background:transparent!important;color:var(--sm-navy)!important;}
/* core Gutenberg buttons (block/content pages): navy fill / ghost outline, sentence-case pill.
   sm-chrome loads site-wide; !important beats Blocksy's palette AND the .entry-content link colour
   (which otherwise painted the button text navy on a navy background). */
.wp-block-button__link{padding:13px 26px!important;border-radius:var(--sm-radius-pill)!important;
  font:500 15px/1.2 var(--sm-font-body)!important;text-decoration:none!important;box-shadow:none!important;}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{background:var(--sm-navy)!important;color:var(--sm-offwhite)!important;border:0!important;}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{background:var(--sm-orange)!important;color:#fff!important;}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent!important;color:var(--sm-navy)!important;border:1px solid var(--sm-border)!important;}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--sm-navy)!important;color:var(--sm-navy)!important;background:transparent!important;}

/* ---- a11y: visible keyboard focus site-wide (Phase 7.6) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,.sm-nav__link:focus-visible,.sm-mega__link:focus-visible{
  outline:2px solid var(--sm-aqua)!important;outline-offset:2px!important;border-radius:4px;}