/* 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. */
.home-carousel .owl-carousel {
  padding-top: 110px;
  padding-bottom: 70px;
}
/* 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: rgba(0, 0, 0, 0.4);
  padding: 24px 28px;
  border-radius: 8px;
}
:root {
  --primary-accent: #f47920;
  --navbar-border-top: #a64a08;
  --button-border: #cd5c0a;
  --link-focus: #be560a;
  --form-shadow: rgba(244, 121, 32, 0.6);
  --pagination-bg: #fbd1b2;
  --link-hover-bg: #d6600b;
  --navbar-focus: #f9b381;
}

/* 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;
}
#footer ul a:hover,
#footer p a:hover {
  color: var(--primary-accent);
}

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

/* 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: #ddd;
}

/* 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 #e2e2e2;
  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 #e2e2e2;
  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 rgba(0, 0, 0, 0.09);
  transform: translateY(-3px);
}
.download-card-icon {
  font-size: 32px;
  color: var(--primary-accent);
  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 rgba(0, 0, 0, 0.12);
}
@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 rgba(0, 0, 0, 0.35);
  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(--primary-accent);
  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;
}