/* ============================================================
   Factory Direct Blinds & Shutters — shared styles
   .icon-slot boxes all carry inline SVGs now (phone, menu, star,
   clock, bolt, shield, mail, palette, ruler, document).
   Photography lives in assets/img/ — see CREDITS.txt there.
   ============================================================ */

html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #0F172A; outline-offset: 2px; }

.icon-slot { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.eyebrow { letter-spacing: .18em; text-transform: uppercase; font-size: 11px; font-weight: 600; }

/* The .ph diagonal-stripe image placeholder is gone — every slot on every
   page now holds a real photo. Re-add it here if you stub out a new section. */

/* Colour swatches (build.html) — these hexes, not the preview photo, are the
   colour of record for an order; the photos are representative only. */
.sw-chestnut  { background: linear-gradient(105deg, #6B4A31, #8B6242 45%, #5E4029); }
.sw-driftwood { background: linear-gradient(105deg, #9C8E7E, #BFB3A3 45%, #8D8070); }
.sw-alabaster { background: linear-gradient(105deg, #EDE8E0, #FBF9F5 45%, #E3DCD1); }
.sw-graphite  { background: linear-gradient(105deg, #3A3D42, #565B62 45%, #2E3135); }

/* Hero reveal — the only motion on the site: a soft one-time
   fade-up on load. Nothing animates on scroll, nothing locks. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px);
            animation: fd-rise .7s cubic-bezier(.22,1,.36,1) forwards; }
  .r1 { animation-delay: .08s; }
  .r2 { animation-delay: .16s; }
  .r3 { animation-delay: .24s; }
  @keyframes fd-rise { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Mobile action bar (phones only)
   The bar is fixed to the bottom on <640px. Two things have to
   move out of its way: the end of the page, and the finder
   launcher. Both are handled here so no page needs its own CSS.
   ============================================================ */
.fd-actionbar { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 639px) {
  body.has-actionbar { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body.has-actionbar .gfd-finder-btn { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.has-actionbar .gfd-panel { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* Sticky-header offset for in-page anchors, so a jump to
   #categories doesn't park the heading under the header. */
:target { scroll-margin-top: 96px; }

/* Long product names in the catalogue index shouldn't create a
   horizontal scrollbar on narrow phones. */
.break-words-safe { overflow-wrap: anywhere; }

/* ============================================================
   Desktop mega menu
   Only above 1280px, which is the same xl: breakpoint the nav
   already appears at — below that the stacked #mobileNav list is
   still in charge and none of this applies.

   Opens on hover AND on :focus-within, so tabbing through the
   header works without a click. Hand-written rather than Tailwind
   utilities because assets/tailwind.css is precompiled and there
   is no build step in this folder (see BUILD.md).
   ============================================================ */
@media (min-width: 1280px) {
  .fd-nav__item { position: relative; }

  .fd-nav__link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 12px; color: #475569; white-space: nowrap; transition: color .16s;
  }
  .fd-nav__item:hover > .fd-nav__link,
  .fd-nav__item:focus-within > .fd-nav__link,
  .fd-nav__link:hover { color: #0F172A; }

  /* hairline that grows from the left under the active trigger */
  .fd-nav__link::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
    background: #8A7461; transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.22,1,.36,1);
  }
  .fd-nav__item:hover > .fd-nav__link::after,
  .fd-nav__item:focus-within > .fd-nav__link::after { transform: scaleX(1); }

  .fd-nav__chev { width: 10px; height: 10px; opacity: .5; transition: transform .2s ease, opacity .2s; }
  .fd-nav__item:hover .fd-nav__chev,
  .fd-nav__item:focus-within .fd-nav__chev { transform: rotate(180deg); opacity: 1; }

  /* ---- the panel ---- */
  .fd-mm {
    position: absolute; top: 100%; left: -14px; z-index: 60;
    background: #fff; border: 1px solid #E7E3DD;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 28px 56px -16px rgba(40,33,10,.26);
    padding: 26px 28px 20px; max-width: calc(100vw - 48px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    /* pointer-events must drop the instant it starts closing. visibility is
       delayed .18s so the panel can fade, which used to leave it hit-testable
       for those 180ms — the pointer would land on the fading panel, re-assert
       :hover on its own nav item, and snap the previous section back open.
       That was the menu "bouncing" between two sections. */
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.22,1,.36,1), visibility 0s .18s;
  }
  .fd-nav__item:hover > .fd-mm,
  .fd-nav__item:focus-within > .fd-mm {
    opacity: 1; visibility: visible; transform: translateY(0);
    pointer-events: auto;
    /* sit above a sibling that is still fading out, so the crossfade cannot
       hand the pointer back to the panel being dismissed */
    z-index: 61;
    transition: opacity .18s ease, transform .18s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
  }
  .fd-nav__item.fd-is-closed > .fd-mm {           /* Escape key override */
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important;
    /* the item is still :hover when Escape fires, so the open rule's
       pointer-events:auto would otherwise keep winning here */
    pointer-events: none !important;
  }
  /* Bridge the trigger -> panel trip, scoped to the trigger's OWN width.
     This used to live on .fd-mm as left:0;right:0;top:-12px, which spans the
     whole panel (~750px on .fd-mm--wide) against a ~100px trigger, so an open
     menu threw an invisible 12px strip back up under its neighbours. Sliding
     along the bottom of the nav then hovered one panel's bridge and the next
     trigger simultaneously, opening both. Anchoring it to .fd-nav__item keeps
     it exactly as wide as the item it belongs to. */
  .fd-nav__item::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  }
  /* brand hairline along the top edge */
  .fd-mm::after {
    content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
    background: linear-gradient(90deg, #8A7461, #C2AD99 55%, #8A7461);
  }

  .fd-mm__cols { display: grid; gap: 24px 34px; grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .fd-mm--wide .fd-mm__cols { grid-template-columns: minmax(238px, 1fr) minmax(178px, .78fr) 208px; }

  .fd-mm__h {
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #8A7461; margin-bottom: 11px;
  }

  .fd-mm__link { display: block; padding: 7px 0; }
  .fd-mm__name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #0F172A; transition: color .16s; }
  .fd-mm__name::after {
    content: '\2192'; font-size: 12px; color: #8A7461;
    opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s;
  }
  .fd-mm__link:hover .fd-mm__name { color: #8A7461; }
  .fd-mm__link:hover .fd-mm__name::after { opacity: 1; transform: none; }
  .fd-mm__desc { display: block; font-size: 12.5px; line-height: 1.5; color: #94A3B8; margin-top: 2px; }

  /* compact secondary column — types that route to the planner */
  .fd-mm__mini { display: block; padding: 5.5px 0; font-size: 13.5px; color: #475569; transition: color .16s; }
  .fd-mm__mini:hover { color: #0F172A; }

  /* featured rail */
  .fd-mm__feat { background: #F6F3EE; border: 1px solid #E7E3DD; padding: 16px; display: flex; flex-direction: column; }
  .fd-mm__feat img { width: 100%; height: 96px; object-fit: cover; display: block; margin-bottom: 12px; }
  .fd-mm__feat p { font-size: 12.5px; line-height: 1.55; color: #475569; margin: 3px 0 14px; }
  .fd-mm__feat strong { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 17px; color: #0F172A; }
  .fd-mm__cta {
    margin-top: auto; display: inline-flex; justify-content: center; background: #0F172A; color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 10px 14px; transition: background .16s;
  }
  .fd-mm__cta:hover { background: #475569; }

  .fd-mm__foot {
    margin-top: 18px; padding-top: 13px; border-top: 1px solid #EFECE3;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
  }
  .fd-mm__foot a { font-size: 12.5px; font-weight: 600; color: #8A7461; white-space: nowrap; }
  .fd-mm__foot a:hover { color: #0F172A; }
  .fd-mm__foot span { font-size: 12px; color: #94A3B8; }
}

/* ============================================================
   iOS zoom guard
   Safari on iPhone auto-zooms the page whenever a focused field
   is under 16px, and never zooms back out. Every input on this
   site was set at 14px, so tapping a width box on build.html
   left customers pinching to escape. Below the tablet breakpoint
   the controls are forced to 16px; desktop keeps the 14px scale.
   ============================================================ */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}