/* ============================================================
   AAPA Portal Version 3 — Warm Editorial Luxury Health Theme
   ============================================================
   Inspired by boutique healthcare publications & luxury clinics.
   Warm cashmere backgrounds (#F9F8F6), deep royal navy (#0A2540),
   champagne gold highlights (#C5A059), and Playfair Display serif.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&display=swap');

/* ── Design Tokens Overrides for V3 ───────────────────────── */
:root {
  --v3-primary:         #0A2540;
  --v3-primary-light:   #173B63;
  --v3-primary-subtle:  #F0F4F8;

  --v3-gold:            #C5A059;
  --v3-gold-bright:     #D4AF37;
  --v3-gold-dark:       #A3803C;
  --v3-gold-subtle:     #FDFBF7;

  --v3-bg:              #F9F8F6;
  --v3-surface:         #FFFFFF;
  --v3-surface-alt:     #F3F0EB;
  --v3-border:          #E6E2DD;
  --v3-border-light:    #ECE8E3;

  --v3-text:            #0A192F;
  --v3-text-muted:      #64748B;
  --v3-text-light:      #94A3B8;

  --font-serif:         'Playfair Display', Georgia, serif;

  --v3-shadow-sm:       0 2px 10px rgba(10, 37, 64, 0.03);
  --v3-shadow-md:       0 8px 24px rgba(10, 37, 64, 0.05);
  --v3-shadow-lg:       0 16px 40px rgba(10, 37, 64, 0.08);
  --v3-shadow-glow:     0 0 30px rgba(197, 160, 89, 0.18);

  --v3-radius-sm:       6px;
  --v3-radius-md:       10px;
  --v3-radius-lg:       14px;
  --v3-radius-xl:       20px;
  --v3-radius-pill:     999px;
}

/* ── Base Override ────────────────────────────────────────── */
body.v3-theme {
  background-color: var(--v3-bg);
  color: var(--v3-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Serif Headings */
.v3-serif {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v3-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--v3-gold-dark);
}

/* ── Top Bar V3 ───────────────────────────────────────────── */
.v3-top-bar {
  background-color: var(--v3-primary);
  color: #ffffff;
  padding-block: 8px;
  font-size: 0.8125rem;
}

.v3-top-bar a {
  color: rgba(255, 255, 255, 0.85);
}

.v3-top-bar a:hover {
  color: var(--v3-gold-bright);
}

.v3-top-bar .top-bar__badge {
  background-color: var(--v3-gold);
  color: var(--v3-primary);
  font-weight: 800;
}

/* ── Version Switcher Bar ─────────────────────────────────── */
.v3-switcher-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px;
  border-radius: var(--v3-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.v3-switcher-item {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: var(--v3-radius-pill);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.v3-switcher-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.v3-switcher-item--active {
  background: var(--v3-gold);
  color: var(--v3-primary) !important;
}

/* ── Navbar V3 ────────────────────────────────────────────── */
.v3-navbar {
  background: rgba(249, 248, 246, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--v3-border);
}

.v3-navbar .navbar__brand-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--v3-primary);
  font-weight: 800;
}

.v3-navbar .navbar__brand-icon {
  background: var(--v3-primary);
  border: 1px solid var(--v3-gold);
}

.v3-navbar .navbar__link {
  color: var(--v3-primary);
  font-weight: 600;
}

.v3-navbar .navbar__link:hover,
.v3-navbar .navbar__link--active {
  color: var(--v3-gold-dark);
}

.v3-navbar .navbar__link::after {
  background: var(--v3-gold);
}

.v3-navbar .navbar__dropdown-menu {
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  box-shadow: var(--v3-shadow-lg);
}

/* ── Buttons V3 ───────────────────────────────────────────── */
.v3-btn-gold {
  background: linear-gradient(135deg, #C5A059 0%, #A3803C 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.3);
  border-radius: var(--v3-radius-pill);
  padding: 0.75rem 1.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}

.v3-btn-gold:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);
  box-shadow: 0 8px 24px rgba(197, 160, 89, 0.45);
  transform: translateY(-2px);
  color: #ffffff;
}

.v3-btn-navy {
  background: var(--v3-primary);
  color: #ffffff;
  border: 1px solid var(--v3-gold);
  border-radius: var(--v3-radius-pill);
  padding: 0.75rem 1.85rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.v3-btn-navy:hover {
  background: var(--v3-primary-light);
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: var(--v3-shadow-md);
}

.v3-btn-outline-navy {
  background: transparent;
  color: var(--v3-primary);
  border: 1.5px solid var(--v3-primary);
  border-radius: var(--v3-radius-pill);
  padding: 0.75rem 1.85rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.v3-btn-outline-navy:hover {
  background: var(--v3-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ── Editorial Hero V3 ────────────────────────────────────── */
.v3-hero {
  background: linear-gradient(180deg, #F9F8F6 0%, #F3F0EB 100%);
  padding-block: clamp(3.5rem, 7vw, 7rem);
  border-bottom: 1px solid var(--v3-border);
  position: relative;
}

.v3-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--v3-surface);
  color: var(--v3-gold-dark);
  border: 1px solid var(--v3-gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--v3-radius-pill);
  margin-bottom: 1.5rem;
  box-shadow: var(--v3-shadow-sm);
}

.v3-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--v3-primary);
  margin-bottom: 1.5rem;
}

.v3-hero__title em {
  font-style: italic;
  color: var(--v3-gold-dark);
  font-weight: 600;
}

.v3-hero__subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--v3-text-muted);
  line-height: 1.7;
  margin-bottom: 2.25rem;
  max-width: 600px;
}

.v3-hero__image-frame {
  position: relative;
  border-radius: var(--v3-radius-xl);
  overflow: hidden;
  box-shadow: var(--v3-shadow-lg);
  border: 2px solid var(--v3-surface);
  outline: 1px solid var(--v3-border);
}

.v3-hero__image {
  width: 100%;
  height: 490px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .v3-hero__image {
    height: 330px;
  }
}

/* ── Minimal Editorial Cards V3 ───────────────────────────── */
.v3-card {
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-lg);
  box-shadow: var(--v3-shadow-sm);
  transition: all 0.3s var(--ease-out);
}

.v3-card:hover {
  border-color: var(--v3-gold);
  box-shadow: var(--v3-shadow-md), var(--v3-shadow-glow);
  transform: translateY(-6px);
}

.v3-card .card__title {
  font-family: var(--font-serif);
  color: var(--v3-primary);
}

.v3-card__badge {
  background: var(--v3-gold-subtle);
  color: var(--v3-gold-dark);
  border: 1px solid var(--v3-gold);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--v3-radius-pill);
}

/* Section Headings */
.v3-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  color: var(--v3-primary);
  font-weight: 700;
}

.v3-section-overline {
  color: var(--v3-gold-dark);
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* ── Ticker V3 ────────────────────────────────────────────── */
.v3-ticker {
  background-color: var(--v3-surface-alt);
  color: var(--v3-primary);
  border-bottom: 1px solid var(--v3-border);
}

.v3-ticker .ticker__badge {
  background-color: var(--v3-gold);
  color: var(--v3-primary);
  font-weight: 800;
}

.v3-ticker .ticker__highlight {
  color: var(--v3-gold-dark);
  font-weight: 700;
}

/* ── Pricing V3 ───────────────────────────────────────────── */
.v3-card--featured {
  background: var(--v3-primary);
  color: #ffffff;
  border: 2px solid var(--v3-gold);
  box-shadow: var(--v3-shadow-lg), var(--v3-shadow-glow);
}

.v3-card--featured .card__title,
.v3-card--featured .card__text {
  color: #ffffff;
}

.v3-card--featured .card__price {
  color: var(--v3-gold-bright);
}

.v3-card--featured .card__popular-tag {
  background: var(--v3-gold);
  color: var(--v3-primary);
  font-weight: 800;
}

/* ── Footer V3 ────────────────────────────────────────────── */
.v3-footer {
  background: var(--v3-primary);
  color: #ffffff;
  border-top: 2px solid var(--v3-gold);
}

.v3-footer .footer__brand-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #ffffff;
}

.v3-footer .footer__heading {
  color: var(--v3-gold-bright);
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

.v3-footer .footer__description,
.v3-footer .footer__link,
.v3-footer .footer__contact-item {
  color: rgba(255, 255, 255, 0.75);
}

.v3-footer .footer__link:hover {
  color: var(--v3-gold-bright);
}

.v3-footer .footer__social-link {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

.v3-footer .footer__social-link:hover {
  background: var(--v3-gold);
  color: var(--v3-primary);
  border-color: var(--v3-gold);
}

.v3-footer .footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.v3-footer .footer__wave {
  color: var(--v3-bg);
}