/*
 * Overrides for the embedded Estes SOL Timeline Calculator.
 *
 * The calculator's own CSS is injected by page-sol-calculator.php and
 * automatically scoped under ".sol-embed", so every rule below that starts
 * with ".sol-embed" overrides the calculator without touching its source file.
 * This file loads AFTER the scoped calculator CSS, so equal-specificity rules
 * here win -- in most cases a plain ".sol-embed <selector>" is enough.
 *
 * Edit freely. The calculator HTML in assets/embeds/estes-sol-calculator.html
 * stays byte-for-byte identical and drop-in replaceable.
 *
 * ---------------------------------------------------------------------------
 * Theme tokens (from assets/scss/_color.scss + compiled style.min.css):
 *   site background : #2a7898  ($bgBlue) + media/img/hrlawnoise.png texture
 *   site font       : freight-sans-pro, Arial, sans-serif
 *   text on dark bg : #fff / #a7aaac ($textGray)
 *   text on light   : #212121 ($black)
 * ---------------------------------------------------------------------------
 */

/* Match the main site background: the themed blue + noise texture, instead of
   the calculator's standalone light-grey (#f6f7f9). Path is relative to this
   stylesheet (assets/embeds/ -> ../media/img/). */
.sol-embed {
  background: url(../media/img/hrlawnoise.png) #2a7898;
  background-size: 75px 75px;
  font-family: freight-sans-pro, Arial, sans-serif;
  padding: 0;
}

/* Inherit the site font everywhere inside the embed (the calculator hard-codes
   Arial on body/inputs/buttons). */
.sol-embed,
.sol-embed h1,
.sol-embed h2,
.sol-embed .subtitle,
.sol-embed label,
.sol-embed input,
.sol-embed select,
.sol-embed button,
.sol-embed table {
  font-family: freight-sans-pro, Arial, sans-serif;
}

/* Let the calculator flow full-width inside the theme column instead of its
   own fixed 1100px card. The inner white .card/.container panels stay light so
   the dark text inside them (results table, inputs) remains readable. */
.sol-embed .container {
  max-width: 100%;
  background: transparent; /* show the site blue, not a white card */
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Headings + subtitle sit directly on the blue background -> use site light
   colors (the calculator set these to dark navy, which is unreadable on blue).
   Scoped to DIRECT children of .container so text inside the light .card and
   .info-box panels keeps the calculator's dark, readable colors. */
/* Make the calculator's H1 identical to the rest of the site's H1
   (freight-sans-compressed-pro, uppercase, thin weight) instead of the
   calculator's own 26px navy heading -- including the site's responsive
   font-size scale (2.8em -> 3.5em @820 -> 3.75em @1300). */
.sol-embed > .container > h1 {
  color: #fff;
  font-family: freight-sans-compressed-pro, freight-sans-pro, Arial, sans-serif;
  font-size: 2.8em; /* base (< 820px), matches site */
  font-weight: 100;
  line-height: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin: 0.5em 0;
  text-align: left; /* calculator centered it; site H1 is left-aligned */
  padding-right: 10%;
}
@media (min-width: 820px) {
  .sol-embed > .container > h1 {
    font-size: 3.5em;
  }
}
@media (min-width: 1300px) {
  .sol-embed > .container > h1 {
    font-size: 3.75em;
  }
}

/* Make the .subtitle match the site's NORMAL BODY COPY across breakpoints
   (freight-sans-pro, weight 300, .02em tracking, 1.6em line-height, with the
   site's responsive font-size scale). It sits on the blue background, so use
   light text (#fff) for contrast -- the site body color #000 is unreadable
   here. */
.sol-embed > .container > .subtitle {
  color: #fff;
  font-family: freight-sans-pro, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  text-transform: none; /* undo the earlier h4-style uppercasing */
  margin: 0 0 1.04em;
  max-width: 900px;
  font-size: 15px; /* base */
  text-align: left;
}
@media (max-width: 819px) {
  .sol-embed > .container > .subtitle {
    font-size: 14px;
  }
}
@media (min-width: 820px) {
  .sol-embed > .container > .subtitle {
    font-size: 15px;
  }
}
@media (min-width: 1300px) {
  .sol-embed > .container > .subtitle {
    font-size: 18px;
  }
}
@media (min-width: 1500px) {
  .sol-embed > .container > .subtitle {
    font-size: 20px;
  }
}
@media (min-width: 1800px) {
  .sol-embed > .container > .subtitle {
    font-size: 22px;
  }
}

/* ALL h2s in the embed use the site H2 treatment (freight-sans-compressed-pro,
   weight 500) with the site's responsive scale (2.4em -> 2.5em @820 ->
   2.8em @1300). The standalone "Benefit Timeline" sits on the blue background;
   the card h2s sit on the dark cards -- both use white for contrast. */
.sol-embed > .container > h2,
.sol-embed .card h2 {
  color: #fff;
  font-family: freight-sans-compressed-pro, freight-sans-pro, Arial, sans-serif;
  font-size: 2.4em; /* base, matches site */
  font-weight: 500;
  line-height: 1em;
  text-transform: uppercase; /* undo the earlier h4-style uppercasing */
  letter-spacing: normal;
  margin: 0 !important;
}
@media (min-width: 820px) {
  .sol-embed > .container > h2,
  .sol-embed .card h2 {
    font-size: 2.5em;
  }
}
@media (min-width: 1300px) {
  .sol-embed > .container > h2,
  .sol-embed .card h2 {
    font-size: 2.8em;
  }
}

/* The cards become DARK panels (altBlue #185070 + the site noise texture)
   instead of the calculator's light #fafafa. Everything that sits directly on
   the dark card gets light text for contrast; nested light surfaces (info
   boxes, form inputs, the result panel) keep their own dark-on-light text. */
.sol-embed .card {
  background: url(../media/img/hrlawnoise.png) #185070; /* $altBlue */
  background-size: 75px 75px;
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.sol-embed .card label {
  color: #fff;
}

/* The benefit-timeline header row ("Benefit Date / Type / Notes / Remove")
   and any plain text rendered straight into a card are on the dark bg too. */
.sol-embed .card .event-row.header-row {
  color: #fff;
}

/* Nested surfaces inside the dark card. The results panel and table stay LIGHT
   (dense data -> keep dark-on-light for readability). */
.sol-embed #result,
.sol-embed table {
  color: #212121; /* $black */
}

/* Info boxes go EVEN DARKER than the card (dblue #134968 + noise) with light
   copy, matching the dark treatment used on the cards. */
.sol-embed .info-box {
  background: url(../media/img/hrlawnoise.png) #134968; /* $dblue */
  background-size: 75px 75px;
  color: #fff;
}
.sol-embed .info-box strong {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   #result panel. The calculator renders its result as a LIGHT status panel
   (.notbarred green / .barred red / .warning yellow) with dark text, and its
   JS wraps the status line in an <h2> plus <h3> section headers. Those headings
   inherit our global h2/h3 styles, which look wrong inside the colored panel.
   Reset them here so the result reads as readable paragraph/body copy.
   --------------------------------------------------------------------------- */

/* The result's <h2> is really a status sentence -> make it read like body copy,
   not a compressed display heading. (Slightly emphasized: a touch larger + 600.) */
.sol-embed #result h2 {
  font-family: freight-sans-pro, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: inherit; /* use the status panel's own text color */
  margin: 0 0 0.5em;
}

/* The <h3> section labels ("Benefit Events Used", "Timeline Analysis") -> small
   emphasized labels rather than display headings (and smaller than the h2). */
.sol-embed #result h3 {
  font-family: freight-sans-pro, Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  margin: 1.4em 0 0.4em;
}

/* The .info-box INSIDE the result sits on an already-light colored status panel,
   so the dark #134968 treatment above would clash. Reset it to a subtle light
   inset with the panel's own dark text. */
.sol-embed #result .info-box {
  background: rgba(0, 0, 0, 0.05);
  color: inherit;
}
.sol-embed #result .info-box strong {
  color: inherit;
}
/* The calculator's result copy inherits italic from an unclosed <em> in its
   generated HTML. Reset the panel's body copy + headings to upright; genuine
   <em>/<i> inside still render italic. */
.sol-embed #result,
.sol-embed #result h2,
.sol-embed #result .info-box,
.sol-embed #result .info-box strong {
  font-style: normal;
}
.sol-embed #result em,
.sol-embed #result i {
  font-style: italic;
}

/* --- Result tables ("Benefit Events Used", "Timeline Analysis") -----------
   NOTE: the calculator's generated result HTML leaves some inline tags
   (<strong>, <em>) effectively unclosed, so the browser nests the tables and
   section headings INSIDE them -- which makes the whole table inherit italic +
   bold + any transform. We can't edit the calculator file, so we hard-reset
   font-style / weight / transform on the result tables and headings here.

   Give the tables a clean, scannable treatment: normal-weight non-italic body
   cells, an emphasized uppercase header row, subtle borders and zebra striping
   on a white surface so dense data stays legible on the colored status panel. */
.sol-embed #result h3,
.sol-embed #result table,
.sol-embed #result table * {
  font-style: normal; /* undo inherited <em> italic */
}
.sol-embed #result table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0 0.25em;
  background: #fff;
  font-family: freight-sans-pro, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4em;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.sol-embed #result th,
.sol-embed #result td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
  color: #212121;
  text-transform: none; /* undo inherited uppercase */
}
/* Header row: branded dark blue bar with light text (matches the card theme). */
.sol-embed #result th {
  background: #185070; /* $altBlue */
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  white-space: nowrap;
}
/* Body cells: NORMAL weight + non-italic (undo the inherited strong/em) + zebra. */
.sol-embed #result td {
  font-weight: 400;
}
.sol-embed #result tr:nth-child(even) td {
  background: #f4f6f8;
}
.sol-embed #result tr:hover td {
  background: #eaf1f5;
}

/* The calculator's status pills + clock cells keep their own colors; just make
   sure our table rules don't flatten them. */
.sol-embed #result .pill,
.sol-embed #result .clock-cell {
  font-weight: 600;
}

/* Form controls keep native light fields with dark text (expected + readable). */
.sol-embed input,
.sol-embed select {
  color: #212121;
  background: #fff;
}

/* Input/select font-size matches the site's NORMAL BODY COPY and scales with it
   across breakpoints (same 14 -> 15 -> 18 -> 20 -> 22px scale as .subtitle),
   instead of the calculator's fixed 14px. The Safari <select> block below
   re-states the same scale so the select text stays in lockstep. */
.sol-embed input,
.sol-embed select {
  font-size: 15px; /* base (820-1299px) */
}
@media (max-width: 819px) {
  .sol-embed input,
  .sol-embed select {
    font-size: 14px;
  }
}
@media (min-width: 1300px) {
  .sol-embed input,
  .sol-embed select {
    font-size: 18px;
  }
}
@media (min-width: 1500px) {
  .sol-embed input,
  .sol-embed select {
    font-size: 20px;
  }
}
@media (min-width: 1800px) {
  .sol-embed input,
  .sol-embed select {
    font-size: 22px;
  }
}

/* --- Safari <select> height fix (CSS-only) --------------------------------
   The calculator styles inputs AND selects with `padding: 9px; font-size:14px;
   box-sizing: border-box`. Chrome/Firefox honor that padding on a native
   <select>, so inputs and selects end up the same height. Safari/WebKit renders
   a native "menulist" <select> at its own intrinsic height and effectively
   IGNORES the vertical padding -- so the select comes out shorter than the
   inputs. The fix is to strip the native appearance and give the select the
   exact same box model as the inputs (same padding/border/box-sizing + an
   explicit line-height so the text metrics match). We re-add a custom dropdown
   caret since appearance:none removes the native one. */
.sol-embed select {
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none;
  appearance: none;
  padding: 9px;
  border: 1px solid #bbb;
  border-radius: 6px;
  /* font-size intentionally omitted here -- it comes from the responsive
     input/select rule above so the select text scales with the inputs. */
  line-height: 1.4; /* match the inputs' effective text height */
  box-sizing: border-box;
  /* custom caret (native one is removed by appearance:none) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px; /* room for the caret */
}

.sol-embed .logo-wrap {
  display: none;
}

.sol-embed label {
  margin-bottom: 0;
}

.sol-embed .footer {
  color: white;
}

/* --- Action-row buttons: match the contact-page .btn.btn-bordered ----------
   Contact-page buttons are uppercase acumin-pro-wide with a 2px white outline,
   transparent fill, square corners, filling to dark navy ($dblue #134968) on
   hover. The calculator's three action-row buttons:
     - "Add Benefit Event" + "Analyze Timeline" -> OUTLINE (no fill, white border)
     - "Reset" (.danger-button.secondary)        -> SOLID dark-navy fill, no border
   We drop the contact button's min-width:300px so the three sit inline in the
   flex .action-row. */
.sol-embed .action-row button {
  font-family: acumin-pro-wide, freight-sans-pro, Arial, sans-serif;
  /* Match the contact page's .btn-bordered, which is font-size:0.7em and so
     scales with the site's responsive base font (14 -> 15 -> 18 -> 20 -> 22px
     across these breakpoints). 0.7 x that base = the sizes below. The embed
     doesn't inherit the site's responsive base, so we set the scale explicitly
     to stay in lockstep with the real contact buttons. */
  font-size: 10.5px; /* base (820-1299px): 15 x 0.7 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1em;
  padding: 15px 20px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
@media (max-width: 819px) {
  .sol-embed .action-row button {
    font-size: 9.8px; /* 14 x 0.7 */
  }
}
@media (min-width: 1300px) {
  .sol-embed .action-row button {
    font-size: 12.6px; /* 18 x 0.7 */
  }
}
@media (min-width: 1500px) {
  .sol-embed .action-row button {
    font-size: 14px; /* 20 x 0.7 */
  }
}
@media (min-width: 1800px) {
  .sol-embed .action-row button {
    font-size: 15.4px; /* 22 x 0.7 */
  }
}

/* First two: no fill, white outline (-> fill dark navy on hover, like contact). */
.sol-embed .action-row button:not(.danger-button) {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.sol-embed .action-row button:not(.danger-button):hover {
  background: #134968; /* $dblue */
  border-color: #134968;
  color: #fff;
}

/* Reset button: solid dark-navy fill, no outline. (It carries .danger-button
   .secondary in the calculator markup; override both.) */
.sol-embed .action-row button.danger-button,
.sol-embed .action-row button.secondary {
  background: #134968; /* $dblue */
  border: 2px solid #134968; /* keep the same box size as the outline buttons */
  color: #fff;
}
.sol-embed .action-row button.danger-button:hover,
.sol-embed .action-row button.secondary:hover {
  background: #0e3a52; /* slightly darker on hover */
  border-color: #0e3a52;
}

/* --- Result tables: mobile responsive (MOBILE ONLY, desktop untouched) -----
   The result HTML renders two borderless <table>s with NO thead/class:
     table #1 -> "Benefit Events Used"  : Date | Type | Notes            (3 cols)
     table #2 -> "Timeline Analysis"    : Period/Event | Calendar Days |
                 Master Clock Deduction | Master SOL Clock Used | Effect (5 cols)
   On a narrow screen a 3-5 column data table overflows its container. Below the
   site's mobile breakpoint we collapse each table into a stack of cards: the
   header <tr> (the one holding <th>) is hidden, and every data <tr> becomes a
   bordered block whose <td>s stack full-width, each prefixed with its column
   label via ::before. Everything lives inside @media (max-width:819px) so the
   desktop table treatment above is completely unaffected.
   We can't edit the calculator HTML, so labels are keyed off the column
   position (nth-of-type) and the table position (#result table:nth-of-type). */
@media (max-width: 819px) {
  .sol-embed #result table,
  .sol-embed #result tbody,
  .sol-embed #result tr,
  .sol-embed #result td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* Hide the header row (the <tr> that contains the <th> cells). */
  .sol-embed #result tr:first-child {
    display: none;
  }
  /* Each data row -> a bordered card. */
  .sol-embed #result tr {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    margin: 0 0 10px;
    overflow: hidden;
    background: #fff;
  }
  .sol-embed #result tr:last-child {
    margin-bottom: 0;
  }
  /* Keep zebra striping readable in card form. */
  .sol-embed #result tr:nth-child(even) td {
    background: transparent; /* reset desktop zebra; card bg handles contrast */
  }
  /* Each cell -> a label/value row inside the card. */
  .sol-embed #result td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px 12px;
    text-align: left;
    white-space: normal; /* allow wrapping on mobile */
  }
  .sol-embed #result td:last-child {
    border-bottom: none;
  }
  /* Injected column label before each cell's value. */
  .sol-embed #result td::before {
    display: block;
    margin-bottom: 2px;
    font-family: freight-sans-pro, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #185070; /* $altBlue, matches the desktop header bar */
  }

  /* Labels for table #1 -- "Benefit Events Used" (Date | Type | Notes). */
  .sol-embed #result table:nth-of-type(1) td:nth-of-type(1)::before {
    content: "Date";
  }
  .sol-embed #result table:nth-of-type(1) td:nth-of-type(2)::before {
    content: "Type";
  }
  .sol-embed #result table:nth-of-type(1) td:nth-of-type(3)::before {
    content: "Notes";
  }

  /* Labels for table #2 -- "Timeline Analysis" (5 cols). */
  .sol-embed #result table:nth-of-type(2) td:nth-of-type(1)::before {
    content: "Period / Event";
  }
  .sol-embed #result table:nth-of-type(2) td:nth-of-type(2)::before {
    content: "Calendar Days";
  }
  .sol-embed #result table:nth-of-type(2) td:nth-of-type(3)::before {
    content: "Master Clock Deduction";
  }
  .sol-embed #result table:nth-of-type(2) td:nth-of-type(4)::before {
    content: "Master SOL Clock Used";
  }
  .sol-embed #result table:nth-of-type(2) td:nth-of-type(5)::before {
    content: "Effect";
  }
}

/* --- Un-pill a nested .info-box -------------------------------------------
   The calculator's result HTML nests an .info-box (adjuster note) INSIDE a
   .pill span:
     <span class="pill pill-green">
       Within one year of benefit no master clock deduction.
       <div class="info-box">...adjuster note...</div>   <- trapped in the pill
     </span>
   Because the .info-box is a tall block child of the pill, the pill's
   background (.pill-green #d7f0dd + its 999px radius) grows into a large green
   BLOB painted behind the whole thing -- text AND note. We can't change the DOM
   (the calculator HTML stays untouched), but when a pill CONTAINS an .info-box
   we strip the pill's own capsule styling entirely via :has(), so it no longer
   draws any background/shape -- the pill becomes a plain block wrapper. The
   short sentence then reads as normal colored status text, and the .info-box
   below it renders as its own readable note. */
.sol-embed .pill:has(.info-box) {
  display: block;
  background: none !important; /* kill the green/red/yellow capsule fill */
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}
/* Keep the pill's own status text colored (green/red/yellow) but as plain text,
   not a capsule. The color comes from .pill-green/.pill-red/.pill-yellow and is
   preserved since we only reset background above. */

.sol-embed .pill .info-box {
  display: block;
  margin: 8px 0 2px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.05); /* subtle inset, NOT the pill's green */
  border-radius: 6px; /* undo the pill's 999px capsule radius */
  color: #212121; /* readable dark text, not the pill's green */
  font-size: 13px; /* undo the pill's small 12px */
  font-weight: 400; /* undo the pill's bold */
  line-height: 1.5em;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal; /* pills set nowrap-ish inline flow; let the note wrap */
  vertical-align: baseline;
}
.sol-embed .pill .info-box strong {
  color: #212121; /* the note's whole body is wrapped in <strong>; keep it dark,
                     normal weight so it reads as a note rather than bold green */
  font-weight: 400;
}

/* --- Add further brand/theme overrides below as needed. --- */