/* ===================================================================
 * Max's Brand Theme — front-end stylesheet
 * --------------------------------------------------------------------
 * Most styling is driven by theme.json (colours, type, spacing).
 * This file adds:
 *   1. Cross-browser typography hygiene
 *   2. Sticky header behaviour
 *   3. Mobile CTA bar (sticky bottom)
 *   4. Hamburger nav for small screens
 *   5. Print stylesheet
 *
 * Heavily commented — anyone with light HTML/CSS knowledge can edit.
 * ================================================================ */

/* --- 1. Cross-browser hygiene --- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

/* Remove iOS tap highlight */
a, button, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}

/* Accessible focus ring (keyboard only) */
*:focus-visible {
  outline: 2px solid var(--wp--preset--color--brass, #B89968);
  outline-offset: 3px;
}
*:focus:not(:focus-visible) { outline: none; }

/* --- 2. Sticky header --- */
.wp-site-blocks > header,
header.maxs-header,
.maxs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@supports not (backdrop-filter: blur(8px)) {
  .maxs-header { background-color: #F5EBDA !important; }
}

/* Brand lockup (sprig + wordmark in header) */
.maxs-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.maxs-brand-lockup svg { flex-shrink: 0; }

/* The decorative sprig — used in hero patterns at larger sizes */
.maxs-sprig-large {
  margin-bottom: 1.5rem;
}

/* --- 3. Mobile CTA bar (sticky bottom) --- */
@media (max-width: 900px) {
  .maxs-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--wp--preset--color--forest, #1F3C2C);
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    gap: 0.5rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  }
  .maxs-mobile-cta a {
    flex: 1;
    text-align: center;
    padding: 0.9rem 0.5rem;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--lato, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .maxs-mobile-cta a[href^="tel:"] {
    background: var(--wp--preset--color--brass, #B89968);
    color: var(--wp--preset--color--forest-deep, #0D1F15);
  }
  .maxs-mobile-cta a[href^="#"] {
    background: var(--wp--preset--color--cream, #F5EBDA);
    color: var(--wp--preset--color--forest, #1F3C2C);
  }
  body { padding-bottom: 80px; }
}
@media (min-width: 901px) { .maxs-mobile-cta { display: none; } }

/* --- 4. Form input typography lift on mobile --- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select {
  font-size: 16px; /* prevents iOS zoom-on-focus */
  font-family: var(--wp--preset--font-family--source-serif, serif);
  padding: 0.8rem 1rem;
  border: 1px solid var(--wp--preset--color--brass, #B89968);
  background: var(--wp--preset--color--cream, #F5EBDA);
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}

/* --- 5. Print --- */
@media print {
  .maxs-mobile-cta,
  .maxs-header,
  .wp-block-navigation { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}