/* VS Primo 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 VS Primo brand
   green (#2E8B57, matching the logo artwork and the forms.tktech.health
   practice config) without touching the vendored theme files. */
:root {
  --primary-accent: #2e8b57;
  --navbar-border-top: #1f5f3b;
  --button-border: #256f47;
  --link-focus: #1f5f3b;
  --form-shadow: rgba(46, 139, 87, 0.6);
  --pagination-bg: #cfe8db;
  --link-hover-bg: #256f47;
  --navbar-focus: #8fd1ac;
  /* Sampled from the logo's "Primo" wordmark -- used sparingly as a
     secondary accent (e.g. map pins) so it reads as a deliberate brand
     echo rather than the all-red CTA experiment reverted in ca5ff1c. */
  --logo-red: #cf212c;
}

/* Skip-to-content link: no landmark to bypass the topbar + full nav
   (including a dropdown) currently exists, so keyboard/screen-reader
   users must tab through all of it on every single page. Off-screen at
   rest, brought on-screen on focus -- standard pattern, not reliant on
   Bootstrap's own sr-only-focusable so it doesn't depend on exactly
   which CDN version is live. Uses --link-focus (Forest Green Deep),
   already the system's color for focus-triggered UI. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 2000;
  background: var(--link-focus);
  color: #ffffff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}

/* The theme's default .home-carousel background is a generic stock-photo
   collage (img/photogrid.jpg) that includes random, unrelated people --
   wrong for a solo practice's own homepage. Replaced with a Cinque Terre
   coastal-village photo (ties into the "GodFather of Medicine" Italy
   branding), sourced via quickscripts/unsplash_tool.py, credited in
   data/unsplash/breadcrumb-credits.json.
   The gradient here stacks with .dark-mask below (~66% combined coverage
   at the previous 0.55/0.25 values), which was heavy enough to flatten the
   photo into a solid teal wash -- exactly the signature imagery the site's
   identity depends on. Lightened so the village/water actually read as a
   photo; the dedicated dark panel behind the text column (.col-sm-5,
   below) already handles legibility independent of this wash's strength. */
.home-carousel {
  background: linear-gradient(135deg, rgba(31,95,59,0.32), rgba(46,139,87,0.26)), url('/images/hero-cinque-terre.jpg') center center / cover no-repeat;
}
/* 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. Lightened further (was 0.25, still compounding
   with the gradient above into a near-opaque wash) to a light unifying
   brand tint that leaves the photo's own color doing the work. */
.home-carousel .dark-mask {
  opacity: 0.12;
}
/* Now that the hero photo actually shows (see .dark-mask above), the
   heading/copy/buttons need their own contrast floor independent of
   which part of the photo happens to sit behind them -- a busy canal
   scene can land light or dark depending on crop/viewport. A dark panel
   directly behind the text column guarantees legibility everywhere the
   page-level gradient alone can't. */
.home-carousel .col-sm-5 {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  padding: 32px;
  text-align: left;
}
/* Override theme's right-alignment for hero text on larger screens */
@media (min-width: 992px) {
  .home-carousel .col-sm-5.right {
    text-align: left;
  }
}

/* Logo sizing lives in site-color.css, which loads after this file and
   wins the cascade -- don't duplicate a competing value here. */

/* 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 green) 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 green 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);
}

/* Top bar phone/social icon is the same #999999-on-#555555 pattern as the
   footer above (~2.6:1, fails the 4.5:1 AA floor) -- missed in the original
   sitewide contrast pass because it's set on the theme's `#top .social a`
   rule rather than inside #footer. This is the phone-call icon, present
   and clickable on every page, so it gets the same near-white fix.
   position: relative anchors the touch-target expansion below. */
#top .social a {
  color: #f2f2f2;
  position: relative;
}
#top .social a:hover {
  color: #ffffff;
}
/* The theme sizes this icon at a literal 24x24px -- the exact floor of
   WCAG 2.2's 2.5.8 Target Size (Minimum), zero margin for a mis-tap, on
   the site's primary "call the office" affordance, for a self-described
   65+ patient audience. Only one topbar link exists (see hugo.toml
   menu.topbar), so an invisible hit area can safely extend past the
   visible circle without risking overlap with a neighboring target.
   Widening the visible circle itself would blow out the topbar's
   deliberately compact, restrained scale for a single always-on-screen
   utility row -- this keeps that untouched and only grows what's tappable. */
#top .social a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* Copyright bar (bottom-most strip: Privacy/Terms/Cookie + site-credit
   links) is #333 background per the theme default. The brand green at
   full saturation only hits ~3:1 there (fails WCAG AA); --navbar-focus
   (#8fd1ac, already defined above as a light green tint) hits ~7.1:1. */
#copyright a {
  color: var(--navbar-focus);
  text-decoration: underline;
}
#copyright a:hover {
  color: #ffffff;
}

.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: #e6f4ec;
  color: var(--primary-accent);
  border: 1px solid #bfe3d0;
  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;
}
/* Category subheading -- only rendered when a page combines more than one
   faq_categories source (e.g. the master FAQ page's 5 topics, or New
   Patient's 2), so a single-category page's own faq_heading never gets a
   redundant second label directly beneath it. */
.faq-category-heading {
  margin: 32px 0 12px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-accent);
}
.faq-list h3.faq-category-heading:first-of-type {
  margin-top: 0;
}
.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;
}

/* Owl Carousel's base CSS (owl.carousel.css) sets .owl-carousel and
   .owl-wrapper to display:none until its JS plugin initializes -- meant
   to hide the flash of an unstyled multi-item track before JS lays it
   out. For the homepage hero that hid the headline/copy/CTAs right along
   with the photo, so nothing appeared until owlCarousel() ran late in
   the page load (worse on slow connections/devices). Scoped to
   .home-carousel so the customers/testimonials carousels elsewhere keep
   their normal pre-init hide. Specificity (two/three classes) beats the
   base rule regardless of stylesheet order, and this is safe because the
   hero doesn't need JS to compute layout before first paint -- it's plain
   Bootstrap grid markup that read correctly before the carousel plugin
   existed. */
.home-carousel .owl-carousel {
  display: block;
}
.home-carousel .owl-carousel .owl-wrapper {
  display: block;
}

/* Mobile hero-overflow fix. owl.carousel (singleItem mode, used for the
   one-slide homepage hero) computes inline pixel widths for
   .owl-wrapper/.owl-item at init time; with a real photo in the slide
   (vs. the small logo this originally shipped with), the image hasn't
   finished loading/decoding when that calc runs, so it grabs a stale
   width and the slide renders wider than the viewport -- confirmed on
   real Chromium at 390px: the hero headline and photo both ran off the
   right edge with no way to scroll back except a hidden overflow.
   Forcing 100% here overrides the bad inline widths (external !important
   beats a non-!important inline style) and is safe since a true
   single-item, non-looping carousel doesn't need JS-managed track width
   anyway. body overflow-x is a second safety net for the same class of
   bug elsewhere, since patients on older phones/browsers are the ones
   least likely to know how to recover from an accidentally-wide page. */
html, body {
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .home-carousel .owl-carousel,
  .home-carousel .owl-wrapper-outer,
  .home-carousel .owl-wrapper,
  .home-carousel .owl-item,
  .home-carousel .item,
  .home-carousel .row {
    width: 100% !important;
  }
  .home-carousel h1,
  .home-carousel p {
    white-space: normal;
  }
}

/* announcement shortcode -- time-limited notices (e.g. an upcoming
   office closure) that need to stand out above the regular page
   content, not read as just another paragraph. Remove the shortcode
   call from content when the notice is no longer relevant; this CSS
   can stay for the next time one is needed.
   Previously used a 4px border-left accent -- the generic "side-tab"
   treatment. The tinted background plus the icon already carry the
   callout job, so the border is dropped in favor of a thin all-around
   border matching the mint-wash pill treatment used elsewhere. */
.announcement-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #eaf6ef;
  border: 1px solid #bfe3d0;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  text-align: left;
}
@media (min-width: 992px) {
  /* The homepage wraps .Content in col-md-8 col-md-offset-2 (a centered
     66%-wide, text-centered column) for the welcome copy below -- fine
     for a paragraph, but it squeezed this banner down to a narrow
     centered strip. Cancel the offset/width here to span the full
     container instead. */
  .announcement-banner {
    margin-left: -16.6667%;
    margin-right: -16.6667%;
  }
}
.announcement-icon {
  font-size: 24px;
  color: var(--primary-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.announcement-body h3 {
  margin: 0 0 8px;
  color: #1f5f3b;
  font-size: 19px;
}
.announcement-body p {
  margin: 0 0 10px;
}
.announcement-body p:last-child {
  margin-bottom: 0;
}

/* Summer break announcement with Italian beach background and gradient
   Used on the homepage for the summer break notice */
.announcement-banner.summer-break {
  background: linear-gradient(135deg, rgba(31,95,59,0.55), rgba(46,139,87,0.55)), url('/images/summer-beach-umbrellas.jpg') center center / cover no-repeat;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  padding: 28px 32px;
  overflow: hidden;
  position: relative;
}
.announcement-banner.summer-break::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.announcement-banner.summer-break .announcement-icon,
.announcement-banner.summer-break .announcement-body {
  position: relative;
  z-index: 2;
}
.announcement-banner.summer-break .announcement-icon {
  color: #ffffff;
}
.announcement-banner.summer-break .announcement-body h3 {
  color: #ffffff;
  font-size: 20px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.announcement-banner.summer-break .announcement-body p {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  line-height: 1.6;
  font-size: 16px;
}
.announcement-banner.summer-break a {
  color: #ffffff;
  text-decoration: underline;
}
.announcement-banner.summer-break a:hover {
  color: var(--navbar-focus);
}

/* Contact Us two-column layout: compact vertical info cards on one
   side, the form on the other. */
.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;
}

/* Bootstrap 3's grid is float-based, not flex/grid -- with variable-height
   cards, 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;
  }
}

/* A heading right after the embedded form (e.g. "Join Our Mailing List"
   below the Existing Patient form) butted up against the form's own
   bottom margin/accent border with no real breathing room. */
.pf-embed + h2 {
  margin-top: 48px;
}

/* action-card shortcode -- a plain button + two lines of text below a
   heading read as an afterthought; wraps it as a proper card matching
   the download-card treatment used elsewhere (icon, title, description,
   button all in one bordered/shadowed box). */
.action-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 36px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  max-width: 500px;
}
.action-card-icon {
  font-size: 32px;
  color: var(--primary-accent);
  flex-shrink: 0;
  margin-top: 4px;
}
.action-card-body h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.action-card-body p {
  margin-bottom: 14px;
}