/* ═══════════════════════════════════════════════════════════════
   responsive.css — All breakpoints in one place
   WordlyCounter — Editor-first layout

   Breakpoints:
     xl:        ≥ 1920px  (ultra-wide)
     lg:        ≥ 1440px  (wide)
     md-down:   ≤ 1280px
     tablet:    ≤ 1024px
     mobile:    ≤  768px
     sm:        ≤  480px
     xs:        ≤  360px

   Special:
     touch:     hover:none + pointer:coarse
     landscape: ≤768px + landscape
     reduced:   prefers-reduced-motion
     contrast:  forced-colors
═══════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   1. LARGE DESKTOP  (≤ 1280px)
════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {

  .tool-container {
    grid-template-columns: 1fr 300px;
  }
}


/* ════════════════════════════════════════════════════════════
   2. TABLET  (≤ 1024px)
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Tool */
  .tool-container {
    grid-template-columns: 1fr 268px;
    gap: var(--space-4);
  }

  /* Editor height: recalculate for narrower sidebar */
  .main-editor {
    height: calc(100vh - var(--header-h) - 42px - 52px - var(--space-4));
    min-height: 280px;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-links {
    gap: var(--space-8);
  }

  /* Brand strip */
  .brand-strip-headline {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
  }
}


/* ════════════════════════════════════════════════════════════
   3. MOBILE  (≤ 768px)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header ───────────────────────────────────────────── */
  .header-nav    { display: none; }
  .header-inner  { gap: var(--space-3); }

  /* ── Tool layout: stack vertically ───────────────────── */
  .tool-section  { padding-top: var(--space-3); }

  .tool-container {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Editor: fixed viewport-aware height */
  .main-editor {
    height: 52vmax;
    min-height: 220px;
    max-height: 420px;
    resize: vertical;
    padding: var(--space-4) var(--space-4);
  }

  /* Stats panel: 2-col grid, not sticky */
  .stats-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* Keyword card: full width */
  .stats-panel .stats-card:last-child {
    grid-column: 1 / -1;
  }

  /* ── Brand strip (below-fold hero) ───────────────────── */
  .below-fold-hero {
    padding: clamp(32px, 6vw, 52px) 0 clamp(24px, 4vw, 40px);
  }

  .brand-strip-headline {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .brand-strip-sub {
    font-size: 0.9375rem;
  }

  /* Trust pills: 2-col grid */
  .brand-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 340px;
    margin-inline: auto;
    gap: var(--space-2);
  }

  .trust-pill {
    justify-content: center;
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  /* ── FAQ ──────────────────────────────────────────────── */
  .faq-grid { grid-template-columns: 1fr; }

  /* ── Footer ───────────────────────────────────────────── */
  .footer-links {
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .footer-bottom .container {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  /* ── Toast ────────────────────────────────────────────── */
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }

  .toast { max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   4. SMALL MOBILE  (≤ 480px)
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Tool ─────────────────────────────────────────────── */
  .tool-section { padding-top: var(--space-2); }

  .main-editor {
    height: 55vmax;
    min-height: 200px;
    padding: var(--space-3) var(--space-3);
    font-size: 0.9375rem;
  }

  /* Toolbar: icon-only mode */
  .editor-toolbar {
    padding: var(--space-2) var(--space-2);
    gap: 2px;
  }

  .toolbar-btn .btn-label,
  .file-upload-label .btn-label {
    display: none;
  }

  .toolbar-btn,
  .file-upload-label {
    padding: 5px 7px;
    min-width: 30px;
    justify-content: center;
  }

  /* Mini stats bar */
  .mini-stats-bar {
    padding: 8px var(--space-3);
    gap: var(--space-1);
    min-height: 46px;
  }

  .mini-stat-value  { font-size: 0.9375rem; }
  .mini-stat-label  { font-size: 0.5rem; }
  .mini-stat-divider { height: 22px; }

  /* Stats panel: single column */
  .stats-panel {
    grid-template-columns: 1fr;
  }

  .stats-panel .stats-card:last-child {
    grid-column: auto;
  }

  /* Stats card: tighter padding */
  .stats-card {
    padding: var(--space-3) var(--space-3);
  }

  .stat-value       { font-size: 0.875rem; }
  .stats-card-title { font-size: 0.625rem; }

  /* ── Brand strip ──────────────────────────────────────── */
  .below-fold-hero {
    padding: clamp(24px, 5vw, 40px) 0 clamp(20px, 4vw, 32px);
  }

  .brand-strip { gap: var(--space-4); }

  .brand-strip-eyebrow {
    font-size: 0.75rem;
    padding: 4px 12px;
  }

  .brand-strip-headline {
    font-size: clamp(1.5rem, 7vw, 1.875rem);
    letter-spacing: -0.025em;
  }

  .brand-strip-sub {
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .brand-trust-row {
    max-width: 100%;
  }

  .trust-pill {
    font-size: 0.6875rem;
    padding: 4px 8px;
  }

  /* ── Features ─────────────────────────────────────────── */
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: var(--space-4) var(--space-5);
  }

  /* ── FAQ ──────────────────────────────────────────────── */
  .faq-grid { grid-template-columns: 1fr; }

  .faq-item summary {
    font-size: 0.875rem;
    padding: var(--space-3) var(--space-4);
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  /* ── Confirm dialog ───────────────────────────────────── */
  .wc-confirm-box {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .wc-confirm-actions {
    flex-direction: column-reverse;
  }

  .wc-confirm-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ════════════════════════════════════════════════════════════
   5. EXTRA SMALL  (≤ 360px)
════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  :root {
    --container-padding: 12px;
  }

  .logo-text        { font-size: 0.9375rem; }

  .main-editor {
    height: 58vmax;
    min-height: 180px;
    font-size: 0.875rem;
  }

  .mini-stat-value  { font-size: 0.875rem; }
  .stat-value       { font-size: 0.8125rem; }
  .stats-card       { padding: var(--space-2) var(--space-3); }

  .brand-strip-headline {
    font-size: 1.375rem;
  }

  .brand-strip-sub  { font-size: 0.8125rem; }

  .trust-pill {
    font-size: 0.625rem;
    padding: 3px 7px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}


/* ════════════════════════════════════════════════════════════
   6. LANDSCAPE MOBILE  (≤ 768px + landscape)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {

  /* Tool: side-by-side again in landscape */
  .tool-container {
    grid-template-columns: 1fr 240px;
    gap: var(--space-3);
  }

  /* Editor: shorter in landscape */
  .main-editor {
    height: calc(100vh - var(--header-h) - 42px - 46px - var(--space-3));
    min-height: 160px;
    max-height: none;
    resize: none;
  }

  /* Stats panel: sticky again in landscape */
  .stats-panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    max-height: calc(100vh - var(--header-h) - var(--space-6));
    overflow-y: auto;
    gap: var(--space-2);
  }

  /* Stats card: compact */
  .stats-card {
    padding: var(--space-2) var(--space-3);
  }

  .stats-card-title { margin-bottom: var(--space-2); }

  .stat-row { padding: 4px 0; }

  /* Brand strip: tighter */
  .below-fold-hero {
    padding: var(--space-6) 0 var(--space-4);
  }

  .brand-strip-headline {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  .brand-trust-row {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-inline: auto;
  }
}


/* ════════════════════════════════════════════════════════════
   7. WIDE SCREENS  (≥ 1440px)
════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  :root {
    --container-max: 1360px;
  }

  .tool-container {
    grid-template-columns: 1fr 340px;
    gap: var(--space-8);
  }

  .main-editor {
    height: calc(100vh - var(--header-h) - 42px - 56px - var(--space-5));
    max-height: 760px;
  }

  .brand-strip-headline { font-size: 3.5rem; }
}


/* ════════════════════════════════════════════════════════════
   8. ULTRA-WIDE  (≥ 1920px)
════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {

  :root {
    --container-max: 1480px;
  }

  .tool-container {
    grid-template-columns: 1fr 360px;
    gap: var(--space-10);
  }

  .main-editor {
    max-height: 840px;
  }
}


/* ════════════════════════════════════════════════════════════
   9. TOUCH DEVICES  (no hover, coarse pointer)
════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Remove transform hover effects — they feel broken on touch */
  .feature-card:hover,
  .hero-cta-primary:hover,
  .hero-cta-secondary:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .trust-pill:hover {
    transform: none;
  }

  .feature-card:hover {
    box-shadow: none;
    border-color: var(--color-border);
    background: var(--color-bg);
  }

  /* Larger tap targets (WCAG 2.5.5 — 44×44px minimum) */
  .toolbar-btn,
  .file-upload-label {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }

  .header-nav a {
    padding: 10px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .faq-item summary {
    min-height: 52px;
    padding: var(--space-4);
  }

  .btn-theme-toggle {
    width: 44px;
    height: 44px;
  }

  /* Remove sticky stats panel on touch — scroll is natural */
  .stats-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}


/* ════════════════════════════════════════════════════════════
   10. REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  /* Specific overrides */
  .below-fold-hero::before  { display: none; }
  .brand-dot                { animation: none; opacity: 1; }
  .readability-fill         { transition: none; }
  .keyword-bar-fill         { transition: none; }
  .stat-value.animating     { animation: none; }
  .scroll-arrow             { animation: none; }
}


/* ════════════════════════════════════════════════════════════
   11. HIGH CONTRAST MODE  (Windows forced colors)
════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {

  .hero-cta-primary,
  .btn-primary,
  .btn-outline {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  .stats-card,
  .editor-panel,
  .feature-card,
  .trust-pill {
    border: 1px solid ButtonText;
  }

  .readability-fill,
  .keyword-bar-fill {
    background: Highlight;
    forced-color-adjust: none;
  }

  .badge,
  .brand-strip-eyebrow {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .mini-stat-value,
  .stat-value.primary {
    color: Highlight;
  }

  .autosave-indicator {
    color: ButtonText;
  }
}


/* ════════════════════════════════════════════════════════════
   12. PRINT
════════════════════════════════════════════════════════════ */
@media print {

  /* Hide non-essential UI */
  .site-header,
  .editor-toolbar,
  .mini-stats-bar,
  .below-fold-hero,
  .features-strip,
  .faq-section,
  .site-footer,
  .toast-container,
  #wc-confirm-overlay {
    display: none !important;
  }

  /* Single-column layout */
  .tool-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Stats panel: static, full width */
  .stats-panel {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stats-panel .stats-card:last-child {
    grid-column: 1 / -1;
  }

  /* Editor: show as readable text block */
  .main-editor {
    height: auto;
    min-height: 0;
    max-height: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    font-size: 11pt;
    line-height: 1.6;
  }

  /* Ensure colors print */
  .stat-value.primary { color: #3B4CCA !important; }
  .stat-value.accent  { color: #1E8A8A !important; }
}




/* ── Footer — Tablet (≤ 1024px) ────────────────────────────── */
@media (max-width: 1024px) {

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-links {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-brand-desc {
    max-width: 100%;
  }
}

/* ── Footer — Mobile (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer-bottom-links {
    gap: var(--space-2);
  }
}

/* ── Footer — Small Mobile (≤ 480px) ───────────────────────── */
@media (max-width: 480px) {

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .footer-trust-badges {
    gap: var(--space-1);
  }

  .footer-badge {
    font-size: 0.6875rem;
    padding: 3px 8px;
  }

  .footer-bottom-inner {
    align-items: center;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .footer-copyright {
    justify-content: center;
  }
}



/* ── About Page ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  .about-section {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .about-section-label { display: none; }

  .about-features-grid,
  .about-audience-grid {
    grid-template-columns: 1fr;
  }

  .about-stats-row {
    max-width: 100%;
  }

  .about-company-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {

  .about-hero-title  { font-size: 1.75rem; }
  .about-hero-sub    { font-size: 0.875rem; }

  .about-stat-value  { font-size: 1.125rem; }
  .about-stat-label  { font-size: 0.5625rem; }

  .about-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .about-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .about-principle {
    flex-direction: column;
    gap: var(--space-3);
  }
}