/* CalcAngel — professional blue theme */

:root {
  --tl-blue: #2563eb;
  --tl-blue-dark: #1d4ed8;
  --tl-indigo: #3B3B6B;   /* Helium22 logo indigo — heading colour */
  --tl-navy: #3B3B6B;
  --tl-card-bg: #F2F7FD;      /* light blue card surface */
  --tl-card-border: #D9E6F5;
  --tl-ink: #1e293b;
  --tl-muted: #64748b;
  --tl-bg: #f4f6fa;
  --tl-dark: #0f172a;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
}

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--tl-bg);
  color: var(--tl-ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'DM Sans', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
/* Headings take the Helium22 logo indigo (incl. Bootstrap's .h1–.h6 utilities,
   whose class specificity beats a bare element selector)… */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--tl-indigo); }
/* …except on dark surfaces, where they stay light */
:is(.tl-hero, .tl-navbar, .tl-footer, .tl-admin-sidebar)
  :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: #fff; }

.tl-main { flex: 1 0 auto; }

/* Navbar / footer — dark surfaces with light text */
.tl-navbar {
  background: var(--tl-dark);
  border-bottom: 3px solid var(--tl-blue);
}
.tl-navbar .nav-link { color: rgba(255,255,255,.82); }
.tl-navbar .nav-link:hover, .tl-navbar .nav-link:focus { color: #fff; }
.tl-brand-icon { color: #60a5fa; }
.tl-footer { background: #111318; color: #cbd5e1; }
.tl-footer a { color: #cbd5e1; }
.tl-footer a:hover { color: #fff; }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--tl-blue);
  --bs-btn-border-color: var(--tl-blue);
  --bs-btn-hover-bg: var(--tl-blue-dark);
  --bs-btn-hover-border-color: var(--tl-blue-dark);
  --bs-btn-active-bg: var(--tl-blue-dark);
  --bs-btn-active-border-color: var(--tl-blue-dark);
}
a { color: var(--tl-blue); }

/* Hero */
.tl-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%);
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.tl-hero p { color: #dbeafe; }

/* Content paper card */
.tl-paper {
  background: var(--tl-card-bg);
  border: 1px solid var(--tl-card-border);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* Calculator cards on the homepage */
.tl-calc-card {
  background: var(--tl-card-bg);
  border: 1px solid var(--tl-card-border);
  border-radius: 12px;
  padding: 1.25rem;
  height: 100%;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tl-calc-card:hover {
  transform: translateY(-3px);
  border-color: var(--tl-blue);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .12);
  color: inherit;
}
/* Card typography — larger title and description */
.tl-calc-card .fw-semibold { font-size: 1.1rem; }
.tl-calc-card .small { font-size: .95rem; }
.navbar-brand { font-size: 1.5rem; }
.tl-calc-card .tl-calc-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #DFEBFC; color: var(--tl-blue);
  font-size: 1.35rem;
}

/* Calculator result panel */
.tl-result {
  background: linear-gradient(135deg, #E2EDFC, #E9F5FE);
  border: 1px solid #b3d1f5;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.tl-result-headline { font-size: 2rem; font-weight: 700; color: var(--tl-navy); }
.tl-result table td { padding: .3rem 0; }

/* Formula block */
.tl-formula {
  background: var(--tl-dark);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .92rem;
  white-space: pre-line;
}

/* Ad zones */
.tl-ad-zone { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.tl-ad-zone-top, .tl-ad-zone-bottom { margin: 1rem 0; }
.tl-ad { text-align: center; }
.tl-ad-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: #94a3b8; margin-bottom: 2px;
}
.tl-ad-placeholder {
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 12px, #e9eef5 12px, #e9eef5 24px);
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  color: #94a3b8;
}
.tl-ad-body { margin: 0 auto; overflow: hidden; }

/* Calculator page layout with fixed-width ad sidebars.
   Side columns are 340px — wide enough for every allowed sidebar ad
   (zone max 336px) — and only appear when the viewport can hold
   both sidebars plus a readable main column. Below that they are
   hidden entirely, so ads can never overlap the calculator. */
.tl-wide { max-width: 1720px; }
.tl-calc-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.tl-calc-main { flex: 1 1 auto; min-width: 0; max-width: 980px; margin: 0 auto; }
.tl-side-col { flex: 0 0 340px; width: 340px; max-width: 340px; display: none; }
@media (min-width: 1400px) {
  .tl-side-col { display: block; }
  .tl-side-col .tl-ad-zone { position: sticky; top: 90px; }
}
/* Belt and braces: an ad can never paint outside its zone */
.tl-ad, .tl-ad-body, .tl-ad-placeholder { max-width: 100%; }
.tl-ad-zone { overflow: hidden; }

/* Data-entry fields — light blue border so enterable fields are obvious */
.form-control, .form-select, textarea.form-control {
  border: 2px solid #93c5fd;
  background-color: #fdfeff;
}
.form-check-input {
  border: 2px solid #93c5fd;
}
.form-control::placeholder { color: #94a3b8; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--tl-blue);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}
/* Icon add-ons sit flush with the blue-bordered field beside them */
.input-group-text {
  border: 2px solid #93c5fd;
  background-color: #eff6ff;
}

/* FAQ accordion — transparent so it sits naturally on the light-blue card */
.tl-paper .accordion,
.tl-paper .accordion-item,
.tl-paper .accordion-button {
  --bs-accordion-bg: transparent;
  background: transparent;
}
.accordion-button:not(.collapsed) {
  background: #DFEBFC;
  color: var(--tl-navy);
}

/* Link boxes at the foot of guide articles */
.tl-guide-links {
  background: #fff;
  border: 1px solid var(--tl-card-border);
}

/* Anchored sections land below the sticky navbar (no-JS fallback too) */
[data-cat-section], #calculators { scroll-margin-top: 90px; }

/* Section headings */
.tl-section-title {
  font-weight: 700;
  color: var(--tl-navy);
  border-left: 4px solid var(--tl-blue);
  padding-left: .75rem;
  margin-bottom: 1rem;
}

/* Admin layout */
.tl-admin-sidebar {
  background: var(--tl-dark);
  min-height: 100vh;
}
.tl-admin-sidebar .nav-link {
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  margin-bottom: 2px;
}
.tl-admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.tl-admin-sidebar .nav-link.active { color: #fff; background: var(--tl-blue); }

/* Drag & drop placement editor */
.tl-dz {
  min-height: 110px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: .75rem;
  transition: border-color .15s, background .15s;
}
.tl-dz.tl-dz-over { border-color: var(--tl-blue); background: #eff6ff; }
.tl-dz.tl-dz-reject { border-color: #dc3545; background: #fef2f2; }
.tl-ad-chip {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid var(--tl-blue);
  border-radius: 8px;
  padding: .5rem .75rem;
  margin-bottom: .5rem;
  cursor: grab;
  user-select: none;
  font-size: .875rem;
}
.tl-ad-chip:active { cursor: grabbing; }
.tl-ad-chip.dragging { opacity: .5; }
.tl-ad-chip .tl-chip-size { color: var(--tl-muted); font-size: .78rem; }

/* Select-field preview images (e.g. clothing size converter) */
.tl-field-image {
  text-align: center;
  background: #ffffff;
  border: 2px solid #93c5fd;
  border-radius: 10px;
  padding: .4rem;
}
.tl-field-image img {
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: opacity .15s ease;
}

/* About page — round personal photo + bio */
.tl-about-photo {
  width: 160px; height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--tl-card-border);
  box-shadow: 0 3px 12px rgba(37, 99, 235, .15);
  display: block;
}
@media (max-width: 575px) {
  .tl-about-photo { width: 120px; height: 120px; }
}
.tl-about-bio { color: var(--tl-ink); }

/* Embed widget minimal page */
.tl-widget-body { background: #fff; padding: 1rem; }
.tl-widget-attribution { font-size: .75rem; }