/* ==========================================================================
   Smart Tool Hub — shared base layer  (assets/css/base.css)

   PURPOSE
   Every page on this site carries its own inline <style>. This shared file is
   linked AFTER that inline block, so it only supplies the things the pages do
   NOT already define:
     · one authoritative set of design tokens (--stb-*)
     · a visible keyboard focus ring
     · a skip-to-content link
     · reduced-motion / print / touch-target accessibility
   Anything a page defines itself still wins for that page.

   Token names are namespaced (--stb-*) on purpose: pages still use their own
   legacy names (--accent / --primary / --brand) and there is no risk of a
   collision while the site converges on one palette.
   ========================================================================== */

:root{
  /* Brand — indigo family, matches favicon / og-image artwork */
  --stb-brand:      #4f46e5;
  --stb-brand-hover:#4338ca;
  --stb-brand-2:    #7c3aed;
  --stb-brand-3:    #2563eb;
  --stb-brand-soft: #eef0ff;

  /* Neutrals */
  --stb-ink:        #1e2a44;   /* primary text   (14.3:1 on white) */
  --stb-ink-2:      #334155;
  --stb-muted:      #5b6b80;   /* secondary text (5.0:1 on --stb-bg, AA) */
  --stb-line:       #e5e9f2;
  --stb-line-soft:  #eef1f8;
  --stb-bg:         #f5f6fb;
  --stb-soft:       #f7f8fc;
  --stb-card:       #ffffff;

  /* Semantic (used for gains / losses / warnings) */
  --stb-good:       #059669;
  --stb-bad:        #dc2626;
  --stb-warn:       #b45309;
  --stb-teal:       #0d9488;
  --stb-amber:      #d97706;
  --stb-rose:       #e11d48;

  /* Shape & depth */
  --stb-radius:     16px;
  --stb-radius-sm:  10px;
  --stb-radius-xs:  6px;
  --stb-pill:       999px;
  --stb-shadow:     0 1px 2px rgba(30,42,68,.05), 0 14px 34px -14px rgba(30,42,68,.18);
}

/* ---------- Keyboard focus -------------------------------------------------
   The site previously defined no :focus-visible anywhere, so keyboard users
   had no visible cursor position. High specificity + loaded last so it also
   overrides the inline `outline:none` on buttons.                            */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--stb-brand);
  outline-offset:2px;
  border-radius:var(--stb-radius-xs);
}
/* mouse/touch interaction should not show the ring */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible){ outline:none; }

/* ---------- Skip to content ------------------------------------------------ */
.skip-link{
  position:absolute;
  left:16px;
  top:-72px;
  z-index:9999;
  background:var(--stb-brand);
  color:#fff;
  padding:13px 20px;
  border-radius:0 0 12px 12px;
  font:600 14px/1 -apple-system,"Segoe UI",system-ui,Arial,sans-serif;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(30,42,68,.22);
  transition:top .16s ease;
}
.skip-link:focus{ top:0; }

/* ---------- Custom select arrow -------------------------------------------
   Several tool pages strip the native arrow with `appearance:none` but never
   add one back, leaving a control that looks like a plain box.               */
select.cur{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px !important;
}

/* ---------- Language toggle (single pill button, site-wide) ----------------
   Three shapes existed: a two-button segmented control (mortgage pages), a
   standalone pill (tool pages) and another pill on the home page. All pages
   now use one .lang-btn pill.                                                 */
.lang-btn{
  align-self:flex-end;
  background:var(--stb-card);
  border:1px solid var(--stb-line);
  border-radius:var(--stb-pill);
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--stb-ink);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
  box-shadow:0 1px 2px rgba(30,42,68,.05);
}
.lang-btn:hover{
  border-color:var(--stb-brand);
  color:var(--stb-brand);
  transform:translateY(-1px);
}

/* ---------- Header brand mark (square, brand gradient, white glyph) --------
   Home page already used this shape; the mortgage pages used an emoji and the
   tool pages a grey circle. Unified here.                                     */
.logo svg,
.title-badge svg{ width:24px; height:24px; }
.title-badge{
  background:linear-gradient(135deg,var(--stb-brand-3),var(--stb-brand-2));
  border-radius:14px;
}
.title-badge svg{ stroke:#fff; }

/* ---------- Touch targets (mobile) ----------------------------------------
   Segmented controls, pagers and the language button were rendering around
   32–37px tall, under the 44px comfortable-tap minimum.                      */
@media (max-width:640px){
  /* Defensive: stop the card / segmented controls from ever forcing a
     horizontal scrollbar on very narrow phones. */
  .card,.wrap,.container,aside{ max-width:100%; min-width:0; }
  .seg{ flex-wrap:wrap; }
  body{ overflow-wrap:break-word; }

  .seg button,
  .lang-toggle button,
  .lang-btn,
  .pager button,
  .page-btns button,
  .pages button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  select,
  input[type="text"],
  input[type="number"]{ min-height:44px; }
}

/* ---------- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Print ---------------------------------------------------------- */
@media print{
  .hubbar,
  .lang-btn,
  .lang-toggle,
  .skip-link,
  .related,
  .ads,
  .ad-slot{ display:none !important; }

  html,body{ background:#fff !important; }
  .card,aside,main,.container,.wrap,header{
    box-shadow:none !important;
    border-color:#ddd !important;
  }
  a{ color:#000 !important; text-decoration:none !important; }
  canvas{ max-width:100% !important; height:auto !important; }
  @page{ margin:14mm; }
}