/* ============================================================
   IMECA3D — "Blueprint" colour palette (navy + orange)
   The site's colour scheme. Loaded after the other stylesheets (see
   src/partials/head.html), so the colours here win. It only changes colours,
   never layout. To change a colour everywhere, edit the :root block below.
   All text colours below pass WCAG AA contrast (4.5:1 for text).
   ============================================================ */

:root {
  --dark:         #0B1B2E;   /* Blueprint navy: header, hero, footer   */
  --dark-2:       #12263D;   /* Navy panel: cards on dark sections     */
  --dark-3:       #1A324F;
  --accent:       #C2410C;   /* Action orange: buttons, links on white (5.2:1) */
  --accent-h:     #9A3412;   /* Button hover                            */
  --accent-bright:#F07A2E;   /* Signal orange: accents on navy only (6.2:1)    */
  --light:        #F3F6F9;   /* Paper: light section background        */
  --light-2:      #E8EDF3;
  --text:         #14243A;   /* Ink: headings and body text (15.6:1)   */
  --text-2:       #3D4B5C;
  --text-3:       #5B6B7D;   /* Steel grey: notes and captions (5.5:1) */
  --text-on-dark: #A9B6C6;   /* Mist: secondary text on navy (8.4:1)   */
  --border:       #DCE3EB;
  --border-dark:  #22395A;
  --wa-green:     #0F7A40;   /* WhatsApp button, readable with white text (5.4:1) */
  --wa-green-h:   #0B6534;
}

/* On navy backgrounds the brighter orange is used for text and lines */
.nav, .hero, .stats, .section--dark, .page-hero, .footer, .guide-hero, .post-header,
.help-contact, .flow__stage, .hub__stage, .globe-section {
  --accent: var(--accent-bright);
}

/* Buttons always use the deeper orange so white text stays readable */
.btn--primary, .nav__cta, .skip-link {
  background: #C2410C;
  border-color: #C2410C;
  color: #FFFFFF;
}
.nav__links a.nav__cta { color: #FFFFFF; }   /* the menu link colour was overriding the button text */
.btn--primary:hover, .nav__cta:hover { background: #9A3412; border-color: #9A3412; }

/* White cards sitting on navy keep the deeper orange */
.hero-card, .flow__card, .nav__dropdown, .nav__panel, .flow-node--output { --accent: #C2410C; }

/* Orange call-to-action band: deeper orange, full-white text */
.cta-band { background: #C2410C; }
.cta-band p { color: #FFFFFF; }
.btn--white { color: #9A3412; }

/* Secondary text on navy */
.footer { color: var(--text-on-dark); }
.footer__brand p, .footer__bottom { color: var(--text-on-dark); }
.globe-hint, .flow-hint, .flow__col { color: var(--text-on-dark); }

/* Orange labels on light backgrounds: tint badges use dark orange text */
.mat-card__badge, .grade-tag, .project-card__tag { color: #9A3412; }

/* WhatsApp button */
.wa-btn, .contact-wa { background: var(--wa-green); box-shadow: 0 4px 20px rgba(15,122,64,0.35); }
.wa-btn:hover, .contact-wa:hover { background: var(--wa-green-h); }

/* Globe ocean in navy */
.globe { --globe-ocean: #0E2034; --globe-land: #1F3A5C; --globe-land-hover: #2D527F;
  --globe-border: rgba(169,182,198,0.55); --globe-coast: rgba(169,182,198,0.8); --globe-state: rgba(169,182,198,0.38);
  --globe-region: rgba(240,122,46,0.55); --globe-region-hover: rgba(240,122,46,0.82); --globe-accent: #F07A2E; }
.globe-key--hq { background: #F07A2E; box-shadow: 0 0 0 4px rgba(240,122,46,0.25); }
.globe-key--region { background: rgba(240,122,46,0.55); }

/* Rating words on material pages: darker shades that pass contrast */
.rating--excellent { color: #15803D !important; }
.rating--verygood  { color: #4D7C0F !important; }
.rating--good      { color: #1D4ED8 !important; }
.rating--moderate  { color: #B45309 !important; }
.rating--poor      { color: #B91C1C !important; }

/* Glass surfaces in navy */
:root { --glass-dark: rgba(11,27,46,0.84); --glass-dark-strong: rgba(11,27,46,0.94); }
.flow__panel.is-active { border-color: rgba(240,122,46,0.6); }
.flow__panel-icon { background: rgba(240,122,46,0.16); }
.toc-bar { background: rgba(232,237,243,0.84); }
.wa-btn, .contact-wa { background: rgba(15,122,64,0.94); }

/* Small grey labels on navy (guide pages, case study) */
.breadcrumb__inner, .breadcrumb__inner a, .guide-key__label, .cs-meta dt { color: var(--text-on-dark); }
.grades--dark .grade-tag { color: #F7A06B; background: rgba(240,122,46,0.14); }
.grades--dark .grade-card__best strong { color: var(--text-on-dark); }
.grades--dark .grade-chip--hard { background: #C2410C; }
.summary-box { --accent: var(--accent-bright); }
.guide-note .link-accent { color: #9A3412; }

/* ============================================================
   Glass surfaces
   Frosted glass only shows when something sits behind it, so the dark and light
   sections get soft orange and blue glows, and cards on top of them are
   semi-transparent, blurred, with a light edge and a top highlight.
   ============================================================ */
:root {
  --glass-bg: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 60%);
  --glass-border: rgba(255,255,255,0.18);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 32px rgba(3,10,20,0.35);
  --glass-blur: blur(16px) saturate(160%);
  --frost-bg: linear-gradient(150deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55));
  --frost-border: rgba(255,255,255,0.95);
  --frost-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(20,36,58,0.08);
  --glow-dark: radial-gradient(620px circle at 88% 10%, rgba(240,122,46,0.22), transparent 62%),
               radial-gradient(720px circle at 4% 95%, rgba(47,111,237,0.26), transparent 62%);
  --glow-light: radial-gradient(560px circle at 92% 8%, rgba(240,122,46,0.12), transparent 60%),
                radial-gradient(680px circle at 0% 100%, rgba(47,111,237,0.12), transparent 60%);
}

/* backgrounds with glows */
.section--dark, .stats, .hub-section, .page-hero { background: var(--glow-dark), var(--dark); }
.hero::before { background: radial-gradient(ellipse 55% 75% at 80% 45%, rgba(240,122,46,0.16), transparent 70%),
                            radial-gradient(ellipse 50% 70% at 10% 100%, rgba(47,111,237,0.22), transparent 70%); }
.section--light { background: var(--glow-light), var(--light); }

/* dark glass cards */
.stats__item, .benefit, .flow-node--input, .hub-node, .flow__panel, .hub__center.is-detail, .globe__controls button,
.grades--dark .grade-card, .help-contact, .globe-list li {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.stats { padding: 28px 0; }
.stats__grid { gap: 16px; }
.stats__item { border-radius: 16px; padding: 22px 12px; }
.benefit { border-radius: 16px; padding: 22px; }
.flow__panel.is-active { border-color: rgba(240,122,46,0.65); box-shadow: var(--glass-shadow), 0 0 0 1px rgba(240,122,46,0.25); }
.hub-node:hover, .hub-node.is-current, .flow-node--input:hover, .flow-node--input.is-current { border-color: rgba(240,122,46,0.7); }
.flow--narrow .flow__panel { background: linear-gradient(150deg, rgba(26,50,79,0.92), rgba(11,27,46,0.9)); }

/* light frosted cards */
.service-card, .material-card, .mat-card, .grade-card, .related a, .alt-card, .post-card, .choose-box {
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  box-shadow: var(--frost-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.service-card:hover, .material-card:hover, .grade-card:hover { border-color: rgba(194,65,12,0.45); }
.grades--dark .grade-card:hover { border-color: rgba(240,122,46,0.6); }
.section:not(.section--dark):not(.section--light):has(.services__grid, .portfolio__grid, .mat-cards, .grade-grid, .post-list) { background: var(--glow-light), #FFFFFF; }

/* ---------- Header glass, menus and dropdowns ----------
   The blur sits on a layer *behind* the header (::before) instead of on the header itself:
   a blur on the header would stop the menus inside it from being frosted too. */
.nav { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass-dark);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transition: background 0.25s; }
body:not(.scrolled) .nav::before { background: var(--dark); }
@media (min-width: 1001px) {
  /* menu panel opens just below the header bar, so it never touches the Get a Quote button */
  .nav__panel { top: calc(50% + var(--nav-h) / 2 + 8px); }
  .nav__item--panel::before { height: calc(var(--nav-h) / 2 + 14px); }
  .nav__panel {
    background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(3,10,20,0.35);
  }
  .nav__dropdown:not(.nav__panel) { background: rgba(18,38,61,0.82); border-color: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
}
@media (max-width: 1000px) {
  .nav__links { background: rgba(11,27,46,0.94); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
}

/* a little more glass everywhere */
:root {
  --glass-bg: linear-gradient(150deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 60%);
  --glass-border: rgba(255,255,255,0.24);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 14px 36px rgba(3,10,20,0.4);
  --glass-blur: blur(20px) saturate(180%);
  --frost-bg: linear-gradient(150deg, rgba(255,255,255,0.74), rgba(255,255,255,0.42));
  --glass-dark: rgba(11,27,46,0.72);
}
.globe-list { color: var(--text-on-dark); }

/* Language menu: opens at the same height and in the same frosted style as the other menus */
@media (min-width: 1001px) {
  .nav__lang .nav__dropdown { top: calc(100% + 22.5px); right: 0; left: auto; min-width: 200px; padding: 10px;
    background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.75); border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(3,10,20,0.35); }
  .nav__lang::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px; }
  .nav__links .nav__lang .nav__dropdown a { color: var(--text); padding: 10px 14px; border-radius: var(--radius); font-weight: 500; }
  .nav__links .nav__lang .nav__dropdown a:hover, .nav__links .nav__lang .nav__dropdown a[aria-current] { background: var(--light); color: var(--text); }
}

/* The old hover bridges under each menu word were full-width and overlapped, so the last one
   (Resources) captured the mouse. Each panel now carries its own bridge (style.css), so these are off. */
@media (min-width: 1001px) {
  .nav__item--panel::before { content: none; display: none; }
}