/*
 * Content and copy on this site is now sourced directly from the live
 * WordPress export (docs/migration/) — real wording, not placeholder.
 *
 * COLOUR: #499d49 is confirmed (2026-09-02, Christa, checking the live
 * site's own page source) as the current live brand green — use it now.
 * A separate forest green (#1F3D2B) is a planned Part 4 rebrand colour,
 * not something to apply during this platform migration.
 *
 * FONTS: confirmed 2026-09-03 via DevTools Computed panel on the live
 * site (see docs/migration/README.md) — Asap for headings/buttons,
 * Open Sans for body text. The theme enqueues five families total
 * (Libre Franklin, Tajawal, Roboto also loaded) but only these two were
 * actually applied on the elements checked (a heading, a body
 * paragraph, a button) — the other three are deliberately not loaded.
 */

:root {
  --color-text: #1a1a1a;
  --color-bg: #ffffff;
  --color-accent: #499d49; /* confirmed live brand green */
  --color-accent-dark: #191919; /* hover colour used alongside the green in the export's social-icon config */
  --color-border: #e0e0e0;
  --color-dark-bg: #010913; /* from the homepage's dark section background image overlay colour */
  --color-footer-bg: #000000; /* confirmed from a screenshot of the live footer */
  --color-footer-text: #cfcfcf;
  --font-body: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
  --font-heading: "Asap", Helvetica, Arial, Verdana, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

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

/* Header / nav */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 1rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

.site-header__logo img { display: block; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-header__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  flex: 0 0 auto;
}

.site-header__call:hover { background: var(--color-accent-dark); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav > ul { position: relative; }

.site-nav li { position: relative; }

.site-nav a {
  text-decoration: none;
  color: var(--color-text);
}

.site-nav a:hover { color: var(--color-accent); }

/*
 * Specificity note: this needs to beat ".site-nav ul" above (which sets
 * display:flex on every <ul> under .site-nav, submenus included) with a
 * plain ".site-nav__sub { display: none }" -- a single class loses to a
 * class+element selector regardless of source order, which left every
 * dropdown permanently open. ".site-nav .site-nav__sub" (two classes)
 * outranks it cleanly instead of reaching for !important.
 */
.site-nav .site-nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0;
  min-width: 240px;
  z-index: 20;
  flex-direction: column;
  gap: 0;
}

.site-nav li:hover > .site-nav__sub { display: flex; }

.site-nav__sub li { padding: 0.4rem 1rem; }

/* Layout primitives (replace WPBakery vc_row/vc_column) */

main { padding: 0 0 2rem; }

.text-block:not(:last-child) { margin-bottom: 0.5rem; }

/* Christa (2026-09-14): headings sitting beside an image in a sibling
   column (the very common "image | heading+text" row layout used on
   About Us, the Financial Services overview cards, individual service
   pages, How Can We Help, and What To Bring To The Meeting) were
   rendering visibly lower than the image's own top edge. Root cause:
   the heading's own browser-default top margin (e.g. ~21px for an h1/h4
   at default sizing) pushes it down, since it's the first real content
   in its column -- nothing was resetting that. Scoped to :first-child
   so headings later in the same text-block keep their normal spacing.

   2026-09-14 follow-up: this rule alone still missed most pages. Cause,
   found via DOM inspection on /services/'s "Retirement Planning" card:
   the original WordPress content often has a bare, unmatched closing
   </p> immediately before the heading (a wpautop artifact, e.g.
   "...<div class=\"text-block\"></p>\n\n<h4>Retirement Planning</h4>").
   convert.py now strips genuine <p></p> pairs, but a *bare* </p> with no
   opening tag can't be regex-matched the same way -- and per the HTML5
   parsing algorithm, the browser itself turns that stray </p> into a
   real, empty <p></p> element inserted right there in the DOM, ahead of
   the heading. That makes the empty <p> :first-child instead of the
   heading, silently defeating the rule above. Since the browser always
   inserts exactly one such empty <p> per stray tag, catching "heading
   immediately after an empty first-child <p>" covers it without needing
   to fix every one of these in the source content. */
.text-block > h1:first-child,
.text-block > h2:first-child,
.text-block > h3:first-child,
.text-block > h4:first-child,
.text-block > h5:first-child,
.text-block > h6:first-child,
.text-block > p:empty:first-child + h1,
.text-block > p:empty:first-child + h2,
.text-block > p:empty:first-child + h3,
.text-block > p:empty:first-child + h4,
.text-block > p:empty:first-child + h5,
.text-block > p:empty:first-child + h6 {
  margin-top: 0;
}

/* The empty <p> itself (see above) still carried the browser's own
   default paragraph margin (1em top+bottom, collapsing to ~16px) even
   with the heading's margin zeroed -- an empty paragraph with no
   content has no legitimate reason to take up vertical space anywhere
   in a .text-block, so remove it outright rather than special-case its
   margin on top of the selector above. */
.text-block > p:empty {
  display: none;
}

/* Team pages (Prateeksha, Jack Webb, Tadgh Dupuy, Daniel Stevens) wrap
   their headshot in a centered <p> instead of a bare <img> like the
   other "image | heading" rows -- that <p>'s own default top margin
   pushed the photo down while the heading beside it (already flush via
   the :first-child rule above) stayed at the column top, misaligning
   the two by that same ~16px. Christa Kennerley's own team page doesn't
   use this <p> wrapper, which is why it wasn't affected. */
.text-block > p:first-child:has(> img:only-child) {
  margin-top: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  gap: 1.5rem;
}

.row--inner { max-width: none; margin: 0; padding: 0; width: 100%; }

.row--bg {
  max-width: none;
  width: 100%;
  margin: 0;
  /* Solid fallback so the white text stays legible if the background
     image is slow to load or fails -- otherwise it's white-on-white
     until the image arrives. --color-dark-bg is the real overlay colour
     from this same section's original background image. */
  background-color: var(--color-dark-bg);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.row--bg .col { color: #fff; }

/* Reviews widget (api/reviews.js -- Google Places API, server-side) */

.reviews-widget__status {
  text-align: center;
  opacity: 0.85;
}

/* Multi-card carousel (rebuilt 2026-09-05 to match a real screenshot of
   the live site's own Reviews Feed Pro widget) -- several review cards
   visible at once, a plain "5 [stars] Over N Reviews" summary line, a
   standalone pause toggle (no prev/next arrows), and square dot
   pagination. See convert.py's r_reviews_feed for the markup/script;
   `--reviews-star-color` is the plugin's own green, not part of the
   forest-green/brass palette (kept separate so it doesn't drift if
   --color-accent changes for buttons/links elsewhere). */
.reviews-widget {
  --reviews-star-color: #4CAF50;
  max-width: 1140px;
  margin: 0 auto;
}

.reviews-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.reviews-widget__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-weight: 700;
}

.reviews-widget__rating-number { font-size: 1.4rem; }

.reviews-widget__count {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.75;
}

.reviews-carousel {
  position: relative;
}

.reviews-carousel__viewport {
  overflow: hidden;
}

.reviews-carousel__track {
  display: flex;
  gap: 1rem;
  transition: transform 0.4s ease;
}

.reviews-widget__card {
  flex: 0 0 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1.25rem;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.reviews-widget__byline {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.reviews-widget__avatar {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.reviews-widget__who { flex: 1 1 auto; min-width: 0; }

.reviews-widget__author {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
}

.reviews-widget__time {
  display: block;
  font-size: 0.75rem;
  opacity: 0.65;
}

.reviews-widget__google-mark { flex: 0 0 auto; }

.reviews-widget__stars {
  color: var(--reviews-star-color);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}

.reviews-widget__text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.reviews-carousel__toggle {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  font-size: 0.7rem;
  cursor: pointer;
}

.reviews-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.reviews-carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  border: 1px solid var(--reviews-star-color);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.reviews-carousel__dot.is-active { background: var(--reviews-star-color); }

.col { flex: 1 1 0; min-width: 0; }
.col--1-1 { flex-basis: 100%; }
.col--1-2 { flex-basis: calc(50% - 0.75rem); }
.col--1-3 { flex-basis: calc(33.333% - 1rem); }
.col--2-3 { flex-basis: calc(66.666% - 0.75rem); }
.col--1-4 { flex-basis: calc(25% - 1.125rem); }
/* Found 2026-09-05 while widening the reviews widget: these four
   fraction classes exist in the generated WPBakery content (homepage's
   reviews section is a real col--1-12 + col--5-6 pair) but had no CSS
   rule, so they silently fell back to the generic .col's equal 50/50
   split -- e.g. col--5-6 was rendering at half width instead of ~83%,
   which is why the new multi-card reviews layout looked cramped.
   Same deduction formula as the rules above (fraction x 1.5rem row gap). */
.col--1-12 { flex-basis: calc(8.333% - 0.125rem); }
.col--5-12 { flex-basis: calc(41.667% - 0.625rem); }
.col--7-12 { flex-basis: calc(58.333% - 0.875rem); }
.col--5-6 { flex-basis: calc(83.333% - 1.25rem); }

@media (max-width: 700px) {
  .col { flex-basis: 100% !important; }
}

.spacer { width: 100%; }

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

/* Banner cards (interactive_banner_2 replacement) */

/*
 * Stacked layout (image on top, text below in normal flow) rather than
 * text overlaid on the image: overlay text at a fixed vertical offset
 * breaks as soon as a title or description wraps to more lines than the
 * shortest card's does -- "Self Managed Superannuation" collided with
 * its own description below it. Flowing text below the image scales to
 * any length without collision, at the cost of not matching the live
 * site's overlay-on-hover-darkened-image look exactly (a presentation
 * detail, not wording -- see the Master Plan's "structure first, content
 * later" framing).
 */
.banner-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* .row's default align-items:stretch equalises this .col,
    but a normal-flow block child doesn't inherit that automatically --
    without this, cards with shorter description text render visibly
    shorter than their siblings instead of matching row height. */
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.banner-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.85;
}

.banner-card h3, .banner-card p {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0 1rem;
}

.banner-card h3 { font-size: 1.15rem; margin: 0.9rem 0 0.4rem; }
.banner-card p { font-size: 0.9rem; padding-bottom: 1rem; }

/* Buttons */

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1.4rem;
  border-radius: 3px;
  font-weight: 600;
  font-family: var(--font-heading);
}

.btn:hover { background: var(--color-accent-dark); }

.btn--call { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn--call__icon { flex: 0 0 auto; }

/* FAQ accordion (usa_container/usa_item) and vc_tta accordion */

.faq-accordion, .accordion { max-width: 900px; margin: 1rem auto; padding: 0 1.5rem; }

.faq-item, .accordion-item {
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
}

.faq-item summary, .accordion-item summary {
  cursor: pointer;
  font-weight: 600;
}

.faq-item__body, .accordion-item__body { padding-top: 0.5rem; }

/* Info list (numbered process steps) */

.info-list {
  max-width: 900px;
  margin: 1rem auto;
  padding: 0 1.5rem;
  list-style: decimal;
}

.info-list__item { margin-bottom: 0.75rem; }
.info-list__icon { width: 32px; height: 32px; vertical-align: middle; margin-right: 0.5rem; }

/* Social icons */

.social-icons { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.social-icon { color: var(--color-accent); text-decoration: none; font-size: 0.9rem; }
.social-icon:hover { color: var(--color-accent-dark); }

/* Contact form */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
}

.contact-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-form__row > label { flex: 1 1 200px; }

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__note {
  font-size: 0.9rem;
  background: #f6f6f6;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
}

.contact-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-form fieldset legend { font-weight: 600; padding: 0 0.4rem; }

.contact-form__radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.contact-form__radio-group-label { font-weight: 600; margin-right: 0.25rem; }

.contact-form__checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
}

.contact-form fieldset label,
.contact-form__radio-group label,
.contact-form__checkbox-grid label {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal;
}

.contact-form fieldset input[type="radio"],
.contact-form fieldset input[type="checkbox"] {
  width: auto;
  padding: 0;
}

.contact-form button {
  align-self: flex-start;
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.7rem 1.8rem;
  border-radius: 3px;
  font-weight: 600;
  font-family: var(--font-heading);
  cursor: pointer;
}

.contact-form button:hover { background: var(--color-accent-dark); }

.contact-map { display: block; border-radius: 4px; }

/* Team + blog listings */

.team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1140px;
  margin: 1rem auto;
  padding: 0 1.5rem;
}

.team-list__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0.75rem;
}

.team-list__item {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem;
}

.team-list__item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.team-list__title {
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin: -0.5rem 0 0.75rem;
}

.team-list__read-more {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.team-list__read-more:hover { text-decoration: underline; }

/* Blog card grid (refreshed 2026-09-05 -- was a bare title+date list).
   Card shell mirrors .banner-card's treatment (white card, rounded
   corners, hover lift) so it reads consistently with the rest of the
   refresh, without needing a separate refresh-only stylesheet rule --
   these cards look reasonable on both the old and new palettes since
   they use var(--color-accent)/var(--color-border), same as before. */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1140px;
  margin: 1rem auto;
  padding: 0 1.5rem;
}

.blog-list__item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-list__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.blog-list__thumb {
  display: block;
  aspect-ratio: 16 / 9;
}
.blog-list__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-list__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.blog-list__body h3 {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.blog-list__date { color: #666; font-size: 0.8rem; margin: 0 0 0.6rem; }

.blog-list__excerpt {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  opacity: 0.85;
  margin: 0 0 0.75rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog-list__read-more {
  display: inline-block;
  margin-top: auto;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.blog-list__read-more:hover { text-decoration: underline; }

/* Blog post */

.post { max-width: 800px; margin: 0 auto; padding: 1rem 1.5rem; }
.post__meta { color: #666; font-size: 0.9rem; }

/* 2026-09-23 fix, revised: this used to force a 420px-tall crop
   (object-fit: cover) on featured images that are actually ~700x700
   squares with their headline text sitting right at the top edge --
   cover's default center crop was cutting well into that headline on
   every article (confirmed: ~44% of the image's height was being
   cropped, split between top and bottom, and the top ~13% where these
   images' headlines live was inside that cropped band).
   First attempt dropped max-height/object-fit entirely (width:100%,
   height:auto), which removed the crop but rendered ~700px-tall for a
   square image in a ~750px-wide column -- no cropping, but overwhelmed
   the page. This version caps the box with max-height instead of
   forcing width:100%, and leaves both width/height as auto so the
   browser scales the image down to whichever of max-width/max-height
   is more restrictive while preserving its aspect ratio -- no
   object-fit needed at all (that property only matters when width AND
   height are both forced independent of the image's own ratio, which
   is exactly what caused the original crop). A square image is capped
   at 480px tall (and equally wide); a wider/shorter photo just fills
   the column width as before, since 480px isn't its limiting
   dimension. */
.post__hero {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  margin: 1rem auto 1.5rem;
  border-radius: 6px;
}

/* Article content tables (2026-09-17): the raw WordPress content ships
   bare <table>/<td> markup with no theme CSS behind it here, so without
   this it renders as an unstyled, unreadable HTML table. Scoped to
   `.post` only -- /fees/ has its own separate `.fees-page table` rules
   and no other generated page currently contains a <table>. */
.post table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.post table td,
.post table th {
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.post table th,
.post table tr:first-child td {
  background: rgba(73, 157, 73, 0.08);
  font-weight: 600;
}
.post table tr:nth-child(even) td {
  background: #fafafa;
}
@media (max-width: 640px) {
  .post table { display: block; overflow-x: auto; }
}

/* Footer */

.site-footer {
  margin-top: 2rem;
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer__inner { max-width: 1140px; margin: 0 auto; padding: 3rem 1.5rem 1.5rem; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__heading {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 1rem;
}

.site-footer__col p { margin: 0 0 0.75rem; font-size: 0.9rem; }

.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li {
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__col a { color: var(--color-footer-text); text-decoration: none; font-size: 0.9rem; }
.site-footer__col a:hover { color: var(--color-accent); }

.site-footer .social-icon { color: var(--color-footer-text); }
.site-footer .social-icon:hover { color: var(--color-accent); }

.site-footer__licence { font-size: 0.8rem; color: #9a9a9a; }

.site-footer__disclaimer {
  font-size: 0.85rem;
  color: #9a9a9a;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* "DSDS" footer calendar widget -- see footer.njk for why this is
   built client-side rather than baked in at build time. */
.site-footer__calendar {
  margin-bottom: 1.5rem;
}

.footer-calendar__table {
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--color-footer-text);
}

.footer-calendar__table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

.footer-calendar__table th,
.footer-calendar__table td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.35rem 0.6rem;
  text-align: center;
}

.footer-calendar__table th {
  color: #9a9a9a;
  font-weight: 600;
}

.footer-calendar__table td.is-today {
  color: var(--color-accent);
  font-weight: 700;
}

.footer-calendar__nav {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #9a9a9a;
}

.site-footer__bottom { font-size: 0.85rem; color: #9a9a9a; }
.site-footer__bottom a { color: var(--color-footer-text); }
.site-footer__bottom a:hover { color: var(--color-accent); }

/* "AS SEEN ON" press banner (generate.py's wrap_logo_marquee /
   AS_SEEN_ON_MARKS). Went through several rounds: plain grey text ->
   per-brand colour -> per-brand icon/wordmark reproductions in a
   static grid -> a scrolling banner with colour only -> real per-brand
   fonts added back in -> this round (2026-09-05): the icon/wordmark
   marks matching her reference image, now animated in the marquee
   instead of laid out in a static grid ("needs to visually match the
   attached but also scrolling across the screen please"). */
.logo-marquee {
  overflow: hidden;
  /* Full-bleed: breaks out of the centred, max-width .row it sits
     inside so the strip spans the whole browser viewport, not just the
     1140px content column. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: 0.5rem 0;
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee-scroll 40s linear infinite;
}

/* Spacing/divider wrapper only -- colour and font live on the nested
   .asn-mark--* classes below, since each mark now carries its own icon
   and/or multi-colour text (e.g. MarketWatch's two-tone wordmark). */
.logo-marquee__name {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 2.5rem;
  padding-right: 2.5rem;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* Per-brand marks: simple CSS-only shapes (circles, squares, bars)
   built to match Christa's reference image, NOT traced from each
   outlet's real vector logo files, which I don't have access to.
   Colours and the three loaded fonts (Playfair Display/Roboto Slab/
   Baloo 2, see base.njk) are best-recollection approximations of each
   outlet's real branding, not a verified source -- worth a
   sanity-check against each outlet's actual current branding before
   this goes live. Most outlet wordmarks are hand-drawn logotypes, not
   text set in an installable font at all -- Bloomberg/Flipboard/
   Benzinga/Nasdaq/AsiaOne stay on the site's own bold Asap since a
   real close match doesn't exist as a free webfont; StreetInsider.com,
   AP and Yahoo Finance get a real font family that's genuinely closer
   to their actual typographic character. */
.asn-mark { display: inline-flex; align-items: center; white-space: nowrap; }

/* Bloomberg -- plain bold wordmark, no icon in the real logo either. */
.asn-mark--bloomberg { font-weight: 800; font-size: 1.4rem; color: #000; letter-spacing: -0.01em; }

/* MarketWatch -- "Market" black, "Watch" green italic, one word. */
.asn-mark--marketwatch { font-weight: 800; font-size: 1.4rem; }
.asn-mark--marketwatch .mw-market { color: #000; }
.asn-mark--marketwatch .mw-watch { color: #00A651; font-style: italic; }

/* StreetInsider.com -- editorial italic serif wordmark + real tagline. */
.asn-mark--streetinsider { flex-direction: column; align-items: flex-start; }
.asn-mark--streetinsider .si-name {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem;
  font-style: italic; color: #1B4F91;
}
.asn-mark--streetinsider .si-tagline {
  font-size: 0.65rem; font-style: italic; color: #1B4F91; opacity: 0.85; margin-top: 1px;
}

/* Medium -- two-circle mark (filled + ring) + wordmark. */
.asn-mark--medium { gap: 6px; }
.med-icon { position: relative; width: 22px; height: 20px; flex: 0 0 auto; }
.med-icon::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px;
  border-radius: 50%; background: #000;
}
.med-icon::after {
  content: ""; position: absolute; left: 9px; top: 3px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid #000; background: transparent;
}
.med-text { font-weight: 600; font-size: 1.3rem; color: #000; }

/* Flipboard -- red square "F" mark + bold caps wordmark. */
.asn-mark--flipboard { gap: 7px; }
.fb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: #E12828; color: #fff;
  font-weight: 800; font-size: 0.85rem; flex: 0 0 auto;
}
.fb-text { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; color: #1a1a1a; }

/* Benzinga -- bold navy caps wordmark. */
.asn-mark--benzinga {
  font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; color: #0B2340; text-transform: uppercase;
}

/* AP -- bold slab wordmark with a red rule underneath. */
.asn-mark--ap {
  font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 1.4rem; color: #000;
  border-bottom: 4px solid #D6001C; padding-bottom: 2px; line-height: 1;
}

/* Nasdaq -- two skewed bars mark + wordmark. */
.asn-mark--nasdaq { gap: 6px; }
.nq-icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.nq-icon::before, .nq-icon::after {
  content: ""; position: absolute; top: 0; width: 6px; height: 18px; background: #0092D0;
  transform: skewX(-14deg);
}
.nq-icon::before { left: 1px; }
.nq-icon::after { left: 10px; }
.nq-text { font-weight: 800; font-size: 1.3rem; color: #0092D0; }

/* AsiaOne -- "asia" black, an orange circle standing in for the "O", "ne" orange. */
.asn-mark--asiaone { font-weight: 800; font-size: 1.3rem; }
.asn-mark--asiaone .ao-asia { color: #000; }
.asn-mark--asiaone .ao-ne { color: #FF7A00; }
.ao-o {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #FF7A00; margin: 0 1px; vertical-align: middle;
}

/* Yahoo Finance -- rounded purple "yahoo!" with smaller "finance" underneath. */
.asn-mark--yahoo { flex-direction: column; align-items: flex-end; line-height: 1; }
.yh-yahoo { font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 1.4rem; color: #6001D2; }
.yh-finance { font-size: 0.75rem; font-weight: 600; color: #6001D2; margin-top: 2px; }

/* Seven Step Advice Process -- an alternating zigzag diagram
   (generate.py's build_process_flow_html, shared by the homepage and
   /how-can-we-help/advice-process/). Rebuilt several times: static
   image -> flat card grid -> single-column icon timeline -> this round
   (2026-09-07, Christa sent a board of "7 step process diagram"
   templates -- zigzag/chain diagrams with alternating chips -- asking
   for that style). Content alternates left/right of a central spine
   with the icon node sitting on the line itself, a real CSS grid, not
   a traced copy of any one stock template. */
.process-flow {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.process-flow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--color-border);
  transform: translateX(-50%);
}

.process-flow__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.process-flow__node-col {
  display: flex;
  justify-content: center;
  z-index: 1;
}

.process-flow__node {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--color-bg, #fff);
}

.process-flow__icon {
  width: 1.6rem;
  height: 1.6rem;
}

.process-flow__side--left { text-align: right; }
.process-flow__side--right { text-align: left; }

.process-flow__number {
  display: block;
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.process-flow__side h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.process-flow__side p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

/* Below the point where two side-by-side text columns get cramped,
   collapse to one column: icon always first (order:-1 pulls the node
   column ahead of the DOM regardless of which side has the real
   content), content stacked underneath, centred. */
@media (max-width: 680px) {
  .process-flow__row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 0;
  }
  .process-flow__node-col { order: -1; }
  .process-flow__node { width: 2.75rem; height: 2.75rem; }
  .process-flow__icon { width: 1.3rem; height: 1.3rem; }
  .process-flow__side--left, .process-flow__side--right { text-align: center; }
}