/* ============================================================
   ACPN Global Styles — Design System Foundation
   American Center for Psychiatry & Neurology

   DESIGN REVIEW & UPGRADE — v2.0
   Upgraded: spacing rhythm, shadows, transitions, accessibility,
   focus states, animations, form polish, reduced motion support.
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Primary palette — extracted from ACPN2 */
  --color-primary:        #233F48;
  --color-primary-dark:   #203A42;
  --color-primary-darker: #1A2F36;
  --color-primary-deepest:#14242A;

  /* Mint / Sage accent */
  --color-mint:           #CEECDF;
  --color-mint-light:     #E8F7EF;
  --color-mint-lighter:   #F4FBF7;
  --color-sage:           #D6E0D3;

  /* Neutrals */
  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #EEEFF3;
  --color-bg-lighter:     #FAFAFA;
  --color-text-primary:   #4A4A4A;
  --color-text-heading:   #233F48;
  --color-text-light:     #FFFFFF;
  --color-border:         #D4D4D4;
  --color-border-light:   #E8E8E8;

  /* Typography */
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Open Sans', system-ui, sans-serif;
  --font-arabic:          'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Open Sans', system-ui, sans-serif;

  /* Spacing Scale — 8px rhythm */
  --section-py-mobile:    56px;
  --section-py-tablet:    72px;
  --section-py-desktop:   96px;
  --container-px-mobile:  20px;
  --container-px-tablet:  40px;
  --container-px-desktop: 60px;

  /* Elevation / Shadow Scale */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:    0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(206, 236, 223, 0.6);

  /* Transitions — ease-out for enters, ease-in for exits */
  --ease-out:     cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:    180ms var(--ease-out);
  --transition-normal:  280ms var(--ease-out);
  --transition-slow:    400ms var(--ease-out);

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;
}

/* ---------- Base Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Selection */
::selection {
  background-color: var(--color-mint);
  color: var(--color-primary);
}

/* Skip to content — accessibility */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 12px 24px;
  background: var(--color-primary);
  color: var(--color-bg-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
}

/* ---------- RTL / Arabic Override ---------- */
[dir="rtl"] body {
  font-family: var(--font-arabic);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-arabic);
}

/* ---------- RTL / Arabic — Comprehensive Overrides ---------- */

/* ---- Typography ---- */
[dir="rtl"] body {
  font-size: 16px;
  line-height: 1.8;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  letter-spacing: 0;
}

[dir="rtl"] .section-label {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

[dir="rtl"] .font-display {
  font-family: var(--font-arabic);
}

/* ---- Directional Icon Flipping ---- */
[dir="rtl"] .arrow-icon,
[dir="rtl"] .chevron-icon,
[dir="rtl"] .breadcrumb-separator svg {
  transform: scaleX(-1);
}

/* ---- Dropdown Menus ---- */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* ---- Breadcrumbs ---- */
[dir="rtl"] .breadcrumb {
  direction: rtl;
}

/* ---- Bidirectional Isolation ---- */
[dir="rtl"] .bidi-isolate {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Phone numbers, emails, URLs inside Arabic text */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  unicode-bidi: isolate;
}

/* ---- Form Overrides ---- */
[dir="rtl"] .form-input,
[dir="rtl"] .form-textarea {
  font-family: var(--font-arabic);
  text-align: right;
}

[dir="rtl"] .form-input::placeholder,
[dir="rtl"] .form-textarea::placeholder {
  text-align: right;
}

[dir="rtl"] .form-label {
  font-family: var(--font-arabic);
  text-align: right;
}

[dir="rtl"] .form-error {
  text-align: right;
}

/* ---- Section Label — Arabic ---- */
[dir="rtl"] .section-description {
  font-family: var(--font-arabic);
}

/* ---- Button Overrides ---- */
[dir="rtl"] .btn {
  font-family: var(--font-arabic);
}

/* Flip arrow inside buttons for RTL */
[dir="rtl"] .btn svg.arrow-icon {
  transform: scaleX(-1);
}

/* ---- Footer Chevron Flip ---- */
[dir="rtl"] .group:hover svg[class*="translate-x"] {
  --tw-translate-x: -0.125rem;
}

/* ---- Scroll Animations — Flip horizontal slides ---- */
@keyframes slideInRight-rtl {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft-rtl {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Skip to Content — RTL ---- */
[dir="rtl"] .skip-to-content {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}

/* ---- Print Styles — RTL font ---- */
@media print {
  [dir="rtl"] body {
    font-family: var(--font-arabic);
  }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
h4 { font-size: 1.125rem; line-height: 1.4; font-weight: 600; }

@media (min-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.5rem; }
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Focus Visible — Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Layout Utilities ---------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--container-px-mobile);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--container-px-tablet); }
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--container-px-desktop); }
}

.section {
  padding: var(--section-py-mobile) 0;
}

@media (min-width: 768px) {
  .section { padding: var(--section-py-tablet) 0; }
}

@media (min-width: 1024px) {
  .section { padding: var(--section-py-desktop) 0; }
}

/* ---------- Section Label Pattern (from ACPN2) ---------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 14px;
  padding: 6px 18px;
  background-color: var(--color-mint);
  border-radius: var(--radius-full);
}

.section-heading {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  margin-bottom: 16px;
}

.section-description {
  color: var(--color-text-primary);
  max-width: 680px;
  font-size: 15px;
  line-height: 1.75;
}

@media (min-width: 768px) {
  .section-description { font-size: 16px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-sage);
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 14px;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 20px rgba(35, 63, 72, 0.25);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(35, 63, 72, 0.2);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  padding: 14px 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  font-size: 14px;
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-bg-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(35, 63, 72, 0.2);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-white {
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 14px;
}

.btn-white:hover {
  background-color: var(--color-mint-lighter);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.btn-white:active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-white {
    font-size: 15px;
    padding: 15px 34px;
  }
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-mint {
  background: var(--color-mint-light);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
}

.card-mint:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ---------- Form Styles ---------- */
.form-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:hover {
  border-color: var(--color-border);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-input::placeholder {
  color: #A0A0A0;
  font-weight: 400;
}

.form-select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A4A4A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:hover {
  border-color: var(--color-border);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

[dir="rtl"] .form-select {
  background-position: left 16px center;
}

.form-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  min-height: 120px;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-textarea:hover {
  border-color: var(--color-border);
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: 6px;
}

.form-error {
  display: none;
  font-size: 12px;
  color: #DC2626;
  margin-top: 4px;
}

.form-error.visible {
  display: block;
}

.form-group {
  margin-bottom: 20px;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 16px 0;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb-separator {
  color: var(--color-border);
  font-size: 11px;
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.animate-fade-in {
  animation: fadeIn 0.5s var(--ease-out) forwards;
}

/* Scroll animations — used by main.js IntersectionObserver */
.animate-ready {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.animate-ready.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for child elements */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 60ms; }
.stagger-children > *:nth-child(3) { transition-delay: 120ms; }
.stagger-children > *:nth-child(4) { transition-delay: 180ms; }
.stagger-children > *:nth-child(5) { transition-delay: 240ms; }
.stagger-children > *:nth-child(6) { transition-delay: 300ms; }
.stagger-children > *:nth-child(7) { transition-delay: 360ms; }
.stagger-children > *:nth-child(8) { transition-delay: 420ms; }

/* Scroll reveal — elements start hidden, JS adds .revealed */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hide scrollbar for carousels */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ---------- Sticky Header ---------- */
.header-main {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.header-main.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.top-bar {
  transition: all var(--transition-normal);
}

.top-bar.hidden {
  transform: translateY(-100%);
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* ---------- Mobile Menu ---------- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 42, 0.4);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 380px;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg-white);
  z-index: 999;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: right var(--transition-slow);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}

[dir="rtl"] .mobile-menu {
  right: auto;
  left: -100%;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
}

.mobile-menu.active {
  right: 0;
}

[dir="rtl"] .mobile-menu.active {
  left: 0;
}

/* Mobile accordion sections */
.mobile-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out);
}

.mobile-accordion-content.active {
  max-height: 500px;
}

.mobile-accordion-btn svg {
  transition: transform 0.25s var(--ease-out);
}

.mobile-accordion-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---------- Scroll to Top ---------- */
.scroll-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: var(--color-bg-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-normal);
  z-index: 90;
  box-shadow: var(--shadow-lg);
}

[dir="rtl"] .scroll-to-top {
  right: auto;
  left: 28px;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.scroll-to-top:active {
  transform: translateY(0);
}

/* ---------- Dropdown Menus ---------- */
.dropdown-menu {
  transform: translateY(4px);
}

.group:hover .dropdown-menu {
  transform: translateY(0);
}

/* ---------- Utility Classes ---------- */
.text-primary { color: var(--color-primary); }
.text-heading { color: var(--color-text-heading); }
.text-body { color: var(--color-text-primary); }
.text-light { color: var(--color-text-light); }

.bg-mint { background-color: var(--color-mint); }
.bg-mint-light { background-color: var(--color-mint-light); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-light { background-color: var(--color-bg-light); }
.bg-lighter { background-color: var(--color-bg-lighter); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* Gradient overlays */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-darker) 100%);
}

.gradient-mint {
  background: linear-gradient(135deg, var(--color-mint-lighter) 0%, var(--color-mint) 100%);
}

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

  .animate-ready {
    opacity: 1;
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Print Styles ---------- */
@media print {
  .top-bar,
  .header-main,
  .mobile-menu,
  .mobile-menu-overlay,
  .scroll-to-top,
  .cf-turnstile {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  .section {
    padding: 24px 0;
  }
}

/* Updated: 12:17 17-Apr-2026 */
/* Search Results Page — filter tabs */
.search-filter-tab {
  background-color: #F5F5F5;
  color: #4A4A4A;
  cursor: pointer;
  border: 1px solid transparent;
}
.search-filter-tab:hover {
  background-color: #E8F7EF;
  color: #233F48;
}
.search-filter-tab.active {
  background-color: #233F48;
  color: #fff;
  border-color: #233F48;
}