/*
 * CraftBook Custom Theme V1 — Accessibility Enhancements
 *
 * This file supplements the accessibility rules already embedded
 * throughout the component stylesheets. It handles:
 *
 * 1.  Focus ring system (keyboard-only, visible and high-contrast safe)
 * 2.  prefers-contrast: more — high contrast mode adjustments
 * 3.  prefers-reduced-motion — consolidated motion rules
 * 4.  Touch target enforcement (WCAG 2.5.5 — minimum 44×44px)
 * 5.  Print accessibility
 * 6.  Screen reader live region styles
 * 7.  Forced colours (Windows High Contrast Mode)
 * 8.  Text spacing overrides (WCAG 1.4.12)
 * 9.  Reflow support (WCAG 1.4.10 — 320px minimum)
 * 10. Kindle Fire specific refinements
 */


/* =============================================================================
   1. FOCUS RING SYSTEM
   Visible to keyboard users, invisible on mouse click.
   Uses :focus-visible — supported in all modern browsers.
   ============================================================================= */

/* Global focus ring — applied to anything keyboard-focusable */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus rings for specific interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* Box shadow as backup for browsers that clip outlines */
  box-shadow: 0 0 0 5px var(--color-focus-offset), 0 0 0 7px var(--color-focus);
}

/* Inputs need inset focus ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-focus) !important;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.25) !important;
}

/* Dark mode focus adjustments */
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible {
  box-shadow: 0 0 0 5px var(--color-background), 0 0 0 7px var(--color-focus);
}


/* =============================================================================
   2. HIGH CONTRAST MODE — prefers-contrast: more
   Increases contrast for users who need it without full forced-colours.
   ============================================================================= */

@media (prefers-contrast: more) {

  :root {
    --color-text:         #000000;
    --color-heading:      #000000;
    --color-text-light:   #1A1A2E;
    --color-meta:         #374151;
    --color-border:       #6B7280;
    --color-border-strong:#374151;
    --color-accent:       #1B4332;
    --color-link:         #1B4332;
    --color-background:   #FFFFFF;
    --color-background-subtle: #F3F4F6;
  }

  /* Increase border visibility */
  .card,
  .explore-card,
  .service-card,
  .about-section-card {
    border-width: 2px;
  }

  /* Ensure category labels have sufficient contrast */
  .category-label {
    font-weight: 700;
    text-decoration: underline;
  }

  /* Stronger link underlines */
  .entry-content a {
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  /* Card image zoom disabled — too distracting in high contrast */
  .card:hover .card__image-wrap img,
  .card:hover .post-thumbnail__img {
    transform: none;
  }

}


/* =============================================================================
   3. REDUCED MOTION — consolidated overrides
   All motion-related transitions and animations are collected here
   to complement the component-level @media blocks already in place.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  /* Disable ALL animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Specific overrides for elements that need functional (non-aesthetic) transitions */
  .mobile-menu {
    transition: none !important;
    /* Still needs to appear/disappear — handled by class toggle */
  }

  .search-overlay {
    transition: none !important;
  }

  /* Reading progress still works, just no animation */
  .reading-progress__bar {
    transition: none !important;
  }

  /* Card hovers still work, just no transform */
  .card:hover,
  .explore-card:hover,
  .service-card:hover,
  .about-section-card:hover,
  .post-navigation__link:hover {
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
  }

  /* Hero Ken Burns effect off */
  .home-hero:hover .home-hero__bg {
    transform: none !important;
  }

  /* Scroll line animation off */
  @keyframes scroll-line {
    0%, 100% { transform: none; opacity: 0.5; }
  }

}


/* =============================================================================
   4. TOUCH TARGET ENFORCEMENT (WCAG 2.5.5)
   All interactive elements must be at least 44×44px on touch devices.
   This catches any component that may have been missed.
   ============================================================================= */

@media (pointer: coarse) {

  /* Minimum touch target for all interactive elements */
  a,
  button,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exceptions for inline links within text — don't break line height */
  .entry-content a,
  .site-footer__nav-list a,
  p a {
    min-height: unset;
    min-width: unset;
    /* Expand tap area using padding without affecting layout */
    padding-block: 0.25em;
    margin-block: -0.25em;
  }

  /* Nav items — already 44px but reinforce */
  .site-nav__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Card titles — the ::after pseudo-element creates the tap area,
     which already covers the full card */
  .card__title-link {
    min-height: unset;
    min-width: unset;
  }

  /* Category labels as links */
  .category-label {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-1);
  }

  /* Social share buttons */
  .social-share__btn {
    min-height: 44px;
    padding-inline: var(--space-5);
  }

  /* Explore card links */
  .explore-card__link {
    min-height: 44px;
  }

}


/* =============================================================================
   5. SCREEN READER LIVE REGIONS
   For dynamic content updates (toast messages, form feedback, etc.)
   ============================================================================= */

/* Toast notifications — visually styled, accessible to screen readers */
.sr-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status message — shown visually after form submission */
.form-status-message {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: none;
}

.form-status-message.is-visible {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-status-message--success {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #6EE7B7;
}

.form-status-message--error {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}


/* =============================================================================
   6. FORCED COLOURS — Windows High Contrast Mode
   Ensures the theme is usable in Windows HC Mode where
   colours are replaced by system colours.
   ============================================================================= */

@media (forced-colors: active) {

  /* Restore visibility of decorative elements that use colour */
  .site-title a::before,
  .section-header__label,
  .home-hero__scroll-line,
  .explore-card::before,
  .about-section-card__accent,
  .reading-progress__bar {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  /* Ensure card borders are visible */
  .card,
  .explore-card,
  .service-card {
    border: 1px solid ButtonText;
  }

  /* Button text must be readable */
  .btn,
  button {
    forced-color-adjust: none;
    background-color: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
  }

  .btn--accent,
  #wp-submit {
    background-color: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  /* Links must use system link colour */
  a {
    color: LinkText;
  }

  a:visited {
    color: VisitedText;
  }

  /* Focus ring — system-managed in forced colours */
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }

  /* Category labels */
  .category-label {
    color: Highlight;
    border: 1px solid Highlight;
    padding: 2px 6px;
    border-radius: 99px;
  }

  /* Dark mode toggle icons */
  .header-btn__icon {
    forced-color-adjust: none;
    color: ButtonText;
  }

  /* Input focus */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none !important;
  }

}


/* =============================================================================
   7. TEXT SPACING OVERRIDE SUPPORT (WCAG 1.4.12)
   When users override text spacing via browser tools or user stylesheets,
   the layout must not break. This ensures containers don't have
   fixed heights that would clip overflowing text.
   ============================================================================= */

/* Never use fixed heights on text containers */
.card__title,
.card__excerpt,
.post-meta,
.category-label,
.site-title,
.archive-header__title,
.single-hero__title,
.page-header__title,
.about-author__name,
.work-hero__title {
  /* height: auto — already the default, but explicit for clarity */
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Ensure card bodies can expand with user text spacing */
.card__body {
  overflow: visible;
  /* Remove any max-height that would clip */
  max-height: none;
}

/* Hero sections use min-height, not fixed height */
.home-hero {
  height: auto;
}

.single-hero--image {
  height: auto;
}


/* =============================================================================
   8. REFLOW SUPPORT (WCAG 1.4.10 — 320px minimum width)
   The site must be usable at 320px viewport width (representing
   400% browser zoom on a 1280px display).
   ============================================================================= */

@media (max-width: 320px) {

  /* Stack all grids */
  .grid--2,
  .grid--3,
  .grid--4,
  .home-featured__grid,
  .home-explore__grid,
  .work-services__grid,
  .about-sections__grid,
  .newsletter-hero__inner,
  .site-footer__nav-columns,
  .site-footer__top-inner {
    grid-template-columns: 1fr !important;
  }

  /* Reduce container padding */
  .container {
    padding-inline: var(--space-3) !important;
  }

  /* Reduce section padding */
  .section { padding-block: var(--space-8) !important; }
  .section--sm { padding-block: var(--space-6) !important; }

  /* Stack button groups */
  .home-hero__content,
  .home-about__actions,
  .work-hero__cta,
  .work-contact__actions,
  .about-author__links {
    flex-direction: column;
    align-items: stretch;
  }

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

  /* Hero font scaling */
  .home-hero__title,
  .single-hero__title,
  .page-header__title,
  .archive-header__title {
    font-size: var(--text-2xl) !important;
  }

  /* Mobile menu full width */
  .mobile-menu {
    width: 100% !important;
  }

  /* Post meta — stack */
  .post-meta {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Author bio — stack */
  .author-bio {
    flex-direction: column;
  }

  /* Social share — stack */
  .social-share {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* =============================================================================
   9. KINDLE FIRE SPECIFIC REFINEMENTS
   Kindle Fire HD (1920×1200) — Chrome WebView-based, touch-first.
   Kindle Fire HDX (2560×1600) — high-DPI touch screen.
   Identified via touch pointer + tablet viewport.
   ============================================================================= */

/* Kindle Fire HD 8/10 — 800px and 1280px viewport widths in landscape/portrait */
@media (max-width: 1024px) and (pointer: coarse) and (min-width: 600px) {

  /* Increase font size slightly for comfortable reading distance */
  :root {
    --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  }

  /* Larger tap targets */
  .site-nav__link,
  .header-btn,
  .mobile-menu__list .menu-item a {
    min-height: 48px;
  }

  /* Wider card spacing for touch navigation */
  .grid--3 {
    gap: var(--space-5);
  }

  /* Ensure the mobile menu is always shown on Kindle (navigation collapsed) */
  .site-nav--primary {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  /* Remove hover-based dropdowns — touch devices can't hover */
  .site-nav__dropdown {
    display: none !important;
  }

  /* Increase input sizes for touch */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  textarea {
    font-size: 16px; /* Prevents iOS/Android zoom on focus */
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  /* Search overlay input */
  .search-overlay__input {
    font-size: 16px;
    min-height: 52px;
  }

  /* Explore cards — 2 per row on Kindle landscape */
  .home-explore__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Back to top button — larger for touch */
  .back-to-top {
    width: 56px;
    height: 56px;
  }

}

/* Kindle Fire portrait mode — narrower columns */
@media (max-width: 800px) and (pointer: coarse) {

  .home-featured__grid {
    grid-template-columns: 1fr;
  }

  .home-featured__secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

}


/* =============================================================================
   10. DARK MODE — ACCESSIBILITY REFINEMENTS
   Ensure dark mode has sufficient contrast ratios for all text.
   ============================================================================= */

[data-theme="dark"],
@media (prefers-color-scheme: dark) {

  /* Minimum contrast ratios maintained:
     --color-text on --color-background: 15.3:1 ✓
     --color-accent on --color-background: 4.5:1+ ✓
     --color-meta on --color-background: 4.6:1 ✓ */

  /* Category label colours adjusted for dark mode legibility */
  .category-label--technology { color: #60A5FA; }
  .category-label--business   { color: #A78BFA; }
  .category-label--creativity { color: #FCD34D; }
  .category-label--society    { color: #F472B6; }

  /* Hero gradient adjusted for dark backgrounds */
  .home-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.2)  70%,
      transparent 100%
    );
  }

}


/* =============================================================================
   11. PRINT — EXTENDED ACCESSIBILITY
   Ensures printed output is accessible for sighted users.
   ============================================================================= */

@media print {

  /* Ensure sufficient contrast in print */
  body {
    color: #000000 !important;
    background: #FFFFFF !important;
  }

  /* Show link destinations */
  .entry-content a[href^="http"]::after {
    content: " [" attr(href) "]";
    font-size: 0.8em;
    color: #555;
    word-break: break-all;
  }

  /* Don't show URL for short/internal anchors */
  a[href^="#"]::after,
  a[href^="/"]::after {
    content: none !important;
  }

  /* Page breaks */
  h2, h3 { page-break-after: avoid; }
  figure, blockquote, table, pre { page-break-inside: avoid; }

  /* Hide interactive elements */
  .social-share,
  .post-navigation,
  .related-posts,
  .comments-section,
  .home-newsletter,
  .back-to-top {
    display: none !important;
  }

}