/* ============================================
   Cream City Commercial Services — Local styles
   ============================================
   Most styling lives in Tailwind utilities applied
   directly in the HTML. This file holds the few
   rules that Tailwind doesn't cover well or that
   we want to centralize.
   ============================================ */

/* Smooth scroll for in-page anchor links */
html {
  scroll-behavior: smooth;
}

/* Better default font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Slight optical-size adjustment for Fraunces variable font.
   Larger optical sizes = more refined display proportions. */
.font-display {
  font-variation-settings: "opsz" 80;
}

/* Selection color — small touch of brand */
::selection {
  background: rgba(15, 45, 92, 0.2); /* cc-navy at 20% */
  color: #0F2D5C;
}

/* Focus visible on interactive elements that aren't already styled */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #B5562E; /* cc-brick */
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   Mobile menu — smooth open/close animation
   ============================================ */
@media (max-width: 767px) {
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, border-top-color 0.3s ease;
    border-top: 1px solid transparent;
  }
  #mobile-menu.is-open {
    max-height: 500px;
    border-top-color: rgba(15, 45, 92, 0.1);
  }
}

/* Hamburger icon crossfade */
#mobile-menu-icon-open,
#mobile-menu-icon-close {
  transition: opacity 0.2s ease;
}

/* ============================================
   FAQ animation is handled in script.js via
   JS-driven max-height + opacity transitions on
   the <details> children. See initFAQAccordion().
   ============================================ */