/* ============================================================
   UPCOT — shared site styles
   Consolidated from the per-page inline <style> blocks.
   ============================================================ */

/* Material Symbols icons — default (outlined) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Filled icon variants used across pages */
.material-symbols-outlined.fill,
.material-symbols-outlined.filled,
.material-symbols-outlined[data-weight="fill"] {
  font-variation-settings: 'FILL' 1;
}

/* Typography fallbacks (headings use Montserrat, body uses Inter) */
body {
  font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* Decorative hero pattern */
.hero-pattern {
  background-color: #f9f9ff;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23002b5b' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Soft card shadow */
.soft-shadow {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

/* Frosted glass panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Form input focus state */
.form-input-focus:focus {
  border-color: #001736;
  border-width: 2px;
  outline: none;
  box-shadow: none;
}

/* Catalog filter chips (products.html) */
.filter-chip {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.filter-chip:not(.is-on):hover {
  background-color: #dee8ff;
  border-color: #b7c8e1;
}
.filter-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.filter-chip.is-on,
.filter-chip.is-on:hover {
  background-color: #001736;
  border-color: #001736;
  color: #ffffff;
}
.filter-chip.is-on span {
  color: #ffffff;
}
.filter-chip:focus-visible {
  outline: 2px solid #001736;
  outline-offset: 2px;
}
.filter-chip:has(input:focus-visible) {
  outline: 2px solid #001736;
  outline-offset: 2px;
}

/* Collapsible filter panel (products.html) */
#filter-panel summary .expand-icon {
  transition: transform 200ms ease;
}
#filter-panel[open] summary .expand-icon {
  transform: rotate(180deg);
}

/* Blueprint grid pattern */
.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(196, 198, 208, 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196, 198, 208, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Table of contents active link */
.toc-link.active {
  font-weight: 600;
  color: #001736;
  border-left-color: #001736;
}