/* =============================================================================
   static/css/main.css
   Global custom styles for the MedicareFit application.

   Design principles:
   - Mobile-first (base styles target small screens, override for larger)
   - Large tap targets for senior users (min 48px height on interactive elements)
   - Minimal palette extension on top of Bootstrap 5
   ============================================================================= */


/* =============================================================================
   1. TYPOGRAPHY & BASE
   ============================================================================= */

body {
  font-size: 1.05rem;          /* Slightly larger base size for readability  */
  line-height: 1.7;
  color: #212529;
}

/* Larger comfortable body text for article/blog content */
.article-body p,
.article-body li {
  font-size: 1.1rem;
  line-height: 1.85;
}

.article-body h2 { margin-top: 2rem; }
.article-body h3 { margin-top: 1.5rem; color: #0d6efd; }


/* =============================================================================
   2. BUTTONS — Senior-friendly large tap targets
   ============================================================================= */

.btn-lg {
  min-height: 52px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Extra large CTA buttons for the hero sections */
.btn-xl {
  min-height: 60px;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
}


/* =============================================================================
   3. HERO SECTIONS
   ============================================================================= */

.hero-section {
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  min-height: 340px;
  position: relative;
}

/* Dark overlay for text legibility on hero images */
.hero-overlay {
  background:  rgba(0, 0, 0, 0.55);
  min-height:  340px;
  display:     flex;
  align-items: center;
}

/* Tighter hero on inner content pages */
.hero-section.hero-sm { min-height: 220px; }
.hero-section.hero-sm .hero-overlay { min-height: 220px; }


/* =============================================================================
   4. RADIO CARD INPUTS (questionnaire)
   Hide native radio; style the label as a card that highlights on selection.
   ============================================================================= */

.radio-card input[type="radio"] {
  display: none;                /* Hidden — label acts as the clickable element */
}

.radio-card label {
  display:     block;
  border:      2px solid #dee2e6;
  border-radius: .5rem;
  padding:     .9rem 1.1rem;
  cursor:      pointer;
  transition:  border-color .12s ease, background .12s ease;
  user-select: none;
  font-size:   1.05rem;
}

.radio-card label:hover {
  border-color: #0d6efd;
  background:   #f0f5ff;
}

.radio-card input[type="radio"]:checked + label {
  border-color: #0d6efd;
  background:   #e0eaff;
  font-weight:  600;
}

/* Focus ring for keyboard navigation */
.radio-card input[type="radio"]:focus-visible + label {
  outline:        3px solid #0d6efd;
  outline-offset: 2px;
}


/* =============================================================================
   5. PROGRESS BAR (questionnaire)
   ============================================================================= */

.progress { height: .55rem; border-radius: 1rem; }
.progress-bar { border-radius: 1rem; transition: width .3s ease; }


/* =============================================================================
   6. PROFILE CARD (results page)
   ============================================================================= */

.profile-card {
  border-left: 6px solid #0d6efd;
  background:  #f0f7ff;
}


/* =============================================================================
   7. STEP BADGES (home page how-it-works)
   ============================================================================= */

.step-badge {
  width:         2.5rem;
  height:        2.5rem;
  border-radius: 50%;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     1.1rem;
}


/* =============================================================================
   8. CARRIER LOGO STRIP  (spec item 4)
   Single horizontal row. Never wraps. Excess logos are hidden/clipped at
   the edge — spec explicitly says "not enough room → excess logos hidden".
   Hover: subtle scale + shadow without moving layout (transform only).
   ============================================================================= */

/* Container: flex-nowrap, overflow hidden so extra logos clip off-screen */
.carrier-strip {
  display:   flex;
  flex-wrap: nowrap;          /* never wrap — single row always              */
  align-items: center;
  gap:       1.5rem;
  overflow:  hidden;          /* clip logos that don't fit — spec item 4     */
}

/* Wrapper for each carrier slot — holds both the img and the fallback span */
.carrier-item {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Each logo: natural size, no resize — spec item 4.
   flex-shrink:0 prevents compression; images render at their SVG viewBox size. */
.carrier-logo {
  flex-shrink: 0;
  display:     block;
  filter:      grayscale(10%) opacity(0.85);
  /* Hover scale uses transform so it never shifts surrounding layout */
  transition:  transform .18s ease, filter .18s ease,
               box-shadow .18s ease;
}

/* HOVER EFFECT (spec item 4): scale up slightly, add shadow.
   transform-origin center keeps the logo in place visually. */
.carrier-logo:hover {
  filter:           grayscale(0%) opacity(1);
  transform:        scale(1.08);
  filter:           drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* ── Fallback text badge (shown when image file is missing) ──
   Renders the carrier name in the company's brand color with a matching
   border. Mimics the visual weight of a small logo at the same height.
   Color and border-color are set inline from config.brand_color. */
.carrier-fallback {
  /* inline-flex so it centres the text and matches carrier-logo baseline */
  display:       inline-flex;   /* toggled to none/inline-flex by onerror JS */
  align-items:   center;
  justify-content: center;
  padding:       .3rem .75rem;
  border:        1.5px solid currentColor;
  border-radius: .35rem;
  font-size:     .78rem;
  font-weight:   700;
  letter-spacing: .03em;
  white-space:   nowrap;
  /* Subtle same-effect hover as the image logos */
  transition:    transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  opacity:       .82;
}

.carrier-item:hover .carrier-fallback {
  opacity:    1;
  transform:  scale(1.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}


/* =============================================================================
   9. STICKY MOBILE CTA BAR
   On small screens, pins the submit button to the bottom of the viewport.
   ============================================================================= */

@media (max-width: 767.98px) {
  .sticky-cta {
    position:   sticky;
    bottom:     0;
    z-index:    1030;
    padding:    .75rem 1rem;
    background: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  }
}


/* =============================================================================
   10. BLOG PAGE
   ============================================================================= */

/* Blog card — consistent height layout */
.blog-card {
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.blog-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.blog-card .card-img-top {
  height:     140px;
  object-fit: cover;
}

.blog-card-title {
  font-size:   .82rem;
  line-height: 1.35;
}

/* Clamp blog card excerpts to 2 lines for compact uniform cards */
.blog-excerpt {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* Category badge pill */
.category-badge {
  font-size:    .75rem;
  font-weight:  600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Article page header */
.article-header {
  background:  #f8f9fa;
  border-left: 5px solid #0d6efd;
  padding:     1.5rem 1.75rem;
  border-radius: 0 .5rem .5rem 0;
}


/* =============================================================================
   11. FAQ PAGE
   ============================================================================= */

/* Group heading */
.faq-group-header {
  background: #f0f5ff;
  border-left: 4px solid #0d6efd;
  padding: .75rem 1rem;
  border-radius: 0 .375rem .375rem 0;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Accordion button styling overrides */
.accordion-button {
  font-size:   1.05rem;
  font-weight: 600;
  color:       #212529;
}

.accordion-button:not(.collapsed) {
  color:      #0d6efd;
  background: #f0f5ff;
}

.accordion-body {
  font-size:   1.05rem;
  line-height: 1.75;
  color:       #444;
}


/* =============================================================================
   12. CONTACT PAGE
   ============================================================================= */

.contact-info-card {
  border-top: 4px solid #0d6efd;
  transition: box-shadow .15s ease;
}

.contact-info-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
}


/* =============================================================================
   13. NAVBAR / FOOTER UTILITIES
   ============================================================================= */

.footer-link { opacity: .85; transition: opacity .15s; }
.footer-link:hover { opacity: 1; }

.letter-spacing { letter-spacing: .08em; }

/* Active nav link underline indicator */
.navbar-nav .nav-link.active {
  border-bottom: 2px solid rgba(255,255,255,.7);
  padding-bottom: calc(.5rem - 2px);
}

/* NAVBAR BRAND — logo + company name are a single clickable link to /.
   cursor:pointer confirms clickability (Bootstrap sets this on <a> elements,
   but the explicit rule ensures it's never overridden).
   Opacity transition matches Bootstrap's own nav-link hover feel. */
.navbar-brand-home {
  cursor: pointer;
  transition: opacity .15s ease;
}
.navbar-brand-home:hover,
.navbar-brand-home:focus-visible {
  opacity: .82;
  text-decoration: none;  /* suppress any inherited underline */
}

/* NON-GOVERNMENT ENTITY label under navbar brand name.
   Small, muted white, not a link — purely informational. */
.navbar-nongov-label {
  font-size:   .62rem;
  font-weight: 400;
  color:       rgba(255,255,255,.55);
  letter-spacing: .03em;
  margin-top:  .15rem;
  line-height: 1;
}


/* =============================================================================
   14. TRUST BADGES ROW
   ============================================================================= */

.trust-badge-icon { font-size: 1.5rem; }


/* =============================================================================
   15. UTILITY OVERRIDES
   ============================================================================= */

/* Ensure form inputs are large enough for senior users */
.form-control-lg { font-size: 1.1rem; min-height: 52px; }
textarea.form-control-lg { min-height: auto; }

/* Prevent layout shift from flash messages */
[role="alert"] { min-height: 0; }


/* =============================================================================
   16. ADVISOR CTA BANNER (results page)
   High-visibility call-to-action card placed above the profile card so it
   appears above the fold on both desktop and mobile.
   ============================================================================= */

/* Card container — gradient background draws the eye before the page loads */
.cta-advisor {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 60%, #1565c0 100%);
  color: #fff;
  border-radius: 1rem !important;
}

/* Override text-muted inside the blue card so it stays readable */
.cta-advisor .text-muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* The primary phone-call button — larger than btn-xl to dominate the card */
.cta-advisor-btn {
  font-size:    1.25rem;
  min-height:   64px;
  padding:      0.95rem 2.25rem;
  border-radius: .6rem;
  letter-spacing: 0.01em;
  /* Subtle pulse draws attention without being distracting */
  animation: cta-pulse 2.6s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);   }
}

/* Outline secondary button on the dark background */
.cta-advisor .btn-outline-primary {
  border-color: rgba(255, 255, 255, 0.6);
  color:        #fff;
}
.cta-advisor .btn-outline-primary:hover {
  background:   rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color:        #fff;
}

/* Small print inside the card */
.cta-advisor .small {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* On very small screens, make the primary CTA full-width */
@media (max-width: 575.98px) {
  .cta-advisor-btn {
    width:     100%;
    font-size: 1.1rem;
  }
}


/* =============================================================================
   17. FOOTER BAR  (spec item 8)
   Simplified single-row footer: left=brand, center=copyright, right=Contact.
   Never grows vertically. On very small screens the brand name hides so the
   center "All Rights Reserved" stays visible.
   ============================================================================= */

/* Outer wrapper — slim, never taller than its content */
.footer-bar {
  flex-shrink: 0;   /* don't compress inside flex column body layout */
}

/* The three-column row */
.footer-main-row {
  min-height: 0;    /* prevent accidental expansion */
  flex-wrap:  nowrap;
}

/* Center copyright: flex-grow-1 + text-center so it always stays centred
   between the two flanking elements regardless of their widths */
.footer-copy {
  flex:          1 1 0;               /* grow to fill space, shrink if needed */
  text-align:    center;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         rgba(255,255,255,.88) !important;  /* full-brightness — not text-muted */
}

/* Brand — hide on xs so copyright is never displaced */
.footer-brand {
  white-space: nowrap;
  min-width:   0;
  color:       rgba(255,255,255,.88) !important;
}

/* Contact link */
.footer-contact-link {
  white-space: nowrap;
}

/* FOOTER DISCLAIMER STRIP (spec item 9):
   One slim line of small print below the main bar. Centred, readable.
   Opacity raised to .68 so it's legible on the dark background. */
.footer-disclaimer-strip p {
  font-size:   .72rem;
  line-height: 1.4;
  color:       rgba(255,255,255,.68);
  text-align:  center;
  margin:      0;
}


/* =============================================================================
   18. STICKY MOBILE CONTACT BUTTON  (spec item 11)
   Fixed at the bottom of the viewport, visible only on < 768 px screens.
   Bootstrap's d-md-none class hides it on desktop.
   z-index 1040 keeps it above page content but below Bootstrap modals (1050).
   Body gets padding-bottom on mobile so the button never covers page content.
   ============================================================================= */

/* The sticky button itself */
.sticky-mobile-contact {
  position:        fixed;
  bottom:          1rem;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         1040;

  /* Styling — subtle but visible per spec */
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .65rem 1.4rem;
  background:      #0d6efd;
  color:           #fff !important;
  font-weight:     600;
  font-size:       .95rem;
  border-radius:   2rem;        /* pill shape */
  text-decoration: none !important;
  box-shadow:      0 4px 16px rgba(13,110,253,.35);
  transition:      background .15s, box-shadow .15s, transform .15s;
  white-space:     nowrap;
}

.sticky-mobile-contact:hover,
.sticky-mobile-contact:focus {
  background:  #0b5ed7;
  box-shadow:  0 6px 20px rgba(13,110,253,.45);
  transform:   translateX(-50%) translateY(-1px);
  outline:     none;
}

/* Body padding on mobile so sticky button never overlaps footer or content */
@media (max-width: 767.98px) {
  body { padding-bottom: 4rem; }
}


/* =============================================================================
   19. CALCULATOR PAGES
   Hub cards, result tiles, result card headers, trust signals, disclaimer.
   ============================================================================= */

/* ── Hub page cards ── */
.calc-hub-card {
  transition:    transform .18s ease, box-shadow .18s ease;
  border-radius: .75rem !important;
}
.calc-hub-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.11) !important;
}

/* Icon circle on hub cards and page headers */
.calc-hub-icon {
  width:           3rem;
  height:          3rem;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  flex-shrink:     0;
}

/* ── Intro section blocks (calculators hub) ── */
.calc-intro-block {
  background:    #f8f9fa;
  border-radius: .75rem;
  padding:       1.25rem;
  height:        100%;
}

/* ── Submit buttons — consistent height across all calculator pages ── */
.calc-submit-btn {
  min-height:    3rem;
  border-radius: .5rem !important;
  transition:    filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.calc-submit-btn:hover {
  filter:    brightness(.92);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}
.calc-submit-btn:active {
  transform: translateY(0);
}

/* ── Trust signals line under submit buttons ── */
.calc-trust-signals {
  font-size:   .78rem;
  color:       #6c757d;
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem .75rem;
  line-height: 1.4;
}
/* On hub page cards, center the signals */
.text-center .calc-trust-signals {
  justify-content: center;
}

/* ── "Who this is for" line ── */
.calc-who-for {
  font-size:   .84rem;
  color:       #495057;
  margin:      0;
  padding:     .4rem .75rem;
  background:  #f0f4ff;
  border-left: 3px solid #0d6efd;
  border-radius: 0 .35rem .35rem 0;
}

/* ── Educational disclaimer above submit ── */
.calc-disclaimer {
  font-size:   .78rem;
  color:       #868e96;
  line-height: 1.5;
  margin-bottom: .75rem;
  padding:     .5rem .75rem;
  background:  #f8f9fa;
  border-radius: .35rem;
}

/* ── Individual result cards ── */
.calc-result-card {
  border-radius: .75rem !important;
  overflow:      hidden;
}

/* Result card header — warning/amber tone (Penalty Calculator) */
.calc-result-header {
  background:    linear-gradient(90deg, #fff3cd 0%, #fef9eb 100%);
  border-bottom: 1px solid #ffd55e;
  color:         #664d03;
}

/* Result card header — green tone (IEP Calculator) */
.calc-result-header-green {
  background:    linear-gradient(90deg, #d1e7dd 0%, #f0faf5 100%);
  border-bottom: 1px solid #a3cfbb;
  color:         #0a3622;
}

/* Result card header — teal tone (IRMAA Calculator) */
.calc-result-header-info {
  background:    linear-gradient(90deg, #cff4fc 0%, #f0fbfe 100%);
  border-bottom: 1px solid #9eeaf9;
  color:         #055160;
}

/* Result card header — red tone (Drug Cost Estimator) */
.calc-result-header-danger {
  background:    linear-gradient(90deg, #f8d7da 0%, #fff5f6 100%);
  border-bottom: 1px solid #f5c2c7;
  color:         #58151c;
}

/* Individual metric tiles inside result cards */
.calc-result-tile {
  background: #f8f9fa;
  border:     1px solid #e9ecef;
}

/* <details> summary toggle on IRMAA bracket table */
details summary::-webkit-details-marker { display: none; }
details summary::before                 { content: ''; }


/* =============================================================================
   20. CALCULATORS HUB — COMPACT INTRO + MOBILE ACCORDION
   Applied in session 11. Reduces scroll-before-calculator on all screens.
   Desktop: two short paragraphs always visible.
   Mobile:  second paragraph collapses into a <details> accordion.
   ============================================================================= */

/* Intro section — tighter vertical rhythm than the old py-5 */
.calc-hub-intro {
  background: #fff;
}

/* ── Mobile-only "Learn More" accordion (no JS required) ── */
.calc-learn-more {
  border:        1px solid #dee2e6;
  border-radius: .5rem;
  overflow:      hidden;
  background:    #f8f9fa;
}

/* The clickable toggle row */
.calc-learn-more-toggle {
  display:         flex;
  align-items:     center;
  gap:             .35rem;
  padding:         .6rem .875rem;
  font-size:       .84rem;
  font-weight:     600;
  color:           #0d6efd;
  cursor:          pointer;
  list-style:      none;       /* remove default triangle in Firefox */
  user-select:     none;
  background:      #f0f4ff;
  border-radius:   .5rem;
  transition:      background .12s;
}

/* Remove WebKit's default disclosure triangle */
.calc-learn-more-toggle::-webkit-details-marker { display: none; }
.calc-learn-more-toggle::marker                  { display: none; }

.calc-learn-more-toggle:hover  { background: #e0eaff; }
.calc-learn-more[open] .calc-learn-more-toggle { border-radius: .5rem .5rem 0 0; }

/* Chevron rotates when open */
.calc-learn-more-chevron {
  margin-left:  auto;
  transition:   transform .2s ease;
  font-size:    .75rem;
}
.calc-learn-more[open] .calc-learn-more-chevron {
  transform: rotate(180deg);
}

/* Expanded content */
.calc-learn-more-body {
  padding:   .75rem .875rem;
  font-size: .84rem;
  color:     #495057;
  line-height: 1.6;
  border-top: 1px solid #dee2e6;
}

/* ── Cards section — tight on mobile, normal on desktop ── */
.calc-hub-cards-section {
  background: #f8f9fa;
}

/* Mobile: slightly reduce section vertical padding */
@media (max-width: 767.98px) {
  .calc-hub-intro { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .calc-hub-cards-section { padding-top: .875rem !important; padding-bottom: .875rem !important; }

  /* Tighter gap between cards on mobile */
  .calc-hub-cards-section .row { --bs-gutter-y: .75rem; }

  /* Tighter "who this is for" pill on mobile */
  .calc-who-for { font-size: .8rem; padding: .35rem .65rem; }

  /* Trust signals smaller on mobile */
  .calc-trust-signals { font-size: .72rem; gap: .3rem .5rem; }
}


/* =============================================================================
   21. FOOTER — "All Rights Reserved" visibility fix
   Removes text-muted from the center copyright span so it renders at full
   text-light brightness on the dark footer background.
   ============================================================================= */

/* footer-copy color set in section 17 above */