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

/* Footer hours: same grid as the contact page, but compacted further --
   smaller type and tighter rows so all four lines read as one tidy block
   above the phone/fax/address instead of stretching down the column. */
.footer-hours-label {
  margin-bottom: 2px !important;
  font-weight: 600;
}
.footer-hours-grid {
  font-size: 13px;
  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;
}