/* ai·campus - app-lag til telefon og tablet.
   Indlæses efter mobile-polish.css. Handler om følelsen: ingen zoom-hop,
   ingen grå blink ved tryk, respekt for hak og hjemme-indikator, og en
   installeret version der ikke opfører sig som en browserfane. */

/* ------------------------------------------------------------- basis --- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;                 /* clip, ikke hidden - brækker ikke sticky */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: rgba(178, 63, 30, .18); }

/* Fuld højde der ikke hopper når adresselinjen i mobil-Safari glider væk. */
@supports (height: 100dvh) {
  .u-fullheight { min-height: 100dvh; }
}

/* --------------------------------------------------- tryk og berøring --- */

a, button, summary, [role="button"], .nav-toggle, input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* Når det grå systemblink fjernes, skal der komme noget i stedet -
   ellers føles knapperne døde. */
@media (hover: none) and (pointer: coarse) {
  a:active,
  button:active,
  [role="button"]:active,
  .card:active,
  .nav-toggle:active {
    opacity: .68;
    transition: opacity .06s ease;
  }

  /* Ingen hover-effekter der hænger fast efter et tryk på touch. */
  a:hover, button:hover { transform: none !important; }

  /* Mindste ramme man kan ramme med en tommel.
     .brand holdes udenfor - den er en flex-kolonne med bjælken over
     ordmærket, og align-items her ville skubbe bjælken på plads midt. */
  .nav-links a,
  .mobile-menu a,
  .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Navigation og knapper skal ikke kunne markeres som tekst - det er den
   detalje der mest af alt afslører en hjemmeside forklædt som app. */
.nav, .mobile-menu, .nav-toggle, button, .brand {
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------ iOS zoom på felter --- */
/* Safari zoomer ind når et felt har skrift under 16px. Det er den
   enkeltstående største kilde til "hjemmeside-følelse" i formularer. */

@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }

  .aic-auth input.aic-otp { font-size: 22px; }
}

/* --------------------------------------------------------- sikre zoner --- */
/* Hak, afrundede hjørner og hjemme-indikator. Kræver viewport-fit=cover.
   Insets lægges på body — .nav, header og footer har deres egen padding
   (fx clamp(20px,4vw,56px)), som aldrig må overskrives med et fast tal. */

@media (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* position:fixed følger ikke body's padding, så overlays klares for sig.
   max() bevarer elementets egen afstand, når der ikke er noget hak. */
.mobile-menu {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* --------------------------------------------------- installeret app --- */

html.is-standalone body {
  /* Ingen elastisk gummi-effekt i toppen; indre scroll virker stadig. */
  overscroll-behavior-y: none;
  /* Plads til hjemme-indikatoren nederst. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Ting der kun giver mening i en browser. */
html.is-standalone [data-browser-only] { display: none !important; }

/* ------------------------------------------------------------ tablet --- */
/* Siderne falder til én kolonne allerede ved 980px, så en iPad i portræt
   (768-834px) får telefonlayoutet med enorme tomme marginer. Her giver vi
   pladsen tilbage: to kolonner kort, og luft der passer til skærmen. */

@media (min-width: 601px) and (max-width: 980px) {
  .learn-grid,
  .lessons-grid,
  .related-grid,
  .tools-grid,
  .ebook-grid,
  .job-grid,
  .pricing-grid,
  .package-grid,
  .premium-grid,
  .principles-grid,
  .brief-compare,
  .grid-3,
  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  /* Kode og sammenligninger af tekstblokke skal blive i én kolonne -
     to smalle spalter gør dem ulæselige. */
  .code-compare,
  .code-compare.three {
    grid-template-columns: 1fr !important;
  }

  /* Mere luft i kanten end på telefon, mindre end på desktop. */
  section,
  .cta-section,
  .related,
  .learn-inner,
  .breadcrumb,
  footer {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  .hero {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  /* Brødtekst bliver ulæselig når den får hele iPad-bredden. */
  .hero-sub,
  .section-intro,
  .lead {
    max-width: 62ch;
  }

  .hero h1 { text-wrap: balance; }

  /* Fodnoten har plads til at stå på række igen. */
  footer {
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* iPad i landscape (1024px) rammer desktoplayoutet, som allerede har
   rigelige trykflader i navigationen - der skal intet ændres. */

/* Vandret scroll i kort-rækker skal snappe som i en app. */
.scroll-row,
[data-scroll-row] {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar,
[data-scroll-row]::-webkit-scrollbar { display: none; }

.scroll-row > *,
[data-scroll-row] > * { scroll-snap-align: start; }

/* --------------------------------------------------- sideovergange --- */
/* Det tydeligste tegn på "hjemmeside" er det hvide blink mellem sider.
   Cross-document view transitions toner i stedet over. Browsere uden
   understøttelse ignorerer blokken helt. */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .22s; }

/* Ingen hvid flash mens den næste side maler op. */
html { background: #F8F4EA; }

/* ---------------------------------------------- berøringsdetaljer --- */

/* Fjerner 300ms-forsinkelsen fra dobbelttryk-zoom på knapper og links. */
a, button, summary, [role="button"], .nav-toggle, label { touch-action: manipulation; }

/* Langt tryk på et link åbner iOS' del-menu. I navigationen afslører det
   med det samme, at man står i en browser. Brødteksten rører vi ikke. */
.nav a, .mobile-menu a, .brand, .nav-toggle, button {
  -webkit-touch-callout: none;
}

/* Tastaturfokus skal stadig være synligt - også når musetryk ikke er det. */
:focus-visible {
  outline: 2px solid #B23F1E;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ scroll --- */

html { scroll-behavior: smooth; }

/* Ankre lander ikke under den faste top. */
:target { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }

  /* Ingen overtoning for dem der har slået bevægelse fra. */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}