/* ═══════════════════════════════════════════════════════════════════
   Online Calculator Site — design system
   ───────────────────────────────────────────────────────────────────
   1. Tokens
   2. Base
   3. Shell & layout
   4. Header, nav, most-used strip
   5. Article page (block editor output)
   6. Panels, lists, rate boxes, cards   ← the Elementor utilities
   7. Footer
   8. Elementor compatibility
   9. The calculator plugin (.chuk)
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. Tokens ═══════════════════════════════════════════════════
   Change a value here and it changes everywhere, including inside
   Elementor-built pages that use the utility classes below.
   Keep these in step with Elementor → Site Settings → Global Colors.
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   PALETTE — currently Forest & tangerine.

   To change the whole site's colour, replace the six lines marked
   below with one of the alternatives further down, then make the
   matching change in the plugin's assets/calchub.css and
   assets/keypad.css, which use the same values under their own
   token names. Nothing else needs touching.

   Every --accent-deep and --accent-link value listed here clears
   4.5:1 against white, so link and button text stays readable.
   ───────────────────────────────────────────────────────────────── */

:root {
  --occ-ink:         #14281f;  /* headings, dark bars            ← */
  --occ-ink-2:       #1d382b;  /* category bar                   ← */
  --occ-accent-deep: #c2410c;  /* buttons, white text on accent  ← */
  --occ-accent-link: #c2410c;  /* link text, passes 4.5:1        ← */
  --occ-accent:      #f97316;  /* non-text accents, the mark     ← */
  --occ-accent-lit:  #fdba74;  /* accents on dark                ← */
  --occ-paper:      #f9faf8;  /* secondary surface              */
  --occ-rule:       #dfe4e0;  /* borders                        */
  --occ-rule-2:     #eef1ea;  /* hairlines inside panels        */
  --occ-muted:      #4f5f57;  /* body secondary text            */
  --occ-muted-dk:   #a9bdb2;  /* secondary text on dark         */
  --occ-body-dk:    #c3d2c9;  /* body text on dark              */

  --occ-shell:      1200px;
  --occ-radius:     13px;
  --occ-radius-sm:  8px;

  --occ-font-head:  "Archivo", system-ui, -apple-system, sans-serif;
  --occ-font-body:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}

/* ─────────────────────────────────────────────────────────────────
   THE OTHER PALETTES
   Order: ink · ink-2 · accent-deep · accent-link · accent · accent-lit

   Slate & lime         #111827 #1e293b #15803d #15803d #22c55e #4ade80
   Navy & cyan          #0b2545 #13385f #0e7490 #0e7490 #06b6d4 #67e8f9
   Ink & amber          #161a20 #232932 #b45309 #b45309 #f59e0b #fbbf24
   Deep teal & mint     #0f2e2e #164040 #0f766e #0f766e #14b8a6 #5eead4
   Graphite & blue      #17191c #23262b #1d4ed8 #1d4ed8 #3b82f6 #93c5fd
   Indigo & spring      #1e1b4b #2a2766 #047857 #047857 #34d399 #6ee7b7
   Midnight & violet    #16131f #211c2e #6d28d9 #6d28d9 #a78bfa #c4b5fd
   Black & chartreuse   #0c0c0d #1a1a1c #4d7c0f #4d7c0f #a3e635 #bef264
   Plum & gold          #2a1a33 #3a2545 #a16207 #a16207 #eab308 #fde047
   Charcoal & coral     #1a1a1d #26262b #be123c #be123c #fb7185 #fda4af
   Original green       #0f221b #1b3329 #15663c #1a7347 #208b55 #6fd79b

   The keypad also has two key-face shades that follow the ink. For a
   palette above, use roughly ink lightened twice, e.g. for Navy:
   --kp-face #1b4470 and --kp-face-2 #245688.
   ───────────────────────────────────────────────────────────────── */


/* ═══ 2. Base ════════════════════════════════════════════════════ */

body {
  margin: 0;
  background: #fff;
  font-family: var(--occ-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--occ-ink);
  -webkit-text-size-adjust: 100%;
}

body, .occ-site { min-height: 100vh; }

.occ-site {
  display: flex;
  flex-direction: column;
}

a { color: var(--occ-accent-link); }
a:hover,
a:focus { color: var(--occ-ink); }

h1, h2, h3, h4 {
  font-family: var(--occ-font-head);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--occ-ink);
}

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--occ-accent);
  outline-offset: 2px;
}

.occ-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.occ-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  font-weight: 600;
  color: #fff;
  background: var(--occ-accent-deep);
  border-radius: 0 0 var(--occ-radius-sm) 0;
}
.occ-skip:focus {
  left: 0;
  top: 0;
  color: #fff;
}


/* ═══ 3. Shell & layout ══════════════════════════════════════════ */

.occ-shell {
  width: 100%;
  max-width: var(--occ-shell);
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 24px;
}

/* Article + sidebar. The content column uses a huge flex-grow so the
   sidebar keeps its width until there is genuinely no room, then wraps
   underneath rather than being squeezed to a ribbon. */
.occ-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
  padding-block: 24px 52px;
}

.occ-main    { flex: 999 1 560px; min-width: 0; }
.occ-sidebar { flex: 1 1 290px;  min-width: 0; display: flex; flex-direction: column; gap: 22px; }

@media (max-width: 640px) {
  .occ-shell { padding-inline: 16px; }
  .occ-layout { gap: 26px; padding-block: 18px 36px; }
}


/* ═══ 4. Header ══════════════════════════════════════════════════ */

.occ-header { background: var(--occ-ink); color: var(--occ-paper); }

.occ-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-block: 14px;
}

/* ─ Wordmark ─ */
.occ-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--occ-paper);
}
.occ-brand:hover, .occ-brand:focus { color: #fff; }

.occ-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--occ-accent);
  color: var(--occ-ink);
  font-family: var(--occ-font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
}

.occ-brand__text {
  font-family: var(--occ-font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
}
.occ-brand__text span { color: var(--occ-accent-lit); }

.occ-brand--sm .occ-mark { width: 32px; height: 32px; font-size: 17px; }
.occ-brand--sm .occ-brand__text { font-size: 17px; }

.occ-brand .custom-logo { max-height: 40px; width: auto; }

/* ─ Search ─ */
.occ-search {
  flex: 999 1 320px;
  min-width: 0;
  display: flex;
  gap: 8px;
  margin: 0;
}

.occ-search__field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 15px;
  color: var(--occ-ink);
  background: #fff;
  border: 1px solid var(--occ-ink);
  border-radius: var(--occ-radius-sm);
}

.occ-search__button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--occ-font-head);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--occ-accent-deep);
  border: 1px solid var(--occ-accent-deep);
  border-radius: var(--occ-radius-sm);
  cursor: pointer;
}
.occ-search__button:hover { background: #9a3412; border-color: #9a3412; }

/* ─ Tax-year stamp ─ */
.occ-stamp {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--occ-muted-dk);
  text-align: right;
}
.occ-stamp strong { color: var(--occ-paper); font-weight: 600; }

/* ─ Mobile toggle ─ */
.occ-nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--occ-paper);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9px;
  cursor: pointer;
}

/* ─ Category bar ─ */
.occ-nav { background: var(--occ-ink-2); }

.occ-nav__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.occ-nav__list li { margin: 0; }

.occ-nav__list a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 15px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: #e7efe9;
}
.occ-nav__list a:hover,
.occ-nav__list a:focus { color: #fff; background: rgba(255, 255, 255, 0.07); }

.occ-nav__list .current-menu-item > a,
.occ-nav__list .current-menu-parent > a,
.occ-nav__list .current-menu-ancestor > a {
  color: var(--occ-paper);
  font-weight: 600;
  background: var(--occ-ink);
}

/* ─ Most-used strip ─ */
.occ-strip {
  background: var(--occ-paper);
  border-bottom: 1px solid var(--occ-rule);
}

.occ-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-block: 16px;
}

.occ-strip__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--occ-muted);
}

.occ-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.occ-strip__list a,
.occ-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--occ-rule);
  border-radius: 999px;
}
.occ-strip__list a:hover,
.occ-pill:hover { border-color: var(--occ-accent); }

/* ─ Small screens ─ */
@media (max-width: 860px) {
  .occ-nav-toggle { display: grid; order: 2; }
  .occ-brand      { order: 1; }
  .occ-stamp      { order: 4; text-align: left; flex: 1 1 100%; }
  .occ-search     { order: 3; flex: 1 1 100%; }

  .occ-nav { display: none; }
  .occ-nav.is-open { display: block; }
  .occ-nav__list { flex-direction: column; }
  .occ-nav__list a { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
}


/* ═══ 5. Article page ════════════════════════════════════════════
   Styles the block editor's own output, so a post written in the
   normal editor comes out looking like the design with no page
   building at all.
   ═════════════════════════════════════════════════════════════════ */

.occ-crumbs {
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--occ-muted);
}
.occ-crumbs a { text-decoration: none; }
.occ-crumbs__sep { padding-inline: 7px; color: #98a29d; }

.occ-h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.022em;
}

.occ-lede {
  margin: 0 0 8px;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--occ-muted);
}

.occ-reviewed {
  margin: 0 0 26px;
  font-size: 13px;
  color: var(--occ-muted);
}

/* ─ Prose ─ */
.occ-prose > * { max-width: 70ch; }
.occ-prose > .alignwide,
.occ-prose > .alignfull,
.occ-prose > .wp-block-table,
.occ-prose > .occ-panel,
.occ-prose > .occ-toc,
.occ-prose > .occ-cards,
.occ-prose > .occ-related,
.occ-prose > .chuk,
.occ-prose > figure { max-width: none; }

.occ-prose p { margin: 0 0 18px; }

.occ-prose h2,
.occ-h2 {
  margin: 36px 0 13px;
  font-family: var(--occ-font-head);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.occ-h2--tight { margin-top: 30px; margin-bottom: 16px; font-size: 20px; }

.occ-prose h3 {
  margin: 28px 0 10px;
  font-family: var(--occ-font-head);
  font-size: 19px;
  font-weight: 600;
}

.occ-prose h4 {
  margin: 24px 0 8px;
  font-family: var(--occ-font-head);
  font-size: 16.5px;
  font-weight: 600;
}

.occ-prose ul,
.occ-prose ol { margin: 0 0 18px; padding-left: 22px; }
.occ-prose li { margin-bottom: 7px; }

.occ-prose strong { font-weight: 600; }

.occ-prose blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--occ-paper);
  border: 1px solid var(--occ-rule);
  border-radius: var(--occ-radius);
  font-size: 16.5px;
}
.occ-prose blockquote p:last-child { margin-bottom: 0; }

.occ-prose code,
.occ-prose kbd {
  padding: 2px 6px;
  font-size: 0.9em;
  background: var(--occ-paper);
  border: 1px solid var(--occ-rule);
  border-radius: 5px;
}

.occ-prose hr {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid var(--occ-rule);
}

/* ─ Tables: scroll in a box rather than breaking the layout ─ */
.occ-prose .wp-block-table,
.occ-table {
  overflow-x: auto;
  margin: 0 0 12px;
  border: 1px solid var(--occ-rule);
  border-radius: var(--occ-radius);
}

.occ-prose table,
.occ-table table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.occ-prose thead tr,
.occ-table thead tr {
  background: var(--occ-ink);
  color: var(--occ-paper);
}

.occ-prose th,
.occ-table th {
  padding: 12px 15px;
  text-align: left;
  font-family: var(--occ-font-head);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.occ-prose tbody th,
.occ-table tbody th {
  font-family: var(--occ-font-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--occ-ink);
}

.occ-prose td,
.occ-table td { padding: 12px 15px; }

.occ-prose tbody tr,
.occ-table tbody tr { border-bottom: 1px solid var(--occ-rule-2); }
.occ-prose tbody tr:last-child,
.occ-table tbody tr:last-child { border-bottom: 0; }
.occ-prose tbody tr:nth-child(even),
.occ-table tbody tr:nth-child(even) { background: var(--occ-paper); }

/* numeric columns read better right-aligned */
.occ-table--figures td,
.occ-table--figures thead th + th { text-align: right; }
.occ-table--figures tbody th { text-align: left; }

/* ─ Related calculators ─ */
.occ-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}

.occ-related__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--occ-rule);
  border-radius: 10px;
}
.occ-related__item:hover { border-color: var(--occ-accent); }


/* ═══ 6. Panels & utilities ══════════════════════════════════════
   These are the classes to type into Elementor's
   Advanced → CSS Classes box, so a widget picks up the design
   without restyling anything by hand.
   ═════════════════════════════════════════════════════════════════ */

/* ─ occ-panel : a bordered card with a dark heading bar ─ */
.occ-panel {
  background: #fff;
  border: 1px solid var(--occ-rule);
  border-radius: var(--occ-radius);
  overflow: hidden;
}

.occ-panel__head,
.occ-panel > h2:first-child,
.occ-panel > h3:first-child {
  margin: 0;
  padding: 13px 17px;
  font-family: var(--occ-font-head);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--occ-paper);
  background: var(--occ-ink);
}

/* a green heading bar instead of the dark one */
.occ-panel--accent > .occ-panel__head,
.occ-panel--accent > h2:first-child,
.occ-panel--accent > h3:first-child { background: var(--occ-accent-deep); }

/* a quieter panel with no heading bar */
.occ-panel--paper { background: var(--occ-paper); }
.occ-panel--paper > .occ-panel__head {
  color: var(--occ-ink);
  background: transparent;
  padding-bottom: 4px;
}

.occ-panel__body { padding: 15px 17px; }

/* ─ occ-list : the calculator link list inside a panel ─ */
.occ-list {
  margin: 0;
  padding: 6px 17px 13px;
  list-style: none;
}
.occ-list li { margin: 0; border-bottom: 1px solid var(--occ-rule-2); }
.occ-list li:last-child { border-bottom: 0; }
.occ-list a {
  display: block;
  padding: 10px 0;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
}
.occ-list .current-menu-item > a { font-weight: 600; color: var(--occ-ink); }

/* works on a WordPress nav menu or Categories widget dropped in a panel */
.occ-panel .menu,
.occ-panel .wp-block-categories-list,
.occ-panel .wp-block-page-list {
  margin: 0;
  padding: 6px 17px 13px;
  list-style: none;
}
.occ-panel .menu li,
.occ-panel .wp-block-categories-list li,
.occ-panel .wp-block-page-list li { border-bottom: 1px solid var(--occ-rule-2); }
.occ-panel .menu li:last-child,
.occ-panel .wp-block-categories-list li:last-child,
.occ-panel .wp-block-page-list li:last-child { border-bottom: 0; }
.occ-panel .menu a,
.occ-panel .wp-block-categories-list a,
.occ-panel .wp-block-page-list a {
  display: block;
  padding: 10px 0;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
}

/* ─ occ-rates : a label / figure table, e.g. "2026/27 at a glance" ─ */
.occ-rates {
  margin: 0;
  padding: 5px 17px 15px;
  font-size: 14px;
}
.occ-rates > div,
.occ-rates__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--occ-rule-2);
}
.occ-rates > div:last-child,
.occ-rates__row:last-child { border-bottom: 0; }
.occ-rates dt { color: var(--occ-muted); }
.occ-rates dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─ occ-cards / occ-card : the guides grid ─ */
.occ-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}

.occ-card {
  background: #fff;
  border: 1px solid var(--occ-rule);
  border-radius: var(--occ-radius);
  padding: 20px 21px;
}
.occ-card__kicker {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--occ-accent-deep);
}
.occ-card h3,
.occ-card__title {
  margin: 0 0 9px;
  font-family: var(--occ-font-head);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}
.occ-card h3 a { text-decoration: none; }
.occ-card p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.55; color: var(--occ-muted); }
.occ-card__meta { margin: 0; font-size: 13px; color: var(--occ-muted); }

/* ─ occ-toc : the "On this page" box ─ */
.occ-toc {
  margin: 0 0 32px;
  padding: 18px 20px;
  background: var(--occ-paper);
  border: 1px solid var(--occ-rule);
  border-radius: var(--occ-radius);
}
.occ-toc > p:first-child,
.occ-toc__head {
  margin: 0 0 10px;
  font-family: var(--occ-font-head);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.occ-toc ol,
.occ-toc ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 2; }
.occ-toc a { text-decoration: none; }

/* ─ occ-faq : a stack of question / answer rows ─ */
.occ-faq {
  border: 1px solid var(--occ-rule);
  border-radius: var(--occ-radius);
  overflow: hidden;
  margin-bottom: 36px;
}
.occ-faq > * { padding: 17px 20px; border-bottom: 1px solid var(--occ-rule-2); }
.occ-faq > *:last-child { border-bottom: 0; }
.occ-faq > *:nth-child(even) { background: var(--occ-paper); }
.occ-faq h3 { margin: 0 0 7px; font-size: 17px; font-weight: 600; }
.occ-faq p  { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--occ-muted); }

/* ─ occ-note : the small-print line under a calculator ─ */
.occ-note {
  margin: 0 0 34px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--occ-muted);
}

/* ─ Sidebar widgets inherit the panel look ─ */
.occ-widget .occ-panel__head { margin: 0; }
.occ-widget > ul {
  margin: 0;
  padding: 6px 17px 13px;
  list-style: none;
}
.occ-widget > ul li { border-bottom: 1px solid var(--occ-rule-2); }
.occ-widget > ul li:last-child { border-bottom: 0; }
.occ-widget > ul a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.occ-widget .textwidget,
.occ-widget .widget_text { padding: 15px 17px; }


/* ═══ 7. Footer ══════════════════════════════════════════════════ */

/* Deliberately quiet: small centred text on the paper tone, with a
   hairline above it. The page should end here, not start again. */
.occ-footer {
  margin-top: auto;
  background: var(--occ-paper);
  border-top: 1px solid var(--occ-rule);
  color: var(--occ-muted);
}

.occ-footer__inner {
  padding-block: 26px 34px;
  text-align: center;
}

.occ-footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

/* Pipe separators between the links, as on a plain text footer. */
.occ-footer__list li { display: flex; align-items: center; }
.occ-footer__list li + li::before {
  content: "|";
  margin: 0 12px;
  color: var(--occ-rule);
}
.occ-footer__list a { color: var(--occ-accent-link); text-decoration: none; }
.occ-footer__list a:hover,
.occ-footer__list a:focus { color: var(--occ-ink); text-decoration: underline; }

.occ-footer__copy {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--occ-muted);
  font-variant-numeric: tabular-nums;
}

.occ-footer__legal {
  margin: 0 auto;
  max-width: 76ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5f6d66;   /* 5.2:1 on the paper tone; a lighter grey fails AA */
}


/* ═══ 8. Elementor compatibility ════════════════════════════════ */

/* Hello Elementor's own header and footer are not used; hide them if a
   version of the parent theme outputs them anyway. */
.occ-site > .site-header.site-header,
.occ-site > .site-footer.site-footer { display: none; }

/* Match Elementor's container width to the theme's shell so a section
   built in Elementor lines up with the header above it. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con > .e-con-inner { max-width: var(--occ-shell); }

/* Elementor buttons pick up the brand without per-widget styling. */
.elementor-button {
  font-family: var(--occ-font-head);
  font-weight: 600;
  border-radius: var(--occ-radius-sm);
}

/* Headings inside Elementor keep the display face. */
.elementor-widget-heading .elementor-heading-title { font-family: var(--occ-font-head); }

/* An Elementor Shortcode widget holding [calc] should not add its own box. */
.elementor-widget-shortcode .chuk { margin-block: 0; }

/* Post content rendered by Elementor Pro's Post Content widget gets the
   same prose rules as the theme's own single.php. */
.elementor-widget-theme-post-content { font-size: 17px; line-height: 1.65; }


/* ═══ 9. The calculator plugin ══════════════════════════════════
   calchub.css already scopes everything under .chuk and sets the same
   tokens. These few rules only settle how it sits in the page.
   ═════════════════════════════════════════════════════════════════ */

.chuk {
  margin-block: 2rem;
  border: 1px solid var(--occ-rule);
  border-radius: 15px;
  overflow: hidden;
}

.chuk .chuk-head { padding: 18px 20px 0; }
.chuk .chuk-grid { gap: 0; }
.chuk .chuk-form,
.chuk .chuk-results { border-radius: 0; border: 0; }
.chuk .chuk-form { border-right: 1px solid var(--occ-rule); }

@media (max-width: 720px) {
  .chuk .chuk-form { border-right: 0; border-bottom: 1px solid var(--occ-rule); }
}

/* Index shortcode: match the related-calculators grid. */
.chuk-index { margin-block: 1.5rem; }


/* ═══ Reduced motion ════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ═══ Print ═════════════════════════════════════════════════════ */

@media print {
  .occ-header, .occ-footer, .occ-sidebar, .occ-related, .occ-skip { display: none; }
  .occ-main { flex: 1 1 100%; }
  body { font-size: 11pt; color: #000; }
  .chuk .chuk-results { background: #fff !important; color: #000 !important; }
}