/* Additions to the imported Zephyr stylesheet (public/css/site.css). */

/* Interior banners used parallax.js; show the image with CSS instead. Cover and center
   match parallax.js's framing at the top of the page. Don't use background-attachment: fixed:
   it sizes the image to the whole viewport, which zooms in on a 250px band. */
.interior-banner { background-size: cover; background-position: center; }

/* /blog cards: let the text column fill the row, so a short excerpt doesn't leave a narrow card. */
.blog-content { flex: 1 1 auto; }

/* Inline SVGs that replace Font Awesome icons. */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }

/* site.css draws a few icons (quotes, footer carets, event pins) with Font Awesome 5
   pseudo-elements. Self-host only the solid face it needs (Font Awesome Free, SIL OFL 1.1). */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/vendor/fontawesome/fa-solid-900.woff2") format("woff2"), url("/vendor/fontawesome/fa-solid-900.woff") format("woff");
}

/*
 * 2026 theme: the importer rewrites the 2021 red to Autumn Leaf. White on Autumn Leaf
 * (3.66:1) and Autumn Leaf on white (3.66:1) pass WCAG AA only as large text, so:
 */

/* Calls to action: 19px+ bold. */
.btn-primary, .btn-primary:visited, .button, .button:visited,
.std-padding-main-color .tile-content-inner .btn-primary,
.std-padding-main-color .tile-content-inner .btn-primary:visited {
  background: var(--rci-cta-bg);
  color: var(--rci-cta-text);
  font-size: var(--rci-cta-font-size);
  font-weight: var(--rci-cta-font-weight);
  padding: 8px 22px;
}

/* Mobile menu: the current and hovered item sits on Autumn Leaf. */
.nav > nav > ul > li > a { font-size: var(--rci-cta-font-size); font-weight: var(--rci-weight-bold); }

/* Submenu items are small text on navy, where Autumn Leaf is 2.4:1; use amber (4.57:1). */
.nav ul ul li.current > a, .nav ul ul li a:focus, .nav ul ul li a:hover { color: var(--rci-accent-on-dark); }

/* Small link text turned red on hover; Autumn Leaf fails at that size, so use navy. */
a:active, a:hover, .dark-link:focus, .dark-link:hover, .copyright a:focus, .copyright a:hover { color: var(--rci-navy); }
.white .dark-link:focus, .white .dark-link:hover { color: var(--rci-accent-on-dark); }

/* h4 is 22px bold Autumn Leaf (large text, passes). Post copy sometimes shrinks it inline. */
h4 [style*="font-size: 16px"], h4 [style*="font-size: 15px"], h4 [style*="font-size: 14px"] { color: var(--rci-text); }

/*
 * Logo: the official SVG (Logo Set/Ralston_Logo_secondary.svg) at 84.5% of the header height,
 * centered: artwork about 60px tall in the 114px desktop header. That is slightly less than one
 * "R" of clear space; Gary chose presence over the strict rule (2026-10-17).
 */
header { --rci-header-h: 94px; --rci-header-pad: 20px; --rci-logo-h: calc(94px * 0.845); }
@media (min-width: 768px) { header { --rci-header-h: 110px; --rci-logo-h: calc(110px * 0.845); } }
@media (min-width: 992px) {
  header { --rci-header-h: 114px; --rci-header-pad: 25px; --rci-logo-h: calc(114px * 0.845); }
  /* The header shortens on scroll; the logo keeps its size, as it did on Zephyr. */
  header.dark-header { --rci-header-h: 104px; --rci-header-pad: 20px; }
}
header .logo img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--rci-logo-h);
  /* Center in the header: pull the image up and down past the padding. */
  margin: calc((var(--rci-header-h) - 2 * var(--rci-header-pad) - var(--rci-logo-h)) / 2) 0;
}
/*
 * Footer logo: artwork 231px wide, as on Zephyr. The SVG pads its artwork (left 22.5, top 17.4 of
 * 278.21 x 107.43 units), so at 273px wide the image is pulled left and up by that padding to line
 * the artwork up with the text below it. Only from 768px, where the footer is left-aligned.
 */
.footer-logo img { display: block; width: 236px; max-width: 100%; height: auto; margin: 0 auto; }
@media (min-width: 768px) {
  .footer-logo, .footer-logo:visited { max-width: none; }
  .footer-logo img { width: 273px; max-width: none; margin: -17px 0 -23px -22px; }
}

/* Text links on porcelain panels: blue is 4.32:1 there (fails AA), navy is 7.9:1. Social icons keep their white glyph. */
:is(.std-padding-gray, .full-width-wrapper.gray-bg) a:not(.btn-primary):not(.button):not(.social a) { color: var(--rci-navy); }
:is(.std-padding-gray, .full-width-wrapper.gray-bg) a:not(.btn-primary):not(.button):not(.social a):is(:hover, :focus) { color: var(--rci-near-black); text-decoration: underline; }

/*
 * ActiveCampaign forms (1, 7, 11). AC injects its own CSS at runtime under ID selectors with
 * !important (IBM Plex Sans, black text, #979797 borders, pure red markers, a 14px blue button).
 * `#rci` is the <body> id in Site.astro; it outranks AC's rules so the forms follow the brand.
 */
#rci form[id^="_form_"],
#rci form[id^="_form_"] * { font-family: var(--rci-font) !important; }
#rci form[id^="_form_"] { color: var(--rci-text) !important; border-color: var(--rci-lavender) !important; }
#rci form[id^="_form_"] ._form-branding { font-weight: var(--rci-weight-regular) !important; color: var(--rci-text-muted) !important; }
#rci form[id^="_form_"] :is(input, textarea, select) {
  color: var(--rci-text) !important;
  border: 1px solid var(--rci-text-muted) !important;  /* 7.15:1; form controls need 3:1 */
}
#rci form[id^="_form_"] :is(input, textarea)::placeholder { color: var(--rci-text-muted); opacity: 1; }
#rci form[id^="_form_"] .field-required { color: var(--rci-navy) !important; }
#rci form[id^="_form_"] .sms_consent_checkbox .sms_consent_message { color: var(--rci-text-muted) !important; }
#rci form[id^="_form_"] :is(input, textarea)._has_error,
#rci form[id^="_form_"] .phone-input-error { border-color: var(--rci-autumn-leaf) !important; }
#rci form[id^="_form_"] input[type="checkbox"]._has_error { outline-color: var(--rci-autumn-leaf) !important; }
#rci form[id^="_form_"] ._error-inner {
  background-color: var(--rci-near-black) !important;
  color: var(--rci-white) !important;
  box-shadow: 0 1px 4px rgba(35, 31, 32, .3) !important;
}
#rci form[id^="_form_"] ._error._above ._error-arrow { border-top-color: var(--rci-near-black) !important; }
#rci form[id^="_form_"] ._error._below ._error-arrow { border-bottom-color: var(--rci-near-black) !important; }
#rci form[id^="_form_"] .phone-error { color: var(--rci-text) !important; }
#rci form[id^="_form_"] .iti--separate-dial-code .iti__selected-flag:hover { background-color: rgba(35, 31, 32, .05) !important; }
#rci form[id^="_form_"] ._submit {
  padding: 8px 22px !important;     /* same height as the site's other CTAs (43px) */
  line-height: 1.42857 !important;
  background: var(--rci-cta-bg) !important;
  color: var(--rci-cta-text) !important;
  font-size: var(--rci-cta-font-size) !important;
  font-weight: var(--rci-cta-font-weight) !important;
}
#rci form[id^="_form_"] ._submit.processing::before {
  background-image: linear-gradient(var(--rci-cta-bg), var(--rci-cta-bg)), conic-gradient(var(--rci-cta-bg), var(--rci-white)) !important;
}

/* Footer position statement: Semibold, the brand's weight for emphasized content (Gary, 2026-10-17). */
footer .footer-info p { font-weight: var(--rci-weight-semibold); }

/* Posts from the blog collection (src/pages/[post].astro): Markdown images carry no classes. */
#rci .blog-post-body img {
  display: block;
  max-width: min(100%, 728px); /* Substack's column width */
  height: auto;
  margin: 0 auto;
}

/* « Previous | All Posts | Next » at the foot of every post (src/lib/blog.ts). */
.post-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px; width: 100%; font-size: 19px; font-weight: 700; }
.post-nav-bar, .post-nav-end { color: var(--rci-text-muted); }

/* Share links above the post nav (src/lib/blog.ts). White on navy 8.74:1; on blue (hover) 4.79:1. */
.share-bar { text-align: center; margin: 10px 0 0; }
.share-bar-label { font-weight: 600; margin: 0 0 10px; }
.share-bar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share-bar-links a, .share-bar-links a:visited, .share-bar-links button {
  display: inline-block; background: var(--rci-navy); color: var(--rci-white); border: 0; border-radius: 50px;
  padding: 6px 16px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.share-bar-links a:hover, .share-bar-links a:focus, .share-bar-links button:hover, .share-bar-links button:focus {
  background: var(--rci-blue); color: var(--rci-white); text-decoration: none;
}
@media print { .share-bar, .post-nav { display: none; } }