/* ════════════════════════════════════════════════════════════════════
   td-nav.css — Canonical public-site navigation styles.
   Linked from every public page so the top nav reads identically across
   the site (same items, same uppercase font, same colors, same layout).

   Pages link this AFTER their own <style> blocks, near </head>, so the
   uniform nav rules win on source-order.
   ════════════════════════════════════════════════════════════════════ */

/* Reserve space under the fixed nav so page content starts below it. */
body { padding-top: 64px; }

/* Fixed top nav bar */
nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(7,8,16,.95);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(85,133,245,.35);
  transition: background .3s;
}
nav#main-nav.scrolled { background: rgba(7,8,16,.99); }

/* Logo */
nav#main-nav .logo {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .06em;
  color: #eef0f8; text-decoration: none; white-space: nowrap;
}
nav#main-nav .logo em { font-style: normal; color: #5585f5; }

/* Link list */
nav#main-nav .nav-links {
  display: flex; align-items: center; gap: .65rem;
  list-style: none; margin: 0; padding: 0;
}
nav#main-nav .nav-links a {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase;
  color: #c0c8e0; text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
nav#main-nav .nav-links a:hover { color: #c9a84c; }

/* Burger button — hidden on desktop, shown on mobile.
   Sized for thumbs + gold ring so it's obviously tappable on every page. */
nav#main-nav .burger {
  display: none; flex-direction: column; gap: 6px;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.55);
  border-radius: 6px; padding: 10px 11px; cursor: pointer;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
nav#main-nav .burger span {
  display: block; width: 24px; height: 3px;
  background: #c9a84c; border-radius: 2px;
  transition: all .3s; transform-origin: center;
}
nav#main-nav .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav#main-nav .burger.open span:nth-child(2) { opacity: 0; }
nav#main-nav .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile fullscreen overlay menu */
.mob-nav {
  display: none; position: fixed; inset: 64px 0 0 0; z-index: 99;
  background: rgba(7,8,16,.99); flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.5rem; padding: 2rem 1rem;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  overflow-y: auto;
}
.mob-nav.open { display: flex; opacity: 1; pointer-events: all; }
.mob-nav a {
  font-family: 'Oswald', sans-serif;
  font-size: 1.7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #eef0f8;
  text-decoration: none; transition: color .2s;
  min-height: 44px; display: flex; align-items: center;
}
.mob-nav a:hover { color: #c9a84c; }

/* Collapse to burger menu on smaller desktops */
@media (max-width: 1100px) {
  nav#main-nav .nav-links { display: none; }
  nav#main-nav .burger    { display: flex; }
}

/* ════════════════════════════════════════════════════════════════════
   PUBLIC SITEWIDE SEE-THROUGH RECIPE  (v3 — 2026-05-15)
   Trent's directive: "the whole sites pages and tabs need to be
   see-through and readable." This rule blankets every non-input,
   non-button, non-nav element that has any rgba/linear-gradient
   inline background, flattens it to a soft .18 black veil so the
   pinned forest photo shows through, and adds a 3-stop text-shadow
   to all body text so wording stays readable on the photo.
   Hard-refresh required after deploying (Ctrl/Cmd + Shift + R).
   ════════════════════════════════════════════════════════════════════ */

/* 1 · UNIVERSAL inline-background flattener.
        Matches ANY element with rgba() or rgba-gradient in its inline style,
        forces background:transparent, and kills any backdrop-filter blur.
        Solid hex backgrounds (buttons like #5585f5) are NOT matched and stay opaque. */
[style*="rgba("][style*="background"]:not(input):not(textarea):not(select):not(button):not(.btn):not([class*="btn-"]):not(.primary):not(.secondary):not(nav):not(nav *):not(.mob-nav):not(.mob-nav *):not(.burger):not(.burger *) {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* 2 · Common card classes — flatten + remove blur (in case inline didn't catch).
        Includes EVERY class public-bg.css.php tints with .32 dark + 8px blur,
        plus stat tiles, trust tiles, hero panels, milestone cards, CTA cards,
        and every page-specific dark card class I've found across the site. */
.card, .callout, .disclosure, .right, .warn, .notify-box,
.daytime-card, .overnight-card, .cs-card, .role-card,
.coming-soon-banner, .feat-card, .feature-card, .stat-card,
.svc-card, .svc-cat-card, .scrap-card, .about-badge, .hero-about-badge,
.phone-feature, .as-box, .cd-ico, .tools,
.studio-canvas-wrap, .studio-side, .step-bar .step, .info-modal,
.price-card, .cat-card, .svc, .section, .prod, .feat .prod,
.trust, .trust-tile, .future, .share, .proof, .proof .stat,
.stat, .stats .stat, .stats > div, .milestone, .milestone-card,
.offload-box, .offload-cat, .info-box,
.form-wrap, .form, form.contact, form.search, .search,
.svc-scrap, .hero .cd, .hero-about,
.bulletin, .bulletin-row, .bulletin-card,
.feat > div, .features > div, .grid > a.card,
/* our-journey + about + contact + food + scrap-metal classes */
.cta, .cta-inner, .ab-stat, .philosophy, .timeline,
.contact-card, .hours, .area, .compliance,
.dim-box, .metal-card, .hero-badge, .coming-soon,
/* about.html middle-section cards */
.stress-card, .svc-ov-card, .promise-item, .why,
#cta, #about, #services, #contact, #scrap,
section[style], section > div[style],
/* generic fallbacks */
section .container > div, main .container > div,
section > .container > div > div,
.stats > * {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* 2-extra · CTA buttons inside .cta cards MUST keep their solid backgrounds.
            Page rules put `.cta a.primary { background: linear-gradient(...) }` etc.
            Re-assert by re-applying nothing — page rule wins (no !important conflict). */
.cta a.primary, .cta a.secondary,
.cta-inner a.primary, .cta-inner a.secondary {
  /* let page rules paint these */
}

/* 2b · Body + structural wrappers must NEVER hide the photo */
body, main, header.hero, .hero, .page-hero, section,
.shell, footer, .site-footer, .footer-wrap, .footer-bar {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* 2c · Kill the html-level brightness filter that softens text */
html { filter: none !important; }

/* 3 · Body-wide text-shadow so wording reads on the photo.
        Strong 6-stop recipe: 4 directional 1px stops give a crisp black outline,
        plus a soft halo + diffuse glow. Excludes nav/mobile/buttons/inputs. */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body li, body label, body strong, body em, body small,
body span, body div, body summary, body details, body td, body th,
body a:not(.btn):not([class*="btn-"]):not(.primary):not(.secondary) {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.85),
     1px -1px 0 rgba(0,0,0,.85),
    -1px  1px 0 rgba(0,0,0,.85),
     1px  1px 0 rgba(0,0,0,.85),
     0 0 8px rgba(0,0,0,.85),
     0 0 18px rgba(0,0,0,.55);
}

/* 4 · Clear text-shadow on UI controls + solid-color buttons + badges so
        they stay crisp (the 6-stop shadow is for text on the photo only). */
nav, nav *, .mob-nav, .mob-nav *, .burger, .burger *,
button, button *, input, textarea, select,
a.primary, a.primary *, a.secondary, a.secondary *,
a.btn, a.btn *, a[class*="btn-"], a[class*="btn-"] *,
.btn, .btn *, .btn-primary, .btn-primary *,
.btn-secondary, .btn-secondary *, .btn-book, .btn-book *,
.btn-ghost, .btn-ghost *, .btn-gold, .btn-gold *,
.btn-sub, .btn-sub *, .btn-details, .btn-details *,
.btns, .btns *, .primary, .primary *, .secondary, .secondary *,
/* Any element with a solid-hex background (not rgba) is a button/badge — */
[style*="background:#"]:not([style*="rgba"]),
[style*="background:#"]:not([style*="rgba"]) *,
[style*="background: #"]:not([style*="rgba"]),
[style*="background: #"]:not([style*="rgba"]) *,
[style*="background-color:#"]:not([style*="rgba"]),
[style*="background-color:#"]:not([style*="rgba"]) *,
[style*="background-color: #"]:not([style*="rgba"]),
[style*="background-color: #"]:not([style*="rgba"]) *,
[style*="background:linear-gradient(135deg,#"]:not([style*="rgba"]),
[style*="background:linear-gradient(135deg,#"]:not([style*="rgba"]) *,
[style*="background: linear-gradient(135deg,#"]:not([style*="rgba"]),
[style*="background: linear-gradient(135deg,#"]:not([style*="rgba"]) *,
/* Common badge classes */
.badge, .badge *, [class*="badge-"], [class*="badge-"] *,
.label, .label *, .pill, .pill *,
/* Any element with DARK text color (black or near-black) needs no shadow —
   the 6-stop black shadow on black text creates a smeared/blurry look. */
[style*="color:#0"], [style*="color: #0"], [style*="color:#0"] *, [style*="color: #0"] *,
[style*="color:#1"], [style*="color: #1"], [style*="color:#1"] *, [style*="color: #1"] *,
[style*="color:#2"], [style*="color: #2"], [style*="color:#2"] *, [style*="color: #2"] *,
[style*="color:black"], [style*="color: black"], [style*="color:black"] *, [style*="color: black"] *,
[style*="color:rgb(0"], [style*="color: rgb(0"], [style*="color:rgb(0"] *, [style*="color: rgb(0"] * {
  text-shadow: none !important;
}

/* 5 · Form inputs: dark fill for readability, no blur */
input, textarea, select {
  background: rgba(7,8,16,.55) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* 6 · Belt-and-suspenders: kill any remaining backdrop-filter on
        non-nav inline styles (just in case). */
[style*="backdrop-filter:blur"]:not(nav):not(.mob-nav),
[style*="backdrop-filter: blur"]:not(nav):not(.mob-nav),
[style*="-webkit-backdrop-filter:blur"]:not(nav):not(.mob-nav),
[style*="-webkit-backdrop-filter: blur"]:not(nav):not(.mob-nav) {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}