/* ============================================ */
/* TYPOGRAPHY, CARD STYLING, FLAGS               */
/* ============================================ */
/* === Share box headline + CTA line enhancements === */
.share-box .share-headline{
  color: #ffffff !important;
  letter-spacing: 0.12em;
  font-weight: 900;
  font-size: 1.45rem;
  text-align: center;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
/* Third line emphasis inside share box */
.find-numbers-line{
  margin: 10px auto 14px;
  width: 92%;
  text-align: center;
  font-size: 1.35rem;      /* larger */
  font-weight: 950;
  letter-spacing: 0.07em;
  color: #14532d;
  background: rgba(255,255,255,0.55);
  border: 3px solid #000;
  border-radius: 14px;
  padding: 12px 14px;
}

/* Phone + email pills at bottom of share box */
.share-contact-row{
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}
.contact-pill{
  display: inline-block;
  padding: 7px 14px;
  border: 3px solid #000;              /* stronger border */
  border-radius: 999px;
  background: rgba(255,255,255,0.60);  /* more opaque so border pops */
  margin: 6px 6px 0;
  white-space: nowrap;
}
.contact-pill a{
  color: #000;
  font-weight: 900;
  text-decoration: none;
}
.contact-pill a:hover{
  text-decoration: underline;
}


.-instruction {
  text-align: center;
  font-weight: 800;
  font-size: 1.35rem;   /* enlarged */
  color: #2f9e44;
  margin: 10px 0 22px;
}


.calculate-inline:hover,
.calculate-inline:focus,
.calculate-inline:focus-visible {
  background: #ffeb3b;
  color: #000;
  outline: none;
}

.calculate-inline {
    cursor: pointer;
display: inline-block;
  padding: 4px 14px;
  margin: 0 6px;
  background: #2563eb;
  color: #ffeb3b;
  border: 3px solid #b91c1c;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: middle;
}
/* Box around GOLD STANDARD tagline */
/* GOLD STANDARD box — extra large separation from credibility line */
/* GOLD STANDARD box — bold border with GREEN fuzzy glow */
.gold-tagline-box{
  background: #ffffff;
  border: 4px solid #2f9e44;              /* strong green border */
  border-radius: 12px;
  padding: 10px 22px;
  max-width: 1100px;
  margin: 90px auto 28px;
  text-align: center;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.85),           /* crisp dark edge */
    0 0 20px rgba(47,158,68,0.65);        /* fuzzy GREEN glow */
}
/* FORCE the gold tagline box to be shorter */
.gold-tagline-box{
  padding: 6px 18px !important;
  /* margin override removed to preserve whitespace */
}

/* Ensure GOLD STANDARD line has no default <p> margins (helps precise scrolling) */
.gold-tagline { margin: 0; }

/* Restore strong spacing under privacy note */
.page > p:first-of-type{
  margin-bottom: 36px !important;
}


/* === PRINT-ONLY HIDES (remove dead space) === */
@media print {
  /* Remove the GOLD STANDARD title box from the PDF */
  .gold-tagline-box { display: none !important; }

  /* Remove the "See Detailed Chart View" toggle button from the PDF (chart still prints) */
  .detail-toggle-centered,
  #toggleDetailBtn { display: none !important; }
}


/* Boxed emphasis for hero sub-line (matches GOLD STANDARD box style) */
.hero-subtitle-box{
  background: transparent;  /* Removed white background */
  border: none;  /* Removed gold border */
  border-radius: 12px;
  padding: 8px 20px;  /* Reduced from 12px 24px */
  max-width: 980px;
  margin: -12px auto 4px;  /* More negative top margin to move further up */
  text-align: center;
  box-shadow: none;  /* Removed shadow */
}

/* KEEP YOUR SALARY – improved outline (minimizes interior stroke bleed) */
.keep-salary-emphasis{
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow:
    -2px -2px 0 #000,
     0px -2px 0 #000,
     2px -2px 0 #000,
    -2px  0px 0 #000,
     2px  0px 0 #000,
    -2px  2px 0 #000,
     0px  2px 0 #000,
     2px  2px 0 #000,
     0 0 6px rgba(47,158,68,0.35) !important;
}


/* GOLD STANDARD – extra bold outline + a touch more spacing */
.gold-standard{
  letter-spacing: 0.13em !important;
  text-shadow:
    -3px -3px 0 #000,
     3px -3px 0 #000,
    -3px  3px 0 #000,
     3px  3px 0 #000,
    -3px  0px 0 #000,
     3px  0px 0 #000,
     0px -3px 0 #000,
     0px  3px 0 #000 !important;
}


/* =========================
   PRINT LOCK (do not edit above)
   ========================= */
.print-cover{ display:none; }
.print-footer{ display:none; }

@media print {
  /* Page + background */
  html, body { background:#fff !important; }
  .page { max-width:none !important; padding:10mm !important; }

  /* Intentional cover page */
  .print-cover{
    display:block !important;
    page-break-after: always !important;
    break-after: page !important;
  }
  .print-cover-inner{
    text-align:center;
    padding: 28mm 10mm 10mm;
  }
  .print-cover-title{
    margin: 0 0 8mm 0;
    font-size: 30pt;
    font-weight: 900;
  }
  .print-cover-subtitle{
    margin: 0 0 10mm 0;
    font-size: 16pt;
    font-weight: 700;
  }
  .print-cover-meta{
    margin-top: 10mm;
    display: grid;
    gap: 6mm;
    justify-content: center;
    font-size: 12pt;
  }

  /* Footer on all pages */
  .print-footer{
    display:block !important;
    position: fixed;
    left: 10mm;
    right: 10mm;
    bottom: 6mm;
    font-size: 9pt;
    color: #666;
    text-align: center;
  }
  .print-footer-sep{ margin: 0 6px; }

  /* Never print interactive UI / tools */
  #backToTopBtn,
  .actions,
  .share-box,
  .scenario-tools,
  .detail-toggle-centered,
  #toggleDetailBtn{
    display:none !important;
  }

  /* Avoid “instruction” clutter in PDF */
  .-instruction{ display:none !important; }

  /* Never print the GOLD STANDARD marketing box (was causing dead pages) */
  .gold-tagline-box{ display:none !important; }

  /* Reduce accidental whitespace that can push a blank page */
  .credibility-line{ margin: 0 !important; }

  /* Start main input cards on page 2 (after cover) */
  .print-cover + .cards{
    page-break-before: always !important;
    break-before: page !important;
  }

  /* Headings should stick with the content below */
  .-heading{
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Summary: keep together when possible */
  #resultsCard{
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Remove max-height clipping for print */
  .table-wrapper{
    max-height: none !important;
    overflow: visible !important;
  }

  /* Detailed table: allow flow across pages, but don't split rows; repeat header */
  #detailResultsCard table{ width:100% !important; }
  #detailResultsCard thead{ display: table-header-group !important; }
  #detailResultsCard tr{
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}


@media print {
  /* Never force an extra trailing page */
  .page{ page-break-after: auto !important; break-after: auto !important; }
}


/* === Household quick links: larger font without wrapping === */
.card.household .house-quick-links{
  font-size: 0.90rem !important;     /* bigger + readable */
  white-space: nowrap !important;    /* never wrap */
}
.card.household .house-quick-links .link-sep{
  margin: 0 4px !important;          /* tighter separators to save width */
}


/* === Emphasize "Known Monthly Guarantees" === */
.card.spouse1 .monthly-label,
.card.spouse2 .monthly-label{
  font-weight: 800 !important;
  color: #111 !important;
}


/* === Color Spouse section titles & category labels to match borders === */

/* Spouse 1 (blue) */
.card.spouse1 h2,
.card.spouse1 .monthly-label,
.card.spouse1 label{
  color: #2563eb !important;
}

/* Spouse 2 (pink) */
.card.spouse2 h2,
.card.spouse2 .monthly-label,
.card.spouse2 label{
  color: #be185d !important;
}

/* EXCEPTIONS: keep annuity labels/start ages green */
.card.spouse1 label[for^="s1_other"],
.card.spouse1 label[for^="s1_start"],
.card.spouse2 label[for^="s2_other"],
.card.spouse2 label[for^="s2_start"]{
  color: #2f9e44 !important;
}

/* Hide all Spouse 2 labels to remove dead space */
.card.spouse2 label {
  display: none !important;
}




/* === Uniform larger card titles (Household, Spouse 1, Spouse 2) === */
.card h2{
  font-size: 1.3rem !important;   /* Reduced from 1.45rem */
  font-weight: 900 !important;
  letter-spacing: 0.04em;
}


/* === Tighten vertical spacing under card titles to reclaim space === */
.card h2{
  margin-bottom: 6px !important;   /* tighter gap below titles */
  padding-bottom: 4px !important;  /* slimmer divider spacing */
}


/* === Subtle character spacing for emphasis phrases === */

/* KEEP YOUR SALARY */
.keep-salary-emphasis{
  letter-spacing: 0.16em !important;   /* slightly more breathing room */
}

/* GOLD STANDARD */
.gold-standard{
  letter-spacing: 0.15em !important;   /* subtle, elegant spacing */
}


/* === PRINT: prevent trailing blank page === */
@media print {
  /* Don't force a page break after the LAST card (usually the detailed view) */
  .-card{
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* Keep a clean break AFTER the summary card only */
  #resultsCard{
    page-break-after: always !important;
    break-after: page !important;
  }

  /* Never force a break after the last input card */
  .cards .card:last-child{
    page-break-after: auto !important;
    break-after: auto !important;
  }
}


/* === Spouse 2 entry boxes: pink + bold to match section === */
.card.spouse2 input[type="text"],
.card.spouse2 input[type="number"]{
  color: #be185d !important;
  font-weight: 700 !important;
}


/* === Align top-of-card secondary lines across all cards === */

/* Normalize spacing under card titles */
.card h2{
  margin-bottom: 4px !important;   /* tighter + consistent */
}

/* Align Household quick links with Spouse monthly labels */
.card.household .house-quick-links{
  top: 44px !important;            /* raise slightly to align */
}

/* Normalize spacing for "Known Monthly Guarantees" */
.card.spouse1 .monthly-label,
.card.spouse2 .monthly-label{
  margin-top: 0 !important;
  margin-bottom: 6px !important;   /* tighter to title */
}


/* === Micro alignment: lift Known Monthly Guarantees slightly === */
.card.spouse1 .monthly-label,
.card.spouse2 .monthly-label{
  margin-top: -2px !important;   /* tiny lift to align with Household links */
}


/* === Share box (gold theme) – enforced === */
.share-box{
  background: #d4af37 !important;
  border: 2px solid #000 !important;
}
.share-box, .share-box p, .share-box h3{
  color: #000 !important;
}
.share-box .share-headline{
  color: #14532d !important; /* deep green headline for hierarchy on gold */
}
#shareWithJamesBtn{
  background: #2f9e44 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
#shareWithJamesBtn:hover{ background:#278a3c !important; }


/* Override: Share CTA button text should be pure white */
#shareWithJamesBtn{
  color: #ffffff !important;
}


/* FINAL OVERRIDE: ensure Share-box headline is white (wins cascade) */
.share-box .share-headline{
  color: #ffffff !important;
}


/* === CLEAN Share-box headline (no outlines, no shadows) === */
.share-headline-clean{
  margin: 0 0 10px;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  color: #ffffff;
}


/* === FINAL: borders around phone & email === */
.share-contact-row .contact-pill{
  border: 3px solid #000 !important;
  background: rgba(255,255,255,0.75);
}


/* === Emphasize explanatory text in share box === */
.share-box p{
  color: #000000 !important;
  font-weight: 900;
  font-size: 1.78rem;        /* dialed in: larger but stable */
  line-height: 1.28;
  text-align: center;
  max-width: 820px;          /* prevents 3rd line */
  margin-left: auto;
  margin-right: auto;
}


/* === HARD FORCE: borders around phone & email (cannot be overridden) === */
.phone-pill,
.email-pill{
  display: inline-block !important;
  border: 3px solid #000 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #000 !important;
  font-weight: 900 !important;
  margin: 6px 8px !important;
}

.email-pill a{
  color: #000 !important;
  text-decoration: none !important;
}


/* === PRINT: Contact gold box as its own centered page (Page 2) === */
.print-contact-page { display: none; }

@media print {
  /* Show the contact page and force it to be its own page */
  .print-contact-page{
    display: block !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  /* Center the gold box on the page */
  .print-contact-inner{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The printed gold box */
  .print-share-box{
    width: 80%;
    max-width: 780px;
    background: #d4af37 !important;
    border: 3px solid #000 !important;
    border-radius: 16px;
    padding: 22px 24px;
    text-align: center;
    box-shadow: none !important;
  }

  .print-share-box .print-share-name{
    font-size: 13pt;
    font-weight: 900;
    margin: 0 0 10px 0;
  }


  .print-share-box h2{
    margin: 0 0 10px 0;
    font-size: 18pt;
    font-weight: 900;
  }

  .print-share-box .print-share-tagline{
    margin: 0 0 14px 0;
    font-size: 12pt;
    font-weight: 700;
  }

  .print-share-box .find-numbers-line{
    display: inline-block;
    margin: 8px auto 14px;
  }

  /* Make sure phone/email pills print crisply */
  .print-share-box .contact-pill{
    display: inline-block !important;
    border: 3px solid #000 !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #000 !important;
    font-weight: 900 !important;
    margin: 8px 10px !important;
  }
  .print-share-box a{ color:#000 !important; text-decoration: none !important; }

  /* Ensure cards start AFTER the contact page (i.e., Page 3) */
  .print-contact-page + .cards{
    page-break-before: always !important;
    break-before: page !important;
  }
}