/* CFUG brand override for the Universal theme.
   The theme's 7 "style.<name>.css" variants differ only in these :root
   custom properties (see themes/hugo-universal-theme/static/css/style.*.css).
   Redeclaring them here -- loaded after the base stylesheet -- reskins
   every button/link/nav/pagination in the theme to the real CFUG brand
   orange (#F47920, extracted from the logo artwork itself) without
   touching the vendored theme files. Ramp derived by applying the same
   HSL lightness/saturation deltas the theme's own "red" variant uses
   relative to its primary accent, so contrast relationships stay the
   same, just recolored. */
/* Homepage hero used a flat theme texture with no connection to the
   practice's own imagery. Pre-blurred via ImageMagick, not a CSS filter
   (avoids the edge halo a runtime blur causes, costs nothing at paint
   time) so the hero text stays readable over it at any crop. The
   interior-page title band gets the same treatment in site-color.css,
   which loads after this file and would otherwise win the cascade. */
.home-carousel {
  background: linear-gradient(135deg, rgba(60, 30, 10, 0.32), rgba(244, 121, 32, 0.18)), url('/images/hero-amsterdam-tower.jpg') center center / cover no-repeat;
}
/* Taller hero so more of the photo actually shows -- the theme's default
   60px/20px top/bottom padding barely reveals the background image. */
/* Owl Carousel's base CSS sets display:none on .owl-carousel until its JS
   finishes loading (jQuery, Bootstrap, owl.carousel.min.js are all deferred)
   and initializes it, so the doctor's photo was invisible for a beat after
   first paint -- reading as a lazy-loaded image. There's only one hero slide
   today, so nothing needs JS to position/paginate it; force it visible
   immediately and let the carousel enhance it once it loads. This file loads
   before css/owl.carousel.css in headers.html, so !important is required to
   beat that later same-specificity rule. */
.home-carousel .owl-carousel {
  padding-top: 110px;
  padding-bottom: 70px;
  display: block !important;
}
/* The theme's .dark-mask is a 90%-opacity solid-color layer meant to sit
   over its flat texture background -- at that strength it nearly blots out
   a real photo entirely. The gradient above already handles text contrast,
   so this just needs a light brand tint tying the photo to the palette. */
.home-carousel .dark-mask {
  opacity: 0.25;
}
/* The h1 mostly lands over a darker, shadowed part of the photo, but the
   description text and buttons below it sit over a lighter/busier patch
   and lose contrast. A soft dark backing panel behind just the text
   column fixes it regardless of what's behind it, without darkening the
   photo (or the doctor's portrait) sitewide. */
.home-carousel .col-sm-5 {
  background: var(--shadow-tint-overlay);
  padding: 24px 28px;
  border-radius: 0;
}
/* Accent roles.

   #F47920 is the logo orange and was, until now, the single accent used for
   everything: link text, the primary button's text and border, icons, pill
   text, and as a solid fill under white text. It fails WCAG AA in every one
   of those roles -- 2.76:1 on white, which misses the 4.5:1 floor for text
   and even the 3:1 floor for borders and icons, and 2.76:1 again as a fill
   under white text. Worth stating plainly: that is *worse* than the #999999
   this stylesheet already bans a few rules below for the same reason.

   The fix is a role split rather than a new colour. The readable steps were
   already in this ramp (#a64a08 was --navbar-border-top), so the palette is
   unchanged in kind -- what changed is which step carries meaning:

     --brand-orange     the mark itself. Decorative only: the logo, the hero
                        and page-title gradients, the input focus glow, the
                        3px band rule. None of these carry text contrast, and
                        WCAG exempts logotypes, so the brand reads unchanged
                        at a glance.
     --primary-accent   anything that must be read or must show a boundary:
                        link text, button text and borders, icons, pill text,
                        and solid fills sitting under white text.
     --accent-on-dark   the accent on the #555555 footer panel, where the fix
                        runs the other way -- darkening there makes contrast
                        worse, so this step is lighter, not darker.

   Every value below is annotated with its computed ratio against the surface
   it actually appears on. */
:root {
  /* Decorative brand mark -- never used where contrast is measured. */
  --brand-orange: #f47920;

  --primary-accent: #a64a08;        /* 5.83:1 on white; white on it 5.83:1 */
  --primary-accent-hover: #8f4207;  /* 7.12:1 on white -- darkens on hover   */
  --navbar-border-top: #a64a08;
  --button-border: #a64a08;         /* 5.83:1 as a border on white (needs 3) */
  --link-focus: #8f4207;            /* 7.12:1 -- link darkens on hover/focus */
  --form-shadow: rgba(244, 121, 32, 0.6);  /* brand glow, not a contrast pair */
  --pagination-bg: #fbd1b2;
  --link-hover-bg: #8f4207;         /* used as a fill under white: 7.12:1    */
  --navbar-focus: #f9b381;
  --accent-on-dark: #fbd1b2;        /* 5.28:1 on the #555555 footer panel    */

  /* Shadow tint scale. These alphas were previously written as literals in
     both this file and site-color.css, and 0.12 appeared in two spellings
     (`rgba(0,0,0,0.12)` and `rgba(0, 0, 0, 0.12)`) for the same colour, so
     nothing tied the depth steps together. Named steps make the scale
     explicit and keep one spelling. */
  --shadow-tint-subtle: rgba(0, 0, 0, 0.06);
  --shadow-tint-soft: rgba(0, 0, 0, 0.09);
  --shadow-tint-card: rgba(0, 0, 0, 0.12);
  --shadow-tint-raised: rgba(0, 0, 0, 0.15);
  --shadow-tint-strong: rgba(0, 0, 0, 0.35);
  --shadow-tint-overlay: rgba(0, 0, 0, 0.4);

  /* Hairline greys used for rules and input borders. */
  --hairline-strong: #ddd;
  --hairline-soft: #e2e2e2;
}

/* The CFUG logo is a stacked wordmark-over-triangle mark, not a wide
   horizontal lockup -- at the theme's default 42px nav height the
   "Central Florida UroGynecology" text becomes nearly illegible. */
.navbar-brand img {
  max-height: 54px;
}
.navbar {
  min-height: 78px;
}
.navbar-brand {
  height: 78px;
  padding-top: 4px;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
}

/* Accessibility: base type sized up for a mostly-65+ patient audience.
   Bootstrap 3 (this theme's base) hardcodes px sizes throughout rather
   than using rem, so this targets the highest-impact reading surfaces
   instead of attempting a full-stylesheet rem conversion.
   NOTE: this theme never sets `html { font-size }`, so `rem` units below
   would silently resolve against the browser default (16px) rather than
   this 19px base -- every accessibility rule here uses px, not rem. */
body {
  font-size: 19px;
  line-height: 1.75;
}

#post-content p,
#content .container > .row > .col-md-12 p,
.intro,
.box-simple p {
  font-size: 19px;
  line-height: 1.75;
}

/* Sitewide contrast pass for a 65+ audience. This theme uses #999999
   (~2.85:1 against white -- fails WCAG AA's 4.5:1 minimum for normal
   text) as its default "muted" text color in several places that
   carry real patient-facing content, not just decorative chrome.
   Matched everything below to #555555 (~7.5:1, passes AAA), the same
   color the theme already uses for its own primary nav links and base
   body text -- so this isn't a new color, just applying the theme's
   own better-contrast choice consistently instead of inconsistently. */
.box-simple p,
.box-image-text .content p,
.box-image-text.blog .author-category,
.navbar ul.dropdown-menu li a,
#blog-post .text-muted {
  color: #555555;
}

/* Footer is the theme's worst offender: #999999 text (and, for links
   outside a <ul>, the brand orange) on a #555555 dark background --
   ~2.6:1 and ~2.7:1 respectively, both well under the 4.5:1 AA floor.
   This is the block with the phone number, hours, and address a
   patient is most likely to be squinting at, so it gets the strongest
   fix: near-white body text (~7.4:1) and white underlined links
   (~7.4:1) so links are distinguishable by more than color alone,
   with the brand orange reserved for hover/focus feedback. */
#footer {
  color: #f2f2f2;
}
#footer ul a,
#footer p a {
  color: #ffffff;
  text-decoration: underline;
}
/* The footer is the one surface where the accent has to get *lighter*, not
   darker: it sits on the #555555 panel, so the readable accent used
   everywhere else (#a64a08) would drop to 1.5:1 here. --accent-on-dark is
   the same pale step already used as the pagination tint, at 5.28:1. */
#footer ul a:hover,
#footer p a:hover {
  color: var(--accent-on-dark);
}

/* The topbar is this site's other dark panel (#555555), and it had the same
   problem the footer did -- with one made worse by the accent split. The
   phone number was the brand orange at 2.70:1; once --primary-accent moved to
   the darker readable step it became #a64a08 on #555555, which is 1.28:1 and
   effectively invisible. On a dark surface the accent has to get lighter, and
   this bar was missed when the footer got that treatment.

   The whole bar is also underweight for the audience. The theme sets it at
   12px, which is the smallest type on a site whose entire accessibility
   posture is built around readers who are mostly 65+ -- and the thing set in
   it is the practice's phone number, the single most valuable element on the
   page. It moves to 15px, with the number itself at 17px/600 so it reads as
   the actionable item rather than part of the sentence, and enough padding to
   give it a real tap target (it measured 74x14px before, under the 24x24
   minimum).

   White + underline rather than a tinted orange, matching the footer's rule:
   links on the dark panels are distinguishable by more than colour alone,
   with the warm tint kept for hover feedback. */
#top p {
  font-size: 15px;
}
.topbar-phone {
  color: #ffffff;              /* 7.46:1 on #555555 */
  text-decoration: underline;
  font-size: 17px;
  font-weight: 600;
  padding: 6px 3px;
  display: inline-block;
  line-height: 1.2;
}
.topbar-phone:hover,
.topbar-phone:focus {
  color: var(--accent-on-dark); /* 5.28:1 on #555555 */
  text-decoration: underline;
}

/* Social/phone glyphs sat at the theme's #999999 on the same panel -- 2.62:1,
   under the 3:1 an icon needs. Matched to the bar's own text colour. The
   theme's hover (white on an accent fill) already clears at 5.83:1. */
#top .social a {
  color: #eeeeee;              /* 6.43:1 on #555555 */
}
/* The mobile phone glyph is a link too, and needs the same lift. */
#top p.hidden-md.hidden-lg a {
  color: #eeeeee;
  padding: 6px;
  display: inline-block;
}

.navbar-nav > li > a {
  font-size: 15px;
  font-weight: 600;
}

/* Two hover states that only fail once the pale tint is under them, which is
   why a rest-state contrast sweep misses both.

   Nav hover paints the --navbar-focus wash (#f9b381) behind the link while
   leaving the text at #555555 -- 4.19:1, just under the floor. Ink takes it
   to 7.1:1 and keeps the "background washes in, text does not change colour"
   behaviour the nav was designed around.

   Pagination hover paints --pagination-bg (#fbd1b2) behind accent-coloured
   text; at the new --primary-accent that is 4.12:1, still short. The hover
   step (#8f4207) clears it at 5.04:1 and matches the darken-on-hover
   direction used for links. */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: var(--primary-accent-hover);
}

/* Condition-card titles (e.g. "Urinary Incontinence") were barely larger
   than body text (18px, uppercase) -- give them real heading weight.
   Uppercase dropped too: all-caps hurts word-shape recognition, working
   against the same legibility goal for older readers. */
.box-simple h3 {
  font-size: 24px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}

/* pills shortcode -- used for prolapse-type lists, accepted-insurance
   lists, etc. This CSS didn't carry over from the pre-theme-swap build,
   so pill text was rendering as unstyled inline spans running together
   with no spacing. */
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 24px;
}
.pill {
  display: inline-block;
  background: #fdf1e7;
  color: var(--primary-accent);
  border: 1px solid #f6d9bd;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 600;
}
.pill.not-accepted {
  background: #f2f2f2;
  color: #666666;
  border-color: var(--hairline-strong);
}

/* faq_categories front-matter block (layouts/page/single.html) -- native
   <details>/<summary> so the Q&A is readable/expandable with no JS, and
   crawlers/LLMs see full answer text in the DOM rather than behind a
   collapsed-by-script panel. */
.faq-list {
  margin-top: 12px;
}
.faq-item {
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: #fff;
}
.faq-question {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  color: #333;
  list-style: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--primary-accent);
  font-weight: 700;
}
.faq-item[open] .faq-question::before {
  content: "\2212";
}
.faq-answer {
  margin-top: 10px;
  padding-left: 18px;
  color: #555555;
  font-size: 16px;
  line-height: 1.7;
}
.faq-answer p {
  margin: 0;
}

/* formembed shortcode -- fetches the shared patient-form fragment from
   forms.tktech.health at build time and inlines it (see .pf-embed rules
   shipped inside that fragment itself). This only styles the fallback
   shown if the build-time fetch fails. */
.form-embed-error {
  margin: 24px 0;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: #fff;
  color: #555;
}

/* Bootstrap 3's grid is float-based, not flex/grid -- with variable-height
   cards (e.g. "Well Women Visits" being shorter than its row-mate "Pelvic
   Organ Prolapse"), the next card floats up into whichever column has
   room first instead of starting a clean new row, producing a
   "staircase" of misaligned cards instead of clean left/right pairs.
   Forcing every odd card to start a new row fixes it regardless of
   height differences. */
@media (min-width: 768px) {
  .cards-grid > .col-md-6:nth-child(odd) {
    clear: left;
  }

  /* An odd total count (e.g. 11 cards at 2-per-row) leaves the very last
     card alone on its own row instead of paired -- :nth-child(odd)
     combined with :nth-last-child(1) only ever matches when both are
     true of the same element, which only happens when the total count
     is odd, so this never fires (and never mis-stretches a properly
     paired last card) when the count is even. */
  .cards-grid > .col-md-6:nth-child(odd):nth-last-child(1) {
    float: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Homepage "what we treat" features bar: 9 cards at 4-per-row leaves the
   last row with just one card (Cosmetic Offerings), stranded on the left
   with a big empty gap beside it. Stretching it full-width instead gives
   the section a clean visual close. Targets row-2 specifically since
   that's the 3rd row (9 cards / 4 cols = rows 0,1,2) -- revisit this
   selector if the feature count changes. */
@media (min-width: 768px) {
  .bar.background-white .row-2:last-of-type > .col-md-3:only-child {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    float: none;
    text-align: center;
  }
  .bar.background-white .row-2:last-of-type > .col-md-3:only-child .icon {
    display: flex;
    justify-content: center;
  }
}

/* download-card shortcode -- replaces plain small buttons for "prefer
   paper" PDF downloads with a proper card: icon, title, optional
   requirement note, and a full-size button, laid out side by side via
   the .download-cards wrapper. */
.download-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 24px 0;
}
.download-card {
  flex: 1 1 280px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.download-card:hover {
  box-shadow: 0 8px 24px var(--shadow-tint-soft);
  transform: translateY(-3px);
}
.download-card-icon {
  font-size: 32px;
  color: var(--brand-orange);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 4px;
}
.download-card-body h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.download-card-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-accent);
  margin-bottom: 14px;
}
.download-card-body .btn {
  display: inline-block;
}

/* inline-image shortcode -- breaks up long text-only bio pages with a
   real (unblurred, unlike the hero/breadcrumb backgrounds) photo,
   floated so body copy wraps around it instead of interrupting the
   reading flow with a full-width image. */
.inline-image {
  float: right;
  max-width: 280px;
  width: 45%;
  margin: 4px 0 20px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--shadow-tint-card);
}
@media (max-width: 600px) {
  .inline-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
}

/* closing-banner shortcode -- bookends a long bio page with the same
   blurred-photo-plus-brand-tint treatment as the page-title band up top
   (#heading-breadcrumbs in site-color.css), instead of just trailing off
   after the last paragraph. */
.closing-banner {
  clear: both;
  margin-top: 32px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.closing-banner-overlay {
  background: linear-gradient(135deg, rgba(122, 61, 15, 0.7), rgba(244, 121, 32, 0.65));
  padding: 48px 24px;
  text-align: center;
}
.closing-banner-overlay p {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 1px 4px var(--shadow-tint-strong);
  max-width: 640px;
  margin: 0 auto;
}

/* Contact Us two-column layout: compact vertical info cards on one
   side, the form on the other, instead of full-width 3-across cards
   stacked above a full-width form. */
.contact-two-col {
  margin-top: 24px;
}
.contact-card-compact {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 16px;
  padding: 20px;
}
.contact-card-compact i {
  font-size: 22px;
  color: var(--brand-orange);
  margin-top: 4px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.contact-card-compact h3 {
  font-size: 17px;
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: normal;
}
.contact-hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 15px;
  margin-top: 4px;
}
.contact-hours-grid span {
  white-space: nowrap;
}

/* Footer hours: same grid as the contact page, matched to the same
   font size as the phone/fax/address text below it so the whole
   Contact & Hours column reads as one consistent block. */
.footer-hours-label {
  margin-bottom: 2px !important;
  font-weight: 600;
}
.footer-hours-grid {
  font-size: inherit;
  row-gap: 0;
  margin-top: 0;
  margin-bottom: 14px;
}
.footer-hours-grid span:first-child {
  color: #cfcfcf;
}

/* Related Articles (layouts/partials/related_posts.html) -- reuses the
   homepage's .box-image-text.blog card, but that card's equal-height
   flex rules (site-color.css) are scoped to the homepage's specific
   ".bar.background-white > .container..." row, so they don't reach here.
   Re-declared under our own .related-articles wrapper instead. */
.related-articles {
  clear: both;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #eeeeee;
}
.related-articles h3 {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .related-articles .row {
    display: flex;
    flex-wrap: wrap;
  }
  .related-articles .row > .col-sm-4 {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  .related-articles .box-image-text.blog {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .related-articles .box-image-text.blog .top {
    flex-shrink: 0;
  }
  .related-articles .box-image-text.blog .content {
    flex: 1 1 auto;
  }
}

/* Blog cards (homepage "From the Blog" + .related-articles) have titles
   of very different lengths -- without a fixed-height title slot, the
   date/summary/button below it land at a different vertical position on
   every card in the row instead of lining up. Reserving a 2-line-tall
   box for the title (clamped with an ellipsis on longer ones) keeps the
   date and everything after it starting at the same y on every card. */
.box-image-text.blog .content h4 {
  min-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* Blog banner photos are different shapes (some near-square, some wide),
   so without a fixed crop each card's image block came out a different
   height, throwing off the whole card even with the title slot above
   fixed. Cropping every banner to the same ratio makes every card in the
   row the same height regardless of the source photo's own dimensions. */
.box-image-text.blog .top .image {
  aspect-ratio: 4 / 3;
}
.box-image-text.blog .top .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Keyboard and screen-reader affordances
   ========================================================================== */

/* Skip link (layouts/partials/skip-link.html). Off-screen until focused,
   then pinned to the top-left over everything -- position:fixed rather
   than absolute so it stays put even when the skip is triggered after the
   page has been scrolled. Square and set in the button type role, matching
   the flat structural chrome the rest of the system uses; Ink rather than
   brand orange because #F47920 on white is only 2.76:1 and this element
   exists specifically to serve the people who most need contrast. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  transform: translateY(-120%);
  padding: 14px 20px;
  background: #333333;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
}
.skip-link:focus {
  transform: translateY(0);
  color: #ffffff;
  text-decoration: underline;
  /* Brand orange, not the readable accent: this ring sits on the #333333
     skip-link panel, where #a64a08 would be 2.17:1 and fail the 3:1 floor
     for a focus indicator. #F47920 reads 4.57:1 against that dark panel --
     one of the few places the bright mark is the *more* accessible choice. */
  outline: 3px solid var(--brand-orange);
  outline-offset: -3px;
}

/* <main id="content"> carries tabindex="-1" so the skip link actually moves
   focus instead of only scrolling. It is never reachable by Tab, so the
   focus ring browsers draw around the entire main region on a programmatic
   focus is noise rather than feedback. */
#content:focus {
  outline: none;
}

/* The theme zeroes the outline on the mobile menu button
   (.navbar-toggle:focus { outline: 0 }) without substituting anything, so
   the primary navigation control on mobile gave no focus feedback at all.
   The form fields get away with the same trick because they replace it
   with the orange glow; this restores an equivalent for the button. */
.navbar-toggle:focus,
.navbar-toggle:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
}

/* Blog card overlay (.box-image-text .top .text) is parked at
   translate(0, -150%) and slid into view on :hover. The "Read more" link
   inside it stays in the tab order the whole time, so keyboard users were
   landing on a link positioned well outside the card. Mirroring every
   hover rule on :focus-within brings the overlay in when that link takes
   focus, so the focused element is actually on screen. */
.box-image-text:focus-within .bg {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.box-image-text:focus-within .name {
  position: absolute;
  transform: translate(0, -75%);
}
.box-image-text:focus-within .text {
  position: absolute;
  transform: translate(0, 100%);
}

/* Decorative icons keep the bright mark.

   icons.css paints every glyph with `background-color: currentColor`, and the
   theme colours the card glyph with `.box-simple .icon { color:
   var(--primary-accent) }` -- so moving that token to the darker readable step
   turned these into burnt brown and drained the colour out of the card grid.

   The readable step was the wrong call for these specifically. WCAG 1.4.11's
   3:1 floor covers graphical objects *required to understand the content*, and
   none of these are: each sits directly above or beside its own visible text
   label, and features.html marks the card glyph aria-hidden precisely because
   the heading already carries the meaning. Decorative graphics have no
   contrast requirement, which puts them in the same bucket as the gradients --
   atmosphere, so Brand Orange.

   Deliberately NOT in this list, because each of these does carry meaning:
     .download-card-note     text, not a glyph
     .pill                   text
     .faq-question::before   the +/- is the only visual open/closed indicator
     #top .social a          the glyph is the sole visual affordance, and it
                             sits on the dark bar (handled above) */
.box-simple .icon,
.box-simple .icon i {
  color: var(--brand-orange);
}

/* Feature cards (layouts/partials/features.html) now wrap icon + title in
   one link so it has an accessible name and a card-width target. Making it
   block-level is what grows the target; the heading has to be forced back
   to Ink because it would otherwise inherit the link color, and these
   titles are headings that happen to be clickable, not link-colored text.
   Brand orange arrives on hover/focus as feedback, consistent with how the
   rest of the system spends it -- at the darker --link-focus step, since
   #F47920 does not clear 4.5:1 on white. */
/* Flex column rather than plain block on purpose. site-color.css makes
   .box-simple itself a flex column at >=768px, so the icon and the h3 used
   to be flex items of the card -- moving them inside a block-level link
   would hand the h3 back its margin-collapsing behavior and shift the
   card's internal spacing. Keeping the link a flex column keeps them flex
   items, so the only thing that actually changes is the size of the
   clickable region. */
.box-simple-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.box-simple-link h3 {
  color: #333333;
}
.box-simple-link:hover h3,
.box-simple-link:focus h3 {
  color: var(--link-focus);
}
.box-simple-link:focus {
  outline: 2px solid var(--primary-accent);
  outline-offset: 4px;
}