/* Phones and tablets, the parts every page shares: the ☰ menu (menu.js), the header, the
   footer, the swiped strip of cards, and on phones the spacing, section headings, FAQ, the last
   call to action, the panels that come up from the bottom and the fixed consultation button.
   Loaded last in <head>, after the page's own styles; a page's own phone layout comes after it
   (mobile.css for the home page, mobile-country.css for the countries). On a desktop screen none
   of it shows.

   1080px and below: the header's seven links and its button no longer fit, so they fold into ☰.
   1000px and below (and any touch screen): the strip of cards is swiped, not moving by itself.
    760px and below: phones. */

.m-burger, .m-cta { display: none; } /* .m-cta: the fixed consultation button (mobile.js) */
@keyframes m-sheet-in { from { transform: translateY(100%); } }
@keyframes m-sheet-out { to { transform: translateY(100%); } }
html:has(dialog.m-menu[open]) { overflow: hidden; } /* the page behind doesn't scroll */

/* ======================================================================
   1080px — the header folds into ☰
   ====================================================================== */
@media (max-width: 1080px) {
  .hdr nav, .hdr-right > .btn { display: none; }
  .hdr-right { gap: 6px; }
  .m-burger {
    display: grid; place-content: center; gap: 7px;
    width: 48px; height: 48px; margin-right: -12px; padding: 0;
    border: 0; background: none; color: inherit; cursor: pointer;
  }
  .m-burger span { display: block; width: 24px; height: 1.5px; border-radius: 2px; background: currentColor; }
  .lang-switch { align-items: center; font-size: 14px; }
  .lang-switch button { padding: 14px 6px; } /* taller, not wider: a 48px row to tap */
}

/* The menu: the page colour over the whole screen, big links, the button at the bottom */
dialog.m-menu {
  position: fixed; inset: 0; margin: 0; border: 0;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--cream); color: var(--ink);
  display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
dialog.m-menu[open] { display: flex; }
dialog.m-menu::backdrop { background: transparent; }
.m-menu-top { flex: none; display: flex; align-items: center; gap: 6px; height: 64px; }
.m-menu-top .logo { margin-right: auto; }
.m-menu-top .logo b { font-size: 26px; }
.m-menu-close {
  width: 48px; height: 48px; margin-right: -12px; padding: 0; border: 0; background: none;
  color: inherit; font-size: 36px; line-height: 1; cursor: pointer;
}
.m-menu-links { display: flex; flex-direction: column; padding: 20px 0 32px; }
.m-menu-links a {
  padding: 12px 0; border-bottom: 1px solid rgba(42, 29, 20, .12);
  font-family: var(--font-head); font-size: 36px; line-height: 1.1; text-decoration: none;
}
.m-menu-links a[aria-current="page"] { color: var(--terracotta); }
.m-menu-cta { flex: none; margin-top: auto; width: 100%; min-height: 56px; justify-content: center; font-size: 17px; }
@keyframes m-fade { from { opacity: 0; } }
.anim dialog.m-menu[open] { animation: m-fade .25s ease; }

/* Countries: a row of cards that stands still and scrolls under a finger (countries-strip.js
   stays out of it at these widths) */
@media (max-width: 1000px), (hover: none) {
  .country-strip {
    --strip-pad: 48px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--strip-pad);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .country-strip::-webkit-scrollbar { display: none; }
  .strip-track { padding: 0 var(--strip-pad); gap: 28px; }
  .country, .ls-lesson { scroll-snap-align: start; }
}

@media (max-width: 760px) {
  body { overflow-x: clip; } /* a safety net: nothing may push the page sideways */
  .hdr .wrap { height: 64px; }
  .hdr .logo b { font-size: 26px; }
  .country-strip { --strip-pad: 24px; }

  /* ---------- Footer ---------- */
  .skyline svg { height: 120px; }
  .ft-ground { padding: 52px 0 calc(36px + env(safe-area-inset-bottom)); }
  .ft { grid-template-columns: 1fr; gap: 34px; padding-bottom: 36px; }
  .ft .logo b { font-size: 40px; }
  .ft p { max-width: none; font-size: 16px; opacity: .8; }
  .ft h4 { margin-bottom: 4px; font-size: 13px; opacity: .7; }
  .ft li { margin: 0; font-size: 18px; color: rgba(246, 241, 232, .9); }
  .ft li a { display: block; padding: 10px 0; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 6px; opacity: .75; }
  .ft-privacy { padding: 12px 0; }

  /* ---------- Spacing and section headings ---------- */
  .wrap { padding: 0 20px; }
  section { padding: 64px 0; }
  .anim section[id] { scroll-margin-top: 72px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
  .sec-head h2, html[lang="uk"] #universities .sec-head h2 { font-size: 44px; line-height: 1.02; }
  .sec-head p { max-width: none; font-size: 17px; opacity: .85; }
  .sec-head h2 .br { white-space: nowrap; } /* "[ можна вступити ]" moves down whole, not with a lone "[" left behind */

  /* Reveals: the same fade, shorter and quicker */
  .anim [data-reveal] { transform: translateY(16px); transition-duration: .55s; }
  .anim [data-reveal] .ph img { transition-duration: 1s; }

  /* ---------- The fixed consultation button ---------- */
  .anim .btn.m-cta, .btn.m-cta {
    display: flex; justify-content: center; position: fixed; z-index: 30;
    left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: 56px; font-size: 17px;
    box-shadow: 0 14px 30px -12px rgba(42, 29, 20, .6);
    transition: transform .4s var(--ease);
  }
  .btn.m-cta:not(.is-on) { transform: translateY(calc(100% + 40px)) !important; pointer-events: none; }

  /* ---------- FAQ ---------- */
  .faq-group { grid-template-columns: 1fr; gap: 6px; }
  .faq-group + .faq-group { margin-top: 44px; }
  .faq-group h3 { padding-top: 0; font-size: 32px; }
  .faq details { padding: 18px 0; }
  .faq summary { gap: 16px; padding: 0; font-size: 18px; }
  .faq details p { margin: 12px 0 4px; font-size: 17px; opacity: .85; }

  /* ---------- Final call to action ---------- */
  .plans { margin: 0 12px; }
  .plans-panel { border-radius: 0 24px 24px 24px; }
  .plans-text { padding: 30px 22px 28px; }
  .plans h2 { font-size: 36px; }
  .plans p { margin-bottom: 26px; font-size: 17px; opacity: .85; }
  .plans-text .btn { align-self: stretch; justify-content: center; min-height: 56px; font-size: 17px; }
  .plans-photo { height: 230px; }

  /* ---------- Bottom sheets ---------- */
  /* The university panel comes up from the bottom and nearly fills the screen; a swipe down
     from the top of it closes it (mobile.js). The little bar on top says it can be pulled. */
  dialog.drawer {
    inset: auto 0 0 0; width: 100vw; height: calc(100vh - 16px); height: calc(100dvh - 16px);
    border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px -24px rgba(42, 29, 20, .5);
  }
  dialog.drawer::before, .consult::before {
    content: ''; position: absolute; z-index: 6; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px;
    border-radius: 3px; background: rgba(246, 241, 232, .9); box-shadow: 0 1px 4px rgba(42, 29, 20, .3);
  }
  .consult::before { background: rgba(42, 29, 20, .2); box-shadow: none; }
  .anim dialog.drawer[open] { animation: m-sheet-in .5s var(--ease); }
  .anim dialog.drawer.is-closing { animation: m-sheet-out .32s cubic-bezier(.55, 0, .75, .2) forwards; }
  .drawer-bar { top: 18px; left: 14px; right: 14px; }
  .drawer-bar button { height: 48px; }
  .drawer-close { width: 48px; }
  .panel-photo { height: 240px; }
  .panel-head { padding: 26px 20px 0; }
  .panel-head h2 { font-size: 44px; }
  .panel-head .lead { font-size: 17px; opacity: .85; }
  .panel-sec { padding: 36px 20px 0; }
  .panel-sec > h3 { font-size: 13px; opacity: .75; }
  .benefits { grid-template-columns: 1fr; }
  .benefits li, .facts dd, .checks li { font-size: 17px; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .facts dt { opacity: .75; }
  .fields { margin: 0 -20px; }
  .panel-note { padding: 22px 20px 0; opacity: .75; }
  .panel-cta { padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); }
  .panel-cta .btn, .panel-explore { min-height: 56px; font-size: 17px; }

  /* The consultation form, the same way */
  dialog#consult {
    width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    border-radius: 24px 24px 0 0; overscroll-behavior: contain;
  }
  .anim dialog#consult[open] { animation: m-sheet-in .45s var(--ease); }
  .consult { padding: 34px 22px calc(24px + env(safe-area-inset-bottom)); }
  .consult-close { top: 12px; right: 10px; width: 48px; height: 48px; font-size: 34px; }
  .consult h3 { margin-top: 8px; font-size: 38px; }
  .consult > p, .consult form > p { margin-bottom: 22px; font-size: 17px; opacity: .85; }
  .field { margin-bottom: 18px; }
  .field span { font-size: 13px; opacity: .8; }
  .field input { padding: 12px 0; font-size: 18px; }
  .messengers { margin-bottom: 26px; }
  .messengers label span { padding: 15px 10px; font-size: 16px; }
  .consult .btn { min-height: 56px; font-size: 17px; }
  .phone-note { font-size: 15px; opacity: .8; }
}