/* Midnight Standard Co. responsive layer.
   The pages are authored with inline styles for desktop. This file adapts them for
   tablets and phones. Inline styles win by specificity, so every override here is
   !important. Selectors key off the stable data-screen-label sections and section ids
   so a fresh design export keeps working without extra classes. */

/* ---------- Theme ----------
   The pages reference these variables inline (tools/apply-exports.ps1 swaps the design
   tool's green hex values for them). Accent is Crisp Ice Blue on every surface. On light
   surfaces it is hard to read, so accent text gets a dark text shadow and buttons a drop
   shadow, per the client. */
:root {
  --primary: #1A1730;            /* Midnight */
  --primary-hover: #2E2A52;
  --ice: #C9E7F5;                /* Crisp Ice Blue */
  --ice-light: #E6F4FB;
  --ink-shadow: 1px 1px 0 #1A1730;   /* hard-edged, no blur */

  --accent: var(--ice);
  --accent-hover: var(--ice-light);
  --accent-soft: var(--ice);
  --accent-shadow: var(--ink-shadow);           /* light surfaces */
  --btn-bg: var(--ice);
  --btn-bg-hover: var(--ice-light);
  --btn-fg: var(--primary);
  --btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* dark surfaces: ice blue reads on its own */
header[data-screen-label="Nav"],
footer[data-screen-label="Footer"],
[data-screen-label="Hero"],
[data-screen-label$=" hero"],
[data-screen-label="Industries"],
[data-screen-label="Certification"],
[data-screen-label="Contact"],
[data-screen-label="Every program includes"] {
  --accent-shadow: none;
  --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* the quote form is a white card inside the dark contact section */
[data-screen-label="Contact"] form {
  --accent-shadow: var(--ink-shadow);
  --btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* Anything colored with the accent inline picks up the shadow it needs */
[style*="var(--accent"] { text-shadow: var(--accent-shadow); }
[style*="var(--btn-bg)"] { box-shadow: var(--btn-shadow); }

/* Anchored sections sit below the sticky header when linked to */
[id] { scroll-margin-top: 96px; }

html, body { overflow-x: clip; }
img { max-width: 100%; }

/* Mobile menu button, injected by site.js. Hidden on desktop. */
.ms-menu-btn { display: none; }

/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
  [data-screen-label="Reviews"] > div[data-reveal] > div:last-child { columns: 2 !important; }
}

@media (max-width: 900px) {
  /* Headings */
  section[data-screen-label] h1 { font-size: clamp(38px, 10vw, 60px) !important; }
  section[data-screen-label] h2 { font-size: clamp(30px, 7.5vw, 44px) !important; }
  section[data-screen-label] h1 + p,
  section[data-screen-label] h2 + p { font-size: 17px !important; }

  /* Nav: compact logo row with quote button and menu toggle */
  header[data-screen-label="Nav"] > div {
    padding: 10px 16px !important;
    gap: 10px !important;
  }
  header[data-screen-label="Nav"] > div > a:first-child img { height: 44px !important; }
  header[data-screen-label="Nav"] > div > a:first-child span { font-size: 17px !important; }
  header[data-screen-label="Nav"] > div > a:first-child span:last-child { font-size: 9px !important; margin-top: 4px !important; }
  header[data-screen-label="Nav"] > div > div { margin-left: auto !important; }
  header[data-screen-label="Nav"] > div > div > a { padding: 10px 14px !important; font-size: 13px !important; }

  /* Mobile menu: the toggle */
  .ms-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
  .ms-menu-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
  .ms-menu-btn .ms-ico-x { display: none; }
  html.ms-menu-open .ms-menu-btn .ms-ico-bars { display: none; }
  html.ms-menu-open .ms-menu-btn .ms-ico-x { display: block; }

  /* Mobile menu: the panel. Drops below the sticky header and overlays the page. */
  header[data-screen-label="Nav"] nav {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px 20px 18px !important;
    background: #1A1730 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35) !important;
    white-space: normal !important;
  }
  html.ms-menu-open header[data-screen-label="Nav"] nav { display: flex !important; }
  header[data-screen-label="Nav"] nav > a {
    display: block !important;
    padding: 15px 2px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  header[data-screen-label="Nav"] nav > a:last-child { border-bottom: 0 !important; }

  /* Services page jump bar sits under a taller nav on mobile, so stop pinning it */
  [data-screen-label="Service nav"] { position: static !important; }
  [data-screen-label="Service nav"] > div {
    padding: 0 20px !important;
    gap: 22px !important;
    font-size: 13px !important;
    overflow-x: auto !important;
    white-space: nowrap;
  }
  [data-screen-label="Service nav"] > div > a { padding: 14px 0 !important; }

  /* Heroes */
  [data-screen-label="Hero"],
  [data-screen-label$=" hero"] { min-height: 0 !important; }
  [data-screen-label="Hero"] > div:last-child {
    grid-template-columns: 1fr !important;
    padding: 72px 20px 44px !important;
    gap: 32px !important;
  }
  [data-screen-label$=" hero"] > div:last-child { padding: 64px 20px 44px !important; }
  [data-screen-label="Hero"] h1 { font-size: clamp(40px, 11vw, 68px) !important; }

  /* Trust bar */
  [data-screen-label="Trust bar"] > div {
    padding: 18px 20px !important;
    justify-content: center !important;
    gap: 12px 20px !important;
  }
  [data-screen-label="Trust bar"] > div > span:last-child {
    border-left: 0 !important;
    padding-left: 0 !important;
    width: 100%;
    justify-content: center !important;
  }

  /* Section containers: one column, tighter padding */
  [data-screen-label="Services"] > div[data-reveal],
  [data-screen-label="About"] > div[data-reveal],
  [data-screen-label="Certification"] > div[data-reveal],
  [data-screen-label="Reviews"] > div[data-reveal],
  [data-screen-label="Our story"] > div[data-reveal],
  [data-screen-label="Timeline"] > div[data-reveal],
  [data-screen-label="Team"] > div[data-reveal],
  [data-screen-label="Values"] > div[data-reveal],
  [data-screen-label="Service area"] > div[data-reveal],
  [data-screen-label="Service detail"] > div[data-reveal],
  [data-screen-label="Every program includes"] > div[data-reveal],
  [data-screen-label="What to expect"] > div[data-reveal],
  [data-screen-label="CTA"] > div[data-reveal] {
    padding: 64px 20px !important;
    gap: 36px !important;
  }
  [data-screen-label="Industries"],
  [data-screen-label="Process"],
  [data-screen-label="Contact"] { padding: 64px 20px !important; }
  [data-screen-label="Reviews"] > div[data-reveal] { padding-bottom: 96px !important; }
  [data-screen-label="Service area"] > div[data-reveal] { padding-bottom: 96px !important; }

  [data-screen-label="Services"] > div[data-reveal] > div:first-child,
  [data-screen-label="Industries"] div[data-reveal] > div:first-child,
  [data-screen-label="About"] > div[data-reveal],
  [data-screen-label="Certification"] > div[data-reveal],
  [data-screen-label="Contact"] > div[data-reveal],
  [data-screen-label="Our story"] > div[data-reveal],
  [data-screen-label="Service area"] > div[data-reveal],
  [data-screen-label="Service detail"] > div[data-reveal] {
    grid-template-columns: 1fr !important;
  }

  /* Home: services list rows */
  [data-screen-label="Services"] article {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 32px 0 !important;
  }
  [data-screen-label="Services"] article > span:first-child { font-size: 30px !important; }
  [data-screen-label="Services"] article h3 { font-size: 26px !important; }
  [data-screen-label="Services"] article img { height: 220px !important; }

  /* Home: industries cards */
  [data-screen-label="Industries"] div[data-reveal] > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  [data-screen-label="Industries"] div[data-reveal] > div:last-child > div { min-height: 240px !important; }

  /* Scroll parallax shifts elements unpredictably in stacked layouts */
  [data-parallax] { transform: none !important; }

  /* Home: who-we-are photo (portrait team shot) */
  [data-screen-label="About"] > div[data-reveal] > div:first-child { height: 440px !important; }
  [data-screen-label="About"] > div[data-reveal] > div:first-child > img { object-position: center 20% !important; }

  /* Certification badge */
  [data-screen-label="Certification"] > div[data-reveal] > div:first-child > div {
    width: 220px !important;
    height: 220px !important;
  }
  [data-screen-label="Certification"] > div[data-reveal] > div:first-child > div img {
    width: 186px !important;
    height: 186px !important;
  }

  /* Four-column step and value grids become two columns */
  [data-screen-label="Process"] div[data-reveal] > div:last-child,
  [data-screen-label="Timeline"] div[data-reveal] > div:last-child,
  [data-screen-label="What to expect"] div[data-reveal] > div:last-child,
  [data-screen-label="Values"] div[data-reveal] > div:last-child,
  [data-screen-label="Every program includes"] div[data-reveal] > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [data-screen-label="Process"] div[data-reveal] > div:last-child,
  [data-screen-label="Timeline"] div[data-reveal] > div:last-child,
  [data-screen-label="What to expect"] div[data-reveal] > div:last-child { row-gap: 32px !important; }

  /* Decorative oversized text is clutter on small screens */
  [data-screen-label="Process"] > span[aria-hidden],
  [data-screen-label="Reviews"] > span[aria-hidden] { display: none !important; }

  /* Service detail (services page): photo above text */
  [data-screen-label="Service detail"] > div[data-reveal] > div:first-child { order: 2 !important; }
  [data-screen-label="Service detail"] > div[data-reveal] > div:last-child { order: 1 !important; height: 320px !important; }
  [data-screen-label="Service detail"] > div[data-reveal] > div:first-child > span:first-child { font-size: 32px !important; }

  /* Story photo (about page) */
  [data-screen-label="Our story"] > div[data-reveal] > div:last-child { height: 340px !important; }

  /* Service area list (about page) */
  [data-screen-label="Service area"] > div[data-reveal] > div:last-child { font-size: 18px !important; }

  /* Contact form */
  [data-screen-label="Contact"] form { padding: 22px !important; }

  /* Footer */
  footer[data-screen-label="Footer"] > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important;
    padding: 48px 20px 24px !important;
  }
  footer[data-screen-label="Footer"] > div:last-child {
    padding: 16px 20px 24px !important;
    flex-wrap: wrap !important;
    gap: 6px 16px !important;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  [data-screen-label="Process"] div[data-reveal] > div:last-child,
  [data-screen-label="Timeline"] div[data-reveal] > div:last-child,
  [data-screen-label="What to expect"] div[data-reveal] > div:last-child,
  [data-screen-label="Values"] div[data-reveal] > div:last-child,
  [data-screen-label="Every program includes"] div[data-reveal] > div:last-child,
  [data-screen-label="Reviews"] > div[data-reveal] > div:last-child {
    grid-template-columns: 1fr !important;
    columns: 1 !important;
  }
  [data-screen-label="Service detail"] ul { grid-template-columns: 1fr !important; }
  [data-screen-label="Team"] div[data-reveal] > div:last-child { grid-template-columns: 1fr !important; }
  footer[data-screen-label="Footer"] > div:first-child { grid-template-columns: 1fr !important; }
  footer[data-screen-label="Footer"] > div:last-child { flex-direction: column !important; }
}

@media (max-width: 480px) {
  header[data-screen-label="Nav"] > div > a:first-child span:last-child { display: none !important; }
  header[data-screen-label="Nav"] > div > a:first-child img { height: 38px !important; }
  header[data-screen-label="Nav"] > div > a:first-child span { font-size: 15px !important; }
  header[data-screen-label="Nav"] > div > a:first-child { gap: 10px !important; }
  header[data-screen-label="Nav"] > div > div > a { padding: 10px 11px !important; font-size: 12px !important; }
  [data-screen-label="Hero"] > div:last-child > div:last-child { grid-template-columns: 1fr 1fr !important; }
  [data-screen-label="Hero"] > div:last-child > div:last-child span:first-child { font-size: 24px !important; }
  [data-screen-label="About"] > div[data-reveal] > div:last-child > div:last-child { grid-template-columns: 1fr !important; }
  [data-screen-label="Industries"] div[data-reveal] > div:last-child { grid-template-columns: 1fr !important; }
  [data-screen-label="Industries"] div[data-reveal] > div:last-child > div { min-height: 200px !important; }
  [data-screen-label="Contact"] form > div,
  [data-screen-label="Contact"] form > div > div { grid-template-columns: 1fr !important; }
  [data-screen-label="Contact"] form { padding: 18px !important; }
  [data-screen-label="Service area"] > div[data-reveal] > div:last-child { grid-template-columns: 1fr !important; }
  section[data-screen-label] a[href^="#contact"],
  section[data-screen-label] a[href="/contact"] { padding: 15px 22px !important; font-size: 15px !important; }
}