/* ==========================================================================
   Art Aluminium — Design B: "Navy & Aluminium"
   Navy is the complement of the logo's orange; azure is the secondary accent,
   orange/amber stay reserved for calls to action and key figures.
   The chosen design: <html data-theme="b"> is set on every page; styles.css is the base layer.
   ========================================================================== */

/* ---------- Light (aluminium) surfaces: the default in Design B ---------- */
html[data-theme="b"] {
  --ink: #f3f5f8;          /* page background */
  --ink-2: #ffffff;        /* cards */
  --ink-3: #e6eaf0;
  --line: rgba(11, 28, 48, 0.1);
  --line-2: rgba(11, 28, 48, 0.18);
  --text: #0b1c30;
  --muted: #4b5b70;
  --dim: #7a8899;

  --paper: #ffffff;
  --paper-2: #e6eaf0;
  --paper-ink: #0b1c30;
  --paper-muted: #4b5b70;
  --paper-line: rgba(11, 28, 48, 0.08);

  --navy: #0b1c30;
  --navy-2: #102742;
  --accent-text: #c25a00;  /* readable orange for text on light */
  --blue: #1e63b0;         /* complementary azure */
  --blue-soft: rgba(30, 99, 176, 0.1);
  --strong: #0b1c30;

  color-scheme: light;
}

/* ---------- Navy surfaces ---------- */
html[data-theme="b"] :is(.site-header, .mobile-menu, .hero, .ticker, .services, .quality-panel,
  .footer, .page-hero, .q-summary, .q-bar, .q-toast) {
  --ink: #0b1c30;
  --ink-2: #102742;
  --ink-3: #173352;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #eaf0f7;
  --muted: #a7b5c7;
  --dim: #8090a5;
  --accent-text: #fcae1b;
  --blue: #7cb1ec;
  --blue-soft: rgba(124, 177, 236, 0.14);
  --strong: #ffffff;
  color-scheme: dark;
  color: var(--text);
}

html[data-theme="b"] body { background: var(--ink); color: var(--text); }

/* Type accents: orange for eyebrows, azure for text links */
html[data-theme="b"] .eyebrow,
html[data-theme="b"] .section-light .eyebrow { color: var(--accent-text); }
html[data-theme="b"] .link-arrow { color: var(--blue); }
html[data-theme="b"] .text-metal {
  background-image: linear-gradient(100deg, #36506f 0%, #8aa4c4 28%, #1e3553 46%, #6f8db3 62%, #36506f 100%);
}
html[data-theme="b"] :is(.hero, .services, .quality-panel, .page-hero, .footer) .text-metal {
  background-image: linear-gradient(100deg, #8ea3bd 0%, #f4f7fb 28%, #b7c6d8 46%, #ffffff 62%, #8ea3bd 100%);
}

/* ---------- Header & menu ---------- */
html[data-theme="b"] .site-header.scrolled { background: rgba(11, 28, 48, 0.86); }
html[data-theme="b"] .nav a:hover,
html[data-theme="b"] .nav a.active { background: var(--blue-soft); color: #fff; }
html[data-theme="b"] .mobile-menu { background: rgba(11, 28, 48, 0.97); }

/* ---------- Hero: navy duotone over the profile video ---------- */
html[data-theme="b"] .hero { background: var(--navy); }
html[data-theme="b"] .hero-media video { filter: grayscale(1) contrast(1.05); }
html[data-theme="b"] .hero::before {
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(30, 99, 176, 0.28), transparent 70%),
    linear-gradient(90deg, rgba(11, 28, 48, 0.95) 0%, rgba(11, 28, 48, 0.72) 45%, rgba(11, 28, 48, 0.3) 100%),
    linear-gradient(0deg, #0b1c30 0%, rgba(11, 28, 48, 0) 45%),
    linear-gradient(180deg, rgba(11, 28, 48, 0.7) 0%, rgba(11, 28, 48, 0) 22%);
}
@media (max-width: 860px) {
  html[data-theme="b"] .hero::before {
    background: linear-gradient(0deg, #0b1c30 0%, rgba(11, 28, 48, 0.8) 55%, rgba(11, 28, 48, 0.6) 100%);
  }
}

/* ---------- Ticker ---------- */
html[data-theme="b"] .ticker { background: var(--navy-2); }
html[data-theme="b"] .ticker span { -webkit-text-stroke-color: rgba(124, 177, 236, 0.6); }
html[data-theme="b"] .ticker span.fill { -webkit-text-stroke: 0; }

/* ---------- About ---------- */
html[data-theme="b"] .about-badge { background: rgba(255, 255, 255, 0.86); border-color: rgba(11, 28, 48, 0.08); }
html[data-theme="b"] .pillar h3 svg { color: var(--blue); }
html[data-theme="b"] .card { box-shadow: 0 1px 0 rgba(11, 28, 48, 0.04), 0 18px 40px -30px rgba(11, 28, 48, 0.35); }
html[data-theme="b"] .tl-item::before { background: var(--blue); box-shadow: 0 0 0 6px var(--blue-soft); }

/* ---------- Services (navy) ---------- */
html[data-theme="b"] .services::before { background: radial-gradient(60% 50% at 85% 0%, rgba(30, 99, 176, 0.35), transparent 70%); }
html[data-theme="b"] .service-icon { color: var(--blue); border-color: rgba(124, 177, 236, 0.3); }
html[data-theme="b"] .service::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(124, 177, 236, 0.16), transparent 45%); }

/* ---------- Products ---------- */
html[data-theme="b"] .product { background: linear-gradient(165deg, #ffffff 0%, #eaeef3 100%); }
html[data-theme="b"] .product-tag { background: var(--blue-soft); color: var(--blue); }
html[data-theme="b"] .product-open { background: var(--navy); }
html[data-theme="b"] .product-custom { background: var(--navy); }
html[data-theme="b"] .product-custom::before { background: radial-gradient(circle, rgba(30, 99, 176, 0.55), transparent 65%); }
html[data-theme="b"] .product-custom p { color: #a7b5c7; }

/* ---------- Facility ---------- */
html[data-theme="b"] .tile figcaption { background: rgba(11, 28, 48, 0.7); color: #fff; }

/* ---------- Quality (navy panel) ---------- */
html[data-theme="b"] .quality-panel {
  background:
    radial-gradient(80% 90% at 100% 50%, rgba(30, 99, 176, 0.3), transparent 60%),
    var(--navy-2);
  border-color: transparent;
}
html[data-theme="b"] .quality-list .qi { background: var(--blue-soft); color: var(--blue); }

/* ---------- News ---------- */
html[data-theme="b"] .news-card { box-shadow: 0 24px 50px -36px rgba(11, 28, 48, 0.45); }
html[data-theme="b"] .chip { background: var(--blue-soft); color: var(--blue); }

/* ---------- Catalogue band & buttons ---------- */
html[data-theme="b"] .btn-dark { background: var(--navy); }
html[data-theme="b"] .btn-dark:hover { background: #06121f; }
html[data-theme="b"] .book {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 14px, rgba(0, 0, 0, 0.25) 14px 15px, transparent 15px),
    linear-gradient(160deg, #173352 0%, #0b1c30 100%);
}

/* ---------- Contact & map ---------- */
html[data-theme="b"] .contact-row .ci { color: var(--blue); border-color: rgba(30, 99, 176, 0.25); background: var(--blue-soft); }
html[data-theme="b"] .contact-row a.value:hover,
html[data-theme="b"] .contact-row .value a:hover,
html[data-theme="b"] .phone a:first-child:hover { color: var(--blue); }
html[data-theme="b"] .wa { background: rgba(22, 163, 74, 0.1); color: #15803d; }
html[data-theme="b"] .form { box-shadow: 0 30px 60px -40px rgba(11, 28, 48, 0.45); }
html[data-theme="b"] .form > p a { color: var(--accent-text) !important; }
html[data-theme="b"] .form-status { color: #15803d; }
html[data-theme="b"] .map iframe { filter: grayscale(0.35) contrast(1.02); }
html[data-theme="b"] .map-pin { background: rgba(255, 255, 255, 0.92); border-color: var(--line); }
html[data-theme="b"] .map-pin a { color: var(--accent-text); }

/* ---------- Footer ---------- */
html[data-theme="b"] .footer { border-top: 0; }
html[data-theme="b"] .footer ul a { color: #c9d5e3; }
html[data-theme="b"] .footer-mark { -webkit-text-stroke-color: rgba(124, 177, 236, 0.22); }
html[data-theme="b"] .socials a:hover { color: #1a0d00; }

/* ---------- Lightboxes ---------- */
html[data-theme="b"] .lightbox::backdrop { background: rgba(6, 18, 31, 0.82); }
html[data-theme="b"] .lb-close { background: var(--navy); }
html[data-theme="b"] .lb-thumbs button[aria-current="true"] { border-color: var(--blue); }

/* ==========================================================================
   Quote page
   ========================================================================== */
html[data-theme="b"] .page-hero { background: var(--navy); border-bottom: 0; }
html[data-theme="b"] .page-hero::before {
  background:
    radial-gradient(50% 80% at 92% 0%, rgba(247, 129, 4, 0.22), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, rgba(30, 99, 176, 0.35), transparent 70%);
}
html[data-theme="b"] .q-panel { box-shadow: 0 1px 0 rgba(11, 28, 48, 0.04), 0 24px 50px -40px rgba(11, 28, 48, 0.45); }

/* Catalogue window */
html[data-theme="b"] .cat-window { scrollbar-color: rgba(11, 28, 48, 0.3) transparent; }
html[data-theme="b"] .cat-window::-webkit-scrollbar-thumb { background: rgba(11, 28, 48, 0.25); }
html[data-theme="b"] .cat-card { background: var(--ink-2); }
html[data-theme="b"] .cat-card:hover { border-color: var(--blue); box-shadow: 0 16px 30px -22px rgba(11, 28, 48, 0.5); }
html[data-theme="b"] .cat-card.in { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
html[data-theme="b"] .cat-img { border-bottom: 1px solid var(--line); }
html[data-theme="b"] .cat-w { color: var(--text); }
html[data-theme="b"] .cat-price { color: var(--accent-text); }
html[data-theme="b"] :is(.cat-add, .cat-zoom) { background: rgba(11, 28, 48, 0.85); }
html[data-theme="b"] .cat-zoom:hover { background: var(--blue); color: #fff; }
html[data-theme="b"] .q-link { color: var(--blue); }

/* Lines & fields */
html[data-theme="b"] .seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
html[data-theme="b"] .q-len-result { background: var(--blue-soft); color: var(--blue); }
html[data-theme="b"] .q-add:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
html[data-theme="b"] .q-warn { background: #fef3c7; color: #92400e; }
html[data-theme="b"] .q-error { background: #fee2e2; color: #b91c1c; }
html[data-theme="b"] .pill > span { color: var(--muted); }
html[data-theme="b"] .pill svg { color: var(--blue); }
html[data-theme="b"] .pill input:checked + span { color: var(--text); border-color: var(--blue); background: var(--blue-soft); }

/* Summary (navy) and help box */
html[data-theme="b"] .q-summary { background: linear-gradient(180deg, #13304f 0%, #0b1c30 100%); border-color: transparent; }
html[data-theme="b"] .q-help { background: var(--ink-2); }
html[data-theme="b"] .q-help svg { color: var(--blue); }
html[data-theme="b"] .q-help a { color: var(--text); }
html[data-theme="b"] .q-help a:hover { color: var(--blue); }
html[data-theme="b"] .q-bar { background: rgba(11, 28, 48, 0.94); }
html[data-theme="b"] .q-toast { background: var(--navy-2); }

/* ---------- Catalogue downloads & Instagram ---------- */
html[data-theme="b"] :is(.dl-ic, .dl-go) { background: var(--navy); }
html[data-theme="b"] .dl-card:hover .dl-go { background: var(--blue); }
html[data-theme="b"] .insta-ov { background: linear-gradient(180deg, rgba(11, 28, 48, 0) 30%, rgba(11, 28, 48, 0.65)); }
html[data-theme="b"] .insta-tile { box-shadow: 0 18px 36px -28px rgba(11, 28, 48, 0.55); }

/* Hero photo gets the same navy duotone treatment as the old video */
html[data-theme="b"] .hero-media img { filter: grayscale(1) contrast(1.08); }