/* ---------------------------------------------------------------------------
   /calculators, the tools index (.ea-calc).

   Loaded only on that page; see the enqueue in functions.php.

   WHY THIS FILE READS LIKE error-404.css
   --------------------------------------
   Both pages have the same shape of problem: a short fixed set of destinations
   and nothing else. The first rebuild of /calculators borrowed nbhd-archive.css
   instead, and three cards on a fifteen-card layout is a thin strip of text
   floating in a 1180px field. The 404 layout is the one that already works at
   this size, so the geometry is taken from it: same 1012px field, same 6vw
   gutter, same seamed grid, same card scale.

   What that buys, in order of how much it matters:

     1. A ground. The hero band is the site's own greige (--eabc-sand, which the
        `bright` section theme resolves --siteBackgroundColor to), so the page
        starts with a block of colour instead of paper on paper.
     2. One object, not three. The grid paints sand and lets it through 1px
        seams between paper cards, so the tools read as a single ruled block.
     3. A bigger card. 1.75rem Cormorant title over 1.05rem body on --eabc-ink,
        against 1.5rem over 1rem on --eabc-muted before. The supporting copy is
        content here, not a caption, so it is set at content contrast.
     4. A pressable surface. Real padding and a sand fill on hover and focus, so
        a tile you open behaves like one.

   No new colour, face, button or spacing step is introduced. Ink, paper, sand
   and muted are the site's four tokens; Cormorant Garamond for headings, EB
   Garamond for body copy, Hanken Grotesk letterspaced uppercase for labels.

   Every property that Squarespace's bundle also sets globally (font, margin,
   colour, text-align, letter-spacing) is stated explicitly. Anything left to
   inherit is a rule someone else gets to win.
   --------------------------------------------------------------------------- */

/* --- Hero band ---------------------------------------------------------- */

/* Static fallback for the header offset. runtime.js overwrites this with an
   inline padding-top measured off the real header; this only has to be right
   enough when scripts have not run. Same 100px/80px pair the ported
   `main .page-regions:first-child ...` rule uses, and the same pair
   error-404.css carries. */
.ea-calc .ea-calc__hero{padding-top:100px;padding-bottom:56px}
@media (max-width:799px){.ea-calc .ea-calc__hero{padding-top:80px}}

/* .ea-archive-intro ships margin:50px auto 3.2rem, sized for an index whose
   cards start immediately below. The band's own padding-bottom does that job
   here, so the bottom margin comes off. */
.ea-calc .ea-calc__intro{position:relative;z-index:1;margin:50px auto 0;
  max-width:1012px;padding:0 6vw;text-align:center}

/* `auto` on the sides, not 0.
 *
 * This is a <p>, so it inherits the 558px measure .ea-archive-intro puts on its
 * paragraphs. It carried text-align:center and looked centred in isolation, but
 * the CENTRING IS OF THE TEXT INSIDE A BOX THAT WAS ITSELF PINNED LEFT: the box
 * is 558px wide inside an 839px field, and `margin:0 0 1.1rem` zeroed the auto
 * side margins that would have centred the box. Measured at 1440 the eyebrow's
 * centre sat at 579px while the h1 and the lead paragraph both centred on 720,
 * so it read as a stray line of text floating to the left of the title rather
 * than as its label. Zeve: "on the /calculators/ page u have a random text of
 * 'CLOSING COSTS AND TAXES'".
 *
 * .ea-calc__lead directly below already does this correctly with `margin:0
 * auto`, which is what made the difference visible: two boxes of exactly the
 * same 558px width, one centred and one not. */
.ea-calc .ea-calc__eyebrow{margin:0 auto 1.1rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-weight:400;font-size:.75rem;line-height:1.3;text-transform:uppercase;
  letter-spacing:.16em;text-align:center;color:var(--eabc-muted,rgba(0,0,0,.58))}

/* Size and colour come from .ea-archive-intro h1 in sitewide.css (45.376px
   Cormorant), which is the scale the 404 copied by hand. Only the space under
   it is tightened: 46px was sized for a heading with nothing above it, and the
   eyebrow now closes the gap from the other side. */
.ea-calc .ea-calc__intro h1{margin:0 0 24px;color:var(--eabc-ink,#2e2e2f)}

.ea-calc .ea-calc__lead{margin:0 auto;max-width:558px;
  color:var(--eabc-ink,#2e2e2f)}

/* --- The ruled block ---------------------------------------------------- */

/* 1012px and 6vw, matching .ea-archive-intro above it, so the heading column
   and the block below share one edge. */
.ea-calc .ea-calc__field{max-width:1012px;margin:0 auto;padding:64px 6vw 96px;
  background:transparent;color:var(--eabc-ink,#2e2e2f)}

/* The gap is drawn by the grid's own ground showing through 1px seams, so the
   three cards read as one ruled block rather than three floating boxes.
   overflow:hidden clips the card grounds to the rounded corner. */
.ea-calc .ea-calc__grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--eabc-sand,#dbd7ce);border:1px solid var(--eabc-sand,#dbd7ce);
  border-radius:6.4px;overflow:hidden}

/* position: the card is the containing block for the stretched link below.
   min-width:0 stops a long unbroken title blowing a grid column past 100%,
   which is how horizontal overflow gets onto this site. */
.ea-calc .ea-calc__card{position:relative;display:flex;flex-direction:column;
  height:100%;min-width:0;margin:0;padding:2rem 1.75rem 1.9rem;
  background:var(--eabc-paper,#fafafa);color:var(--eabc-ink,#2e2e2f);
  text-align:left;transition:background .2s ease}

/* Hover on the tile, not on the anchor, because the anchor is a pseudo-element
   the size of the tile and the visible text sits under it. focus-within keeps
   keyboard parity without a second rule on the link itself. */
.ea-calc .ea-calc__card:hover,
.ea-calc .ea-calc__card:focus-within{background:var(--eabc-sand,#dbd7ce)}

.ea-calc .ea-calc__cardlabel{margin:0 0 .7rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-weight:400;font-size:.68rem;line-height:1.3;text-transform:uppercase;
  letter-spacing:.16em;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-calc .ea-calc__cardtitle{margin:0 0 .6rem;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:500;font-size:1.75rem;line-height:1.15;letter-spacing:-.005em;
  text-align:left;color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}

.ea-calc .ea-calc__cardlink{color:inherit;text-decoration:none}

/* Stretched link: one anchor per card, so the whole tile is clickable without
   nesting a second link inside the body or duplicating the destination for a
   screen reader. */
.ea-calc .ea-calc__cardlink::after{content:"";position:absolute;inset:0}
.ea-calc .ea-calc__cardlink:hover{text-decoration:none}
.ea-calc .ea-calc__cardlink:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);
  outline-offset:3px}

/* Ink, not muted. On the old page this was caption-grade grey; it is the only
   description of the tool on the page, so it is set as body copy. */
.ea-calc .ea-calc__carddesc{margin:0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-weight:400;font-size:1.05rem;line-height:1.5;text-align:left;
  color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}

/* margin-top:auto pins this to the bottom of whichever card is tallest, so the
   three lines sit on one baseline however the copy above them wraps. Same slot
   the 404's count line occupies, carrying the tool's own inputs instead. */
.ea-calc .ea-calc__cardinputs{margin:auto 0 0;padding-top:1.1rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-weight:400;font-size:.68rem;line-height:1.4;text-transform:uppercase;
  letter-spacing:.14em;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58));
  overflow-wrap:break-word}

/* --- Closing note ------------------------------------------------------- */

/* The "these are estimates" line the old page carried, kept because dropping it
   would be a downgrade on a page of tax arithmetic. Deliberately not a button
   and not a card: it is the same piece of page furniture as
   .ea-kcindex__aside on /knowledge-center. */
.ea-calc .ea-calc__note{max-width:558px;margin:2.4rem auto 0;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-weight:400;font-size:.78rem;line-height:1.5;letter-spacing:.02em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

/* Ink, not muted: the link has to be the thing the eye finds in the sentence.
   Same treatment as .ea-kcindex__aside a. */
.ea-calc .ea-calc__note a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid var(--eabc-sand,#dbd7ce)}
.ea-calc .ea-calc__note a:hover,
.ea-calc .ea-calc__note a:focus-visible{color:var(--eabc-ink,#2e2e2f);
  border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-calc .ea-calc__note a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);
  outline-offset:3px}

/* --- Narrow ------------------------------------------------------------- */

/* Two up, with the third card spanning the row it would otherwise share with a
   blank cell. The 404 never meets this because six items divide evenly into
   two columns; three do not, and an empty cell in a seamed grid paints as a
   solid slab of sand, which looks like a bug. */
@media (max-width:899px){
  .ea-calc .ea-calc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ea-calc .ea-calc__card:last-child{grid-column:1 / -1}
  /* Nothing below it to hold a baseline against once it is alone on its row. */
  .ea-calc .ea-calc__card:last-child .ea-calc__cardinputs{margin-top:1.1rem;padding-top:0}
}

/* One column. Same widths and the same steps as error-404.css, so the two
   pages break at the same places. */
@media (max-width:767px){
  .ea-calc .ea-calc__hero{padding-bottom:40px}
  .ea-calc .ea-calc__intro{margin-top:24px}
  .ea-calc .ea-calc__field{padding:44px 6vw 72px}
  .ea-calc .ea-calc__grid{grid-template-columns:minmax(0,1fr)}
  .ea-calc .ea-calc__card{padding:1.6rem 1.4rem}
  .ea-calc .ea-calc__card:last-child .ea-calc__cardinputs{margin-top:auto;padding-top:1.1rem}
  .ea-calc .ea-calc__cardtitle{font-size:1.55rem}
  .ea-calc .ea-calc__note{margin-top:2rem;font-size:.72rem}
}