/* WordPress / Elementor glue for the EduCalcDb design system (educalc.css). */

/* Hello's reset sets body line-height 1.5; the Astro design never set one. */
body {
  line-height: normal;
}

/* Elementor headings follow the site typography instead of the kit defaults. */
.elementor-widget-heading .elementor-heading-title {
  color: inherit;
  font-family: inherit;
}
/* Elementor's .elementor-heading-title resets size/line-height; restore the Astro h1/h2/h3 rules. */
.elementor-widget-heading h1.elementor-heading-title {
  max-width: 20ch;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* The kicker under the title, as "h1 + .eyebrow" on the old site. */
.elementor-widget-heading + .elementor-widget-text-editor > .eyebrow:first-child {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-4);
}
.elementor-widget-text-editor {
  color: inherit;
}


/* Theme Builder header/footer wrappers add no spacing of their own. */
.elementor-location-header .e-con,
.elementor-location-footer .e-con {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-footer .elementor-widget-shortcode {
  width: 100%;
}
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Calculator page sidebar stays in view on desktop. */
@media (min-width: 1025px) {
  .educalc-sticky {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
}

/* Post meta line ("By Editorial Team · Updated …"). */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--muted);
  font-size: 0.92rem;
}
.post-meta strong {
  color: var(--ink);
}

/* Sidebar search form. */
.post-sidebar .search-form {
  display: flex;
  gap: 8px;
}
.post-sidebar .search-form label {
  flex: 1;
}
.post-sidebar .search-field,
.post-sidebar input[type='search'] {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--field-bg);
  color: var(--ink);
}
.post-sidebar .search-submit {
  min-height: 42px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  background: var(--brand);
  color: var(--brand-contrast);
  font-weight: 700;
  cursor: pointer;
}
.sidebar-list .count {
  color: var(--subtle);
}

/* Footer bottom bar. */
.footer-bottom {
  border-top: 1px solid rgba(255, 253, 247, 0.08);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  color: var(--footer-text);
  font-size: 0.85rem;
}
.footer-bottom p {
  margin: 0;
}

/* Below-the-fold rendering cost. */
.site-footer,
.elementor-location-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* Elementor's heading widget colours titles with the kit primary; use the ink colour. */
.elementor .elementor-widget-heading .elementor-heading-title {
  color: var(--ink);
}

/* Undo Hello Elementor's table reset (cell borders, padding, zebra stripes). */
.calculator-table th,
.calculator-table td,
.content-table th,
.weight-table th,
.weight-table td,
.content-table td {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.calculator-table,
.content-table {
  margin-block-end: 0;
  border: 0;
}
.calculator-table tbody > tr:nth-child(odd) > td,
.calculator-table tbody > tr:nth-child(odd) > th,
.content-table tbody > tr:nth-child(odd) > td,
.content-table tbody > tr:nth-child(odd) > th,
.weight-table tbody > tr:nth-child(odd) > td,
.calculator-table tbody tr:hover > td,
.content-table tbody tr:hover > td {
  background-color: transparent;
}

/* Hello Elementor gives every button "8px 16px" padding and a white hover text. */
.icon-toggle,
.icon-button,
.back-to-top {
  padding: 0;
}
.icon-toggle:hover,
.icon-toggle:focus,
.tool-surface .button:hover,
.tool-surface .button:focus,
.back-to-top:hover,
.back-to-top:focus {
  color: var(--ink);
}
.icon-button:hover,
.icon-button:focus {
  color: var(--danger);
}

/* Header/footer span the full viewport; their inner .container sets the width. */
.elementor-location-header .e-con-inner,
.elementor-location-footer .e-con-inner,
.elementor-location-header .elementor-shortcode,
.elementor-location-footer .elementor-shortcode {
  max-width: none;
  width: 100%;
}

/* Hello's theme.css also caps .header-inner / .footer-inner; our .container sets the width. */
.site-header .header-inner,
.site-footer .footer-inner {
  max-width: none;
  padding-inline: 0;
}
.site-header .header-inner.container,
.site-footer .container {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}
@media (max-width: 520px) {
  .site-header .header-inner.container,
  .site-footer .container {
    width: min(100% - 24px, 1120px);
  }
}

/* Archive / post heroes. */
/* Hero copy flows like the old page header (h1 → eyebrow → breadcrumbs → lead). */
.archive-hero {
  display: block;
}

/* Post cards. */
.post-card .card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}
.post-card-media {
  display: block;
  margin-bottom: 6px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.post-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.empty-note {
  color: var(--muted);
}

/* Editorial Team byline card. */
.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-5);
}
.author-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #125c4f, #b68a3b);
  color: #fffdf7;
  font-weight: 800;
}
.author-name {
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--ink);
}
.author-box p {
  margin: 0;
  color: var(--muted);
}

/* Page sections keep a side gutter once the viewport is narrower than the content width. */
@media (max-width: 1160px) {
  .elementor > .e-con {
    --padding-left: 16px !important;
    --padding-right: 16px !important;
  }
}
@media (max-width: 520px) {
  .elementor > .e-con {
    --padding-left: 12px !important;
    --padding-right: 12px !important;
  }
}
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
  --padding-left: 0 !important;
  --padding-right: 0 !important;
}

/* Four category cards on one row (2 on tablets, 1 on phones). */
.grid.cats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .grid.cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .grid.cats {
    grid-template-columns: 1fr;
  }
}

/* ---- Homepage ---------------------------------------------------------- */
.home-alt {
  background: var(--surface);
  border-block: 1px solid var(--border-soft);
}
.home-hero .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
}
.home-hero .lead {
  margin: 14px 0 0;
}
.elementor-widget-text-editor .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 18px;
}
.elementor-widget-text-editor .button {
  text-decoration: none;
}
.home-stats {
  margin: 0;
}
.section-more {
  margin: 8px 0 0;
  font-weight: 700;
}
.section-more a,
.elementor-widget-text-editor p a {
  color: var(--brand);
}
/* Section photos: shown whole (never cropped), no hover motion. */
.section-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  transition: none;
  transform: none;
}
.section-photo img:hover {
  transform: none;
}
.trust-grid .card,
.audience-grid .card {
  cursor: default;
}
.trust-grid .card:hover,
.audience-grid .card:hover {
  transform: none;
}
.glossary-grid p {
  margin: 8px 0 0;
  color: var(--muted);
}
.home-cta {
  text-align: center;
}
.home-cta .actions {
  justify-content: center;
}
.home-cta .lead {
  margin-inline: auto;
}

/* Native Elementor toggle styled like the site FAQ list. */
.home-faq .elementor-toggle-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
}
.home-faq .elementor-tab-title {
  border: 0 !important;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-faq .elementor-tab-title,
.home-faq .elementor-tab-title a {
  color: var(--ink) !important;
  font-size: 1.02rem;
  font-weight: 700;
}
.home-faq .elementor-tab-content {
  border: 0 !important;
  padding: 0 20px 18px !important;
  color: var(--muted);
}
.home-faq .elementor-toggle-icon {
  color: var(--brand);
}

/* Below-the-fold sections skip layout work until scrolled near. */
.elementor > .e-con:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.section-intro {
  max-width: 760px;
  margin: -8px 0 24px;
  color: var(--muted);
}

/* Hello paints focused/hovered buttons #c36; keep the site's own button colours. */
.icon-toggle:hover,
.icon-toggle:focus,
.icon-toggle[aria-expanded='true'] {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.back-to-top:hover,
.back-to-top:focus {
  background: var(--brand);
}
.tool-surface .button:hover,
.tool-surface .button:focus,
.icon-button:hover,
.icon-button:focus {
  background-color: var(--surface-2);
}

/* Category hero: copy on the left, quick-links card on the right. */
.archive-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}
.archive-panel-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.archive-panel-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.archive-panel-list a:hover {
  border-color: var(--brand);
}
.archive-panel-list svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2;
}
@media (max-width: 900px) {
  .archive-hero-layout {
    grid-template-columns: 1fr;
  }
}

/* Elementor widgets use the site font stack (InterVariable), never a kit fallback. */
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-toggle,
.elementor-widget-shortcode {
  font-family: inherit;
}

/* Content columns flow like the old article: normal block layout, collapsing margins. */
.page-flow,
.page-flow > .e-con-inner {
  display: block !important;
}
.page-flow > .elementor-element,
.page-flow > .e-con-inner > .elementor-element {
  width: 100%;
}

/* Post body text uses the ink colour like the old article, not the kit text colour. */
.elementor-widget-theme-post-content {
  color: var(--ink);
}

/* Company/legal pages: a centred 760px column, as on the old site. */
.e-con.simple-page {
  max-width: 760px;
  margin-inline: auto;
}

/* In block-flow columns the page title keeps the old h1 bottom margin. */
.page-flow .elementor-widget-heading h1.elementor-heading-title {
  margin-bottom: var(--space-4);
}