/*
 * La Darija — responsive hardening
 * Version 1.0.0 — 24 août 2026
 * Loaded after the existing theme styles. It fixes edge cases without
 * changing the visual identity of the website.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

:where(img, svg, video, canvas, iframe, audio) {
  max-width: 100%;
}

:where(img, video, iframe) {
  height: auto;
}

:where(audio) {
  width: 100%;
}

:where(
  main, section, article, aside, header, footer, nav, form, fieldset,
  .shell, .guide-shell, .coming-shell,
  .hero-grid, .method-grid, .auth-shell, .contact-grid, .trust-layout,
  .lesson-hero-inner, .detail-grid, .dashboard-grid, .content-editor-grid,
  .product-hero, .store-grid, .related-grid, .media-library,
  .pronunciation-card, .correction-card, .member-row,
  .ad-studio-hero, .ad-readiness-grid, .ad-inventory-grid,
  .ad-policy-grid, .ad-campaign-row, .footer-grid,
  .coming-main, .coming-features, .guide-spotlight, .download-options,
  .guide-hero, .download-grid, .word-grid, .video-grid
) > * {
  min-width: 0;
}

:where(
  main h1, main h2, main h3, main h4,
  main p, main li, main label, main strong, main small,
  .site-footer p, .site-footer a,
  .coming-soon-body h1, .coming-soon-body h2,
  .coming-soon-body h3, .coming-soon-body p,
  .coming-soon-body strong, .coming-soon-body small,
  .guide-footer p, .guide-footer a,
  .global-search-dialog,
  td, th, code
) {
  overflow-wrap: anywhere;
}

:where(button, input, select, textarea) {
  max-width: 100%;
}

:where(.admin-table-wrap, .trust-table-wrap, .article-table-wrap, .ad-studio-nav) {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

:where(pre, code) {
  white-space: pre-wrap;
  word-break: break-word;
}

:where(.button, .coming-button, .primary-button, .download-option) {
  text-align: center;
}

.global-search-button {
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
}

.global-search-dialog {
  max-height: min(720px, calc(100vh - 100px));
}

@supports (height: 100dvh) {
  .global-search-dialog {
    max-height: min(720px, calc(100dvh - 40px));
  }
}

@media (pointer: coarse) {
  :where(
    button, input[type="button"], input[type="submit"], input[type="reset"],
    .button, .audio-button, .coming-button, .primary-button,
    .download-option, .global-search-close
  ) {
    min-height: 44px;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
  }
}

/* Comfortable tablet layouts: content changes to one column before it gets cramped. */
@media (max-width: 960px) {
  :where(
    .auth-shell, .contact-grid, .trust-layout, .dashboard-grid,
    .detail-grid, .lesson-hero-inner, .product-hero,
    .pronunciation-card, .correction-card, .member-row
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-gallery {
    position: static;
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .trust-nav {
    position: static;
  }
}

@media (max-width: 768px) {
  :where(.section-heading, .admin-heading, .panel-heading, .ad-section-heading) {
    min-width: 0;
  }

  :where(.breadcrumbs, .tag-row, .product-price, .flashcard-toolbar, .hero-actions) {
    flex-wrap: wrap;
  }

  .global-search {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .global-search-dialog {
    width: 100%;
  }

  .admin-table {
    min-width: 720px;
  }

  .trust-content table,
  .article-content table {
    min-width: 600px;
  }

  .member-access-form {
    flex-wrap: wrap;
  }

  .member-access-form > label {
    flex: 1 1 100%;
    min-width: 0;
  }

  .ad-campaign-main,
  .ad-campaign-actions,
  .ad-campaign-metrics {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .global-search-button {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  :where(.audio-button-labelled, .audio-button-large) {
    max-width: 100%;
    white-space: normal;
  }

  :where(.table-actions, .admin-heading-actions, .ad-campaign-actions) {
    flex-wrap: wrap;
    white-space: normal;
  }

  :where(.dialogue-play-all, .recorder-actions .button, .form-actions .button) {
    white-space: normal;
  }

  .coming-soon-body .preview-ribbon {
    width: min(100% - 24px, 520px);
    text-align: center;
  }

  .coming-soon-body .download-option,
  .coming-soon-body .guide-details-link {
    overflow-wrap: anywhere;
  }

  .guide-header,
  .coming-header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .guide-header nav,
  .coming-actions {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .shell,
  .guide-shell,
  .coming-shell {
    width: min(100% - 24px, 1160px);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .footer-grid > div:first-child {
    grid-column: auto;
  }

  .footer-grid > div:not(:first-child) {
    min-width: 0;
  }

  .global-search {
    place-items: start stretch;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .global-search-dialog {
    padding: 16px;
    border-radius: 16px;
  }

  .global-search-heading {
    gap: 10px;
  }

  .global-search-result {
    grid-template-columns: minmax(0, 1fr);
  }

  .global-search-result small {
    grid-column: auto;
  }

  .global-search-letters button {
    width: 36px;
    height: 36px;
  }

  :where(.form-actions, .admin-heading-actions, .ad-form-footer, .ad-save-bar) {
    align-items: stretch;
    flex-direction: column;
  }

  :where(
    .form-actions .button, .admin-heading-actions .button,
    .ad-form-footer .button, .ad-save-bar .button,
    .coming-button, .primary-button
  ) {
    width: 100%;
    white-space: normal;
  }

  .audio-compare > div,
  .article-audio-card,
  .correction-audios {
    align-items: stretch;
    flex-direction: column;
  }

  .correction-audios :where(.audio-button-labelled, .audio-button-large),
  .audio-compare :where(.audio-button-labelled, .audio-button-large) {
    width: 100%;
  }

  .coming-copy h1 {
    font-size: clamp(2.45rem, 14vw, 3.4rem);
    line-height: 1;
  }

  .coming-copy h1 br,
  .preview-card h2 br {
    display: none;
  }

  .coming-visual {
    min-height: 390px;
  }

  .preview-card-main {
    width: calc(100% - 22px);
    padding: 1.15rem;
  }

  .preview-card-note {
    width: calc(100% - 48px);
    padding: .85rem;
  }

  .guide-spotlight-copy h2,
  .hero-copy h1 {
    font-size: clamp(2.25rem, 12vw, 3.1rem);
    overflow-wrap: anywhere;
  }

  .guide-header .guide-brand div {
    display: none;
  }

  .guide-header nav {
    gap: .65rem;
  }

  .guide-header nav a {
    font-size: .7rem;
  }

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

  .download-icon {
    width: 50px;
    height: 50px;
  }

  .download-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .download-option > b {
    display: none;
  }

  .guide-footer .guide-shell,
  .coming-footer {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .coming-header {
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    min-height: 0;
    padding-block: 1rem;
  }

  .opening-pill {
    max-width: 100%;
  }

  .brand-mark,
  .guide-brand > span,
  .coming-brand-mark {
    flex: 0 0 auto;
  }

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

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

  .ad-campaign-row > img,
  .ad-campaign-placeholder,
  .ad-campaign-main,
  .ad-campaign-metrics,
  .ad-campaign-actions {
    grid-column: 1;
  }

  .ad-campaign-actions {
    grid-row: auto;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .global-search {
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .global-search-dialog {
    max-height: calc(100vh - 16px);
  }

  @supports (height: 100dvh) {
    .global-search-dialog { max-height: calc(100dvh - 16px); }
  }

  .coming-main,
  .guide-hero {
    padding-block: 2.5rem;
  }
}

@media print {
  .site-header,
  .site-footer,
  .global-search-button,
  .global-search,
  .guide-header,
  .guide-footer,
  .coming-header,
  .coming-footer,
  .preview-ribbon,
  .ad-studio-nav {
    display: none !important;
  }

  body {
    overflow: visible;
    color: #000;
    background: #fff;
  }

  :where(.shell, .guide-shell, .coming-shell) {
    width: 100%;
    max-width: none;
  }
}