/*
 * CraftBook Custom Theme V1 — Cross-Browser Refinements
 *
 * Browser-specific fixes applied with feature detection where possible.
 * Preference is always to use standard CSS; browser hacks are a last resort.
 *
 * Browsers tested against:
 * - Chrome 120+ (desktop + Android)
 * - Firefox 121+ (desktop)
 * - Safari 17+ (macOS + iOS)
 * - Edge 120+ (desktop + Windows)
 * - Samsung Internet 23+ (Android)
 * - Kindle Fire Silk Browser (Chrome-based WebView)
 *
 * 1.  Safari — backdrop-filter fallback
 * 2.  Safari — smooth scrolling + rubber-band scroll
 * 3.  Safari — date input styling
 * 4.  Firefox — scrollbar styling
 * 5.  Webkit — input appearance resets
 * 6.  All — gap property fallback for older Safari (flex)
 * 7.  All — dvh unit fallback
 * 8.  All — clamp() fallback for very old browsers
 * 9.  All — :focus-visible fallback
 * 10. All — aspect-ratio fallback
 */


/* =============================================================================
   1. SAFARI — backdrop-filter fallback
   Safari supports backdrop-filter but requires -webkit- prefix below iOS 15.4.
   We already include -webkit- in the component CSS; this adds a background
   fallback for browsers that don't support it at all.
   ============================================================================= */

/* If backdrop-filter is not supported, use a more opaque background */
@supports not (backdrop-filter: blur(4px)) {

  .search-overlay {
    background-color: rgba(15, 17, 24, 0.96);
  }

  .mobile-menu {
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.3);
  }

  .card__category-badge .category-label {
    background-color: rgba(15, 17, 24, 0.88);
  }

}


/* =============================================================================
   2. SAFARI — momentum scroll inside mobile menu
   Safari requires -webkit-overflow-scrolling for smooth momentum scrolling.
   ============================================================================= */

.mobile-menu {
  -webkit-overflow-scrolling: touch;
}

/* Safari overscroll colour — matches theme background */
@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
  html {
    background-color: var(--color-background);
  }
}


/* =============================================================================
   3. WEBKIT — Input and select appearance resets
   Required for consistent styling across Chrome, Safari and Edge.
   ============================================================================= */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Remove autofill background in Chrome/Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* Use box-shadow to override background — most reliable technique */
  -webkit-box-shadow: 0 0 0px 1000px var(--color-background-alt) inset !important;
  box-shadow: 0 0 0px 1000px var(--color-background-alt) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
}

/* Dark mode autofill */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-background-alt) inset !important;
  box-shadow: 0 0 0px 1000px var(--color-background-alt) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Fix textarea resize handle in Safari */
textarea {
  resize: vertical;
}


/* =============================================================================
   4. FIREFOX — Scrollbar styling
   Firefox supports scrollbar-color and scrollbar-width.
   Makes scrollbars match the theme on Firefox desktop.
   ============================================================================= */

@supports (scrollbar-color: auto) {

  * {
    scrollbar-color: var(--color-border-strong) var(--color-background-subtle);
    scrollbar-width: thin;
  }

  [data-theme="dark"] * {
    scrollbar-color: var(--color-border-strong) var(--color-background-subtle);
  }

}

/* WebKit scrollbar styling for Chrome and Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-subtle);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background-subtle);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-meta);
}

/* Mobile menu scrollbar — thinner */
.mobile-menu::-webkit-scrollbar {
  width: 4px;
}


/* =============================================================================
   5. ALL — dvh / svh / lvh unit fallback
   The theme uses 100dvh for full-height elements (mobile menu, search overlay).
   Fallback to 100vh for browsers that don't support dvh.
   ============================================================================= */

/* dvh is already used with a vh fallback in the component CSS:
   height: 100vh;
   height: 100dvh;
   This file documents the pattern but doesn't need to repeat it. */


/* =============================================================================
   6. ALL — aspect-ratio fallback
   For browsers that don't support aspect-ratio (Safari < 15, IE).
   The card image wrappers use aspect-ratio for layout stability.
   ============================================================================= */

@supports not (aspect-ratio: 16 / 9) {

  /* Padding-top technique for aspect ratios */
  .ratio-16x9 {
    aspect-ratio: unset;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
  }

  .ratio-3x2 {
    aspect-ratio: unset;
    position: relative;
    padding-top: 66.67%;
    overflow: hidden;
  }

  .ratio-4x3 {
    aspect-ratio: unset;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
  }

  .ratio-21x9 {
    aspect-ratio: unset;
    position: relative;
    padding-top: 42.86%;
    overflow: hidden;
  }

  .ratio-16x9 > *,
  .ratio-3x2 > *,
  .ratio-4x3 > *,
  .ratio-21x9 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

}


/* =============================================================================
   7. ALL — gap fallback for flex containers (Safari < 14.1)
   Safari < 14.1 doesn't support gap in flex layouts (only in grid).
   Most users are on modern Safari, but this is a safe fallback.
   ============================================================================= */

@supports not (gap: 1rem) {

  /* Use margin-based spacing as fallback */
  .site-nav__menu > * + * {
    margin-left: var(--space-1);
  }

  .home-hero__content > * + * {
    margin-top: var(--space-5);
  }

  .post-meta > * + * {
    margin-left: var(--space-2);
  }

}


/* =============================================================================
   8. SAFARI iOS — Prevent font size inflation on rotation
   Already handled by text-size-adjust: 100% in style.css reset,
   but -webkit- prefix is required for older iOS versions.
   ============================================================================= */

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


/* =============================================================================
   9. ALL — smooth scroll behaviour
   CSS scroll-behavior is widely supported but motion-sensitive.
   Already handled in style.css reset with prefers-reduced-motion
   override. This reinforces it.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* =============================================================================
   10. SAMSUNG INTERNET — Icon rendering
   Samsung Internet (Android) occasionally renders SVG icons slightly
   differently. Explicit width/height attributes in the SVG files handle
   this, but a CSS reinforcement helps.
   ============================================================================= */

.icon,
.header-btn__icon,
.explore-card__icon svg,
.service-card__icon svg {
  flex-shrink: 0;
  display: block;
}


/* =============================================================================
   11. EDGE LEGACY — CSS custom property fallbacks
   Edge Legacy (pre-Chromium, < Edge 79) doesn't support CSS custom
   properties. It is vanishingly rare but we provide hard-coded fallbacks
   for critical colour values as a belt-and-braces measure.
   ============================================================================= */

/* These rules use standard property before the var() version.
   Modern browsers use the var(); Edge Legacy uses the first value. */

body {
  background-color: #F8F7F4; /* Fallback */
  background-color: var(--color-background);
  color: #1A1A2E; /* Fallback */
  color: var(--color-text);
}

a {
  color: #2D6A4F; /* Fallback */
  color: var(--color-link);
}

.btn--accent {
  background-color: #2D6A4F; /* Fallback */
  background-color: var(--color-accent);
  color: #FFFFFF;
}


/* =============================================================================
   12. PRINT — Cross-browser print normalisation
   Supplements print.css with browser-specific print fixes.
   ============================================================================= */

@media print {

  /* Webkit-specific print fix — force black text */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Avoid Firefox printing background colours unintentionally */
  .home-hero,
  .home-newsletter,
  .newsletter-hero {
    background: none !important;
    color: #000000 !important;
  }

}