/* ==========================================================================
   Evermont International Academy — responsive.css
   Loaded last. Contains breakpoint overrides and print styles only.
   Breakpoints: 1080px (tablet landscape), 860px (nav collapse), 620px (phone)
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-lg);
  }

  .hero__aside {
    border-left: 0;
    border-top: var(--rule-hair) solid var(--c-line-on-navy);
    padding-left: 0;
    padding-top: var(--s-lg);
  }

  .split,
  .split--even,
  .update-band,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-lg);
  }

  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-toc {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Navigation collapse
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background-color: var(--surface-page);
    border-bottom: var(--rule-hair) solid var(--c-line);
    box-shadow: var(--shadow-quiet);
    padding: var(--s-sm) 0 var(--s-md);
    display: none;
  }

  .primary-nav.is-open {
    display: block;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .primary-nav__link {
    min-block-size: 3.25rem;
    border-bottom: var(--rule-hair) solid var(--c-line);
    border-left: var(--rule-brass) solid transparent;
    padding-left: var(--s-xs);
    font-size: var(--t-body);
  }

  .primary-nav__link[aria-current="page"] {
    border-bottom-color: var(--c-line);
    border-left-color: var(--c-brass);
  }

  .primary-nav__cta {
    margin-left: 0;
    margin-top: var(--s-sm);
    width: 100%;
  }

  .site-header__inner {
    position: relative;
  }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  :root {
    --header-h: 4rem;
  }

  .status-notice__inner {
    display: grid;
    gap: var(--s-2xs);
  }

  .brand__mark {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .brand__name {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
  }

  .btn {
    inline-size: 100%;
  }

  .btn-row {
    display: grid;
    gap: var(--s-xs);
  }

  .card {
    padding: var(--s-md);
  }

  .pillar + .pillar,
  .meaning__item + .meaning__item {
    padding-left: 0;
    border-left: 0;
  }

  .pillar,
  .meaning__item {
    padding-right: 0;
  }

  .def-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .promise__lines span {
    padding-left: var(--s-sm);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-lg);
  }

  .footer-bottom {
    display: grid;
  }

  .hero__art {
    opacity: 0.35;
  }
}

/* --------------------------------------------------------------------------
   Large viewports
   -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
  :root {
    --container: 82rem;
  }
}

/* --------------------------------------------------------------------------
   Forced colours (Windows High Contrast)
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .card,
  .panel,
  .field input,
  .field select,
  .field textarea {
    border: 1px solid;
  }

  .primary-nav__link[aria-current="page"] {
    border-bottom: 3px solid;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-toggle,
  .primary-nav,
  .hero__art,
  .btn,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hero,
  .section--deep,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .hero__headline,
  .promise__lines,
  .section--deep .h2,
  .site-footer a {
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}