/* ============================================================
 * Frontend overrides — rules JSX can't replicate
 * ============================================================
 *
 * The static site relies on inline `style="color:white !important"` on the
 * ghost CTA inside `.section-dark` blocks to override the base
 * `.cta-btn.ghost { color: var(--ink-900) !important }` rule. React strips
 * `!important` from style-object literals, so the override never makes it
 * into the rendered DOM.
 *
 * These selectors achieve the same effect using descendant specificity, so
 * the ghost-CTA text remains visible on dark sections without changing any
 * inline JSX.
 *
 * Loaded after `assets/styles.css` in `app/layout.tsx`.
 */

.section-dark .cta-btn.ghost,
.section-dark .cta-btn.ghost.lg {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.section-dark .cta-btn.ghost:hover,
.section-dark .cta-btn.ghost.lg:hover {
  color: var(--ink-900) !important;
  background: var(--bg-soft);
  border-color: var(--bg-soft) !important;
}

/* ============================================================
 * Mobile responsive polish (Phase A)
 * ============================================================
 *
 * Layered on top of styles.css instead of forking it, so the
 * static design system stays diff-free for visual review.
 */

/* A2 — section vertical rhythm tightens on phones.
 * Base styles.css uses `section { padding: 110px 0 }` and
 * `.page-hero { padding: 100px 0 120px }` with no responsive
 * override, which leaves ~220px of whitespace between blocks
 * on a 360px viewport. */
@media (max-width: 700px) {
  section { padding: 64px 0; }
  section.tight { padding: 44px 0; }
  .page-hero { padding: 56px 0 64px; }
}

/* A3 — container side padding shrinks on small phones to give
 * tables, FAQ items and forms more breathing room. */
@media (max-width: 540px) {
  .container,
  .container-sm,
  .container-xs { padding: 0 20px; }
}

/* A4 — touch-target floor (WCAG 2.5.5 / Apple HIG = 44px).
 * `.cta-btn.sm` is the worst offender at ~30px tall. */
@media (max-width: 700px) {
  .cta-btn,
  .cta-btn.sm {
    min-height: 44px;
  }
  .cta-btn.sm {
    padding-block: 10px;
  }
}

/* A5 — honour prefers-reduced-motion. Kills the smooth scroll
 * and per-element transitions/animations for users who request
 * reduced motion at the OS level. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * Tablet / small-screen polish (Phase C)
 * ============================================================ */

/* C3 — hide the utility-bar email on tiny phones so the right
 * side doesn't wrap into a second line. Phone number stays. */
@media (max-width: 540px) {
  .utility-bar .util-right a[href^="mailto:"] {
    display: none;
  }
}

/* C4 — print stylesheet.
 *   - Hide chrome (header, footer, sticky FAB, in-page CTAs)
 *   - Drop background tints so ink doesn't burn through
 *   - Let containers run the full page width
 *   - Force a sensible base font size so long-form pages
 *     (privacy / terms / NDIS terms) print cleanly. */
@media print {
  .utility-bar,
  .site-header,
  .site-footer,
  .book-fab,
  .nav-toggle,
  .cta-strip,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .container,
  .container-sm,
  .container-xs {
    max-width: 100% !important;
    padding: 0 !important;
  }
  section {
    padding: 16pt 0 !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  /* Don't try to print hero treatment artwork — just keep the copy. */
  .page-hero {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 16pt !important;
  }
  .page-hero::before,
  .page-hero::after { display: none !important; }
  .page-hero h1 { color: #000 !important; }
}