/*
 * Van Every Family Chiropractic Center: LEGACY site stylesheet.
 *
 * 2026-09-28: the design system moved to public/css/{tokens,base,chrome}.css
 * (docs/classic-look/BUILD-BRIEF.md). This file is shrinking: sections 1-2,
 * 5-6 and 10 were retired by Lane F (tokens.css / fonts.css / chrome.css own
 * them); the remaining sections are page-lane legacy rules that the lanes
 * override from their own files and the integrator deletes once unused.
 *
 * Structure: 3 legacy base helpers  4 layout shell  7 content helpers
 * 8 components  9 blog  11 icons  12 home  13 responsive
 */

/* 1 ---------------------------------------------------------------- tokens */
/* Retired: tokens live in tokens.css (the --ve-* names resolve there as aliases). */

/* 2 ----------------------------------------------------------------- fonts */
/* Retired: Poppins is declared in fonts.css. */

/* 3 ------------------------------------------------- legacy base helpers */
/* The reset, type scale, links, lists and forms live in base.css. What stays
   here are the legacy class hooks pages still use until their lane migrates
   them to the ve-* kit; they are styled to match the new system. */
.visuallyhidden, #blog-title {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Legacy button hooks: same shape as .ve-btn (C5) until pages move to <Button>. */
.btn, .button, a.button, .bldr_cta a, a.bldr_cta, .cta_button, .bldr_callout a, button.btn, input[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 26px;
  border: 2px solid var(--c-pink);
  border-radius: var(--radius-btn);
  background: var(--c-pink);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.btn:hover, .button:hover, a.button:hover, .bldr_cta a:hover, a.bldr_cta:hover, .cta_button:hover, .bldr_callout a:hover, input[type='submit']:hover {
  background: var(--c-pink-deep);
  border-color: var(--c-pink-deep);
  color: var(--c-white);
  text-decoration: none;
}
.btn:active, input[type='submit']:active { transform: translateY(1px); }
.btn span { font-weight: 500; }

/* 4 ---------------------------------------------------------- layout shell */
#containing_wrap, #wrap { width: 100%; }
.ve-page-wrap { padding: clamp(32px, 4vw, 56px) 0 var(--section-y); }
#container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
#main { flex: 1 1 auto; min-width: 0; outline: none; }
#content { width: 100%; }
.layout-one-col #main { max-width: 100%; }
#sidebar { flex: 0 0 300px; }
#content > h1:first-child { margin-top: 0; }

/* 5 ----------------------------------------------------------- utility bar */
/* Retired: the header (utility row + nav) is chrome.css .ve-header. */

/* 6 --------------------------------------------------- header + primary nav */
/* Retired: chrome.css .ve-header (C1). */


/* 7 ------------------------------------------------------- content helpers */
.cf::after, .cb, .clear { clear: both; }
.cf::after { content: ''; display: table; }
.cb { display: block; height: 0; }
.center { text-align: center; }
.aligncenter, img.center { display: block; margin: 1em auto; }
.alignright { float: right; margin: 0.3em 0 1.2em 1.8em; max-width: 46%; }
.alignleft { float: left; margin: 0.3em 1.8em 1.2em 0; max-width: 46%; }
img.rounded, .rounded img, .post-image img {
  border-radius: var(--ve-radius);
}
img.rounded {
  box-shadow: 10px 10px 0 var(--ve-butter);
}
.column { float: left; margin-right: 4%; margin-bottom: 1.5em; min-height: 1px; }
.column.last, .column:last-child { margin-right: 0; }
.one_half { width: 48%; }
.one_third { width: 30.66%; }
.two_thirds { width: 65.33%; }
.one_fourth { width: 22%; }
.three_fourths { width: 74%; }
.column + .cb, .last + .cb { clear: both; }
.column iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--ve-radius-sm); }

/* "banner" blocks: flat cream cards (content widgets, CTAs, video frames) */
.banner { position: relative; }
.banner:not(:has(> .center > iframe)):not(:has(> a > img)) {
  background: var(--ve-cream);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: clamp(18px, 3vw, 32px);
  margin: 1.5em 0;
}
.banner > a > img { border-radius: var(--ve-radius); }
.bldr_notebox {
  background: var(--ve-butter);
  border-left: 5px solid var(--ve-gold);
  border-radius: var(--ve-radius-sm);
  padding: 1.1em 1.3em;
  margin: 1.5em 0;
}
.bldr_callout {
  background: var(--ve-blush);
  border-radius: var(--ve-radius);
  padding: 1.2em 1.4em;
  margin: 1.5em 0;
  text-align: center;
}
.bldr_callout a { margin-top: 0.3em; }
.bldr_cta { margin: 1.5em 0; text-align: center; }
.bldr_cta a { font-size: 1.02rem; }
.bldr_divider { height: 0; border: 0; border-top: 1px dashed var(--ve-line); margin: 2.4em 0; clear: both; }
[id^='cta'] { clear: both; }

/* Lists: the old theme used an icon font for bullets; draw them instead */
ul.fa-ul { list-style: none; padding-left: 0; }
ul.fa-ul > li { position: relative; padding-left: 1.4em; }
ul.fa-ul > li > i.fa-circle:first-child, ul.fa-ul > li > .fa-li {
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--ve-gold) !important;
  color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}
ul:not([class]) > li::marker, ol > li::marker { color: var(--ve-pink); font-weight: 800; }

/* FAQ toggles (home + interior pages) */
.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--ve-line);
  color: var(--ve-ink);
  font-weight: 800;
  text-decoration: none;
  text-align: left;
}
.toggle::after {
  content: '';
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ve-blush) center / 12px 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10M6 1v10' stroke='%23d81368' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.toggle.active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%23d81368' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.toggle:hover { color: var(--ve-pink); }
.toggled { padding: 4px 4px 16px; color: var(--ve-muted); }

/* Galleries */
.gallery, .wp_flex_gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 1.5em 0; }
.gallery-item { margin: 0; }
.gallery-item img, .wp_flex_gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ve-radius-sm); }

/* Tabs (services) */
.tabbed-content .nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 1em 0 1.6em; }
.tabbed-content .nav-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tabbed-content .nav-tabs label {
  padding: 0.6em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--ve-line);
  background: var(--ve-white);
  font-weight: 600;
}
.tabbed-content .nav-tabs input:checked + label { background: var(--ve-ink); border-color: var(--ve-ink); color: var(--ve-white); }
.tabbed-content .nav-tabs input:focus-visible + label { outline: 3px solid var(--ve-ink); outline-offset: 2px; }

/* 8 ------------------------------------------------------------ components */
/* .ve-eyebrow retired here: base.css owns the brief-correct version (16/600,
   normal case); this file used to override it uppercase site-wide. */
/* .ve-frame retired: 0 uses left in src (no lane page renders it). */
.ve-card {
  background: var(--ve-white);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: 24px;
  box-shadow: var(--ve-shadow);
}

/* Testimonial slider (Google reviews): .testimonial_image/.test_text/.test_author
   retired (0 uses left in src). .flexslider/.flex-direction-nav (the old
   WordPress gallery widget's vendor classes) retired too: scrapedHtml.ts
   now rebuilds that one scraped blog post's gallery into plain .ve-scraped-
   gallery figures below, so nothing renders the vendor markup any more. */
.ve-scraped-gallery {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 1em 0; padding: 0;
}
.ve-scraped-gallery-item { margin: 0; }
.ve-scraped-gallery-item img {
  display: block; max-width: 100%; height: auto; border-radius: var(--ve-radius);
}

/* 9 ------------------------------------------------------------------ blog */
#sidebar { font-size: 0.95rem; }
.widget { background: var(--ve-cream); border: 1px solid var(--ve-line); border-radius: var(--ve-radius); padding: 20px 22px; margin: 0 0 20px; }
.widget-title { font-size: 1.15rem; margin: 0 0 0.6em; }
.widget .menu { list-style: none; margin: 0; padding: 0; }
.widget .menu li { margin: 0; }
.widget .menu a { display: block; padding: 6px 0; border-bottom: 1px solid var(--ve-line); text-decoration: none; font-weight: 600; }
.published { color: var(--ve-muted); font-size: 0.9rem; }
.post-image img { width: 100%; }

/* 10 --------------------------------------------------------------- footer */
/* Retired: chrome.css .ve-footer (C14). */


/* 11 ---------------------------------------------------------------- icons
 * Replaces the licensed icon font. Each class maps to a small SVG drawn with
 * a CSS mask, so it takes the current text colour. Brand marks are simple
 * letterforms, not copies of the platforms' logos. */
i.fa, i.fas, i.fab, i.far, i.fal, i.fad, i.fa-solid, span.fa, span.fas, button.fa-solid {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--ve-icon, none) center / contain no-repeat;
  mask: var(--ve-icon, none) center / contain no-repeat;
  font-style: normal;
}
.fa-2xs { font-size: 0.55em; }
.fa-circle { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/svg%3E"); }
.fa-calendar { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.fa-envelope, .fa-paper-plane { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.fa-times { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.fa-heart { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 7.9 3.6 4 7.4 4c2 0 3.5 1.1 4.6 2.6C13.1 5.1 14.6 4 16.6 4 20.4 4 23 7.9 21.5 11.7 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.fa-exclamation-circle { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); }
.fa-badge-check { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.fa-user { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.fa-video-camera, .fa-camera { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m16 10 6-3v10l-6-3z'/%3E%3C/svg%3E"); }
.fa-universal-access { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='7' r='1.3' fill='black'/%3E%3Cpath d='M7 10h10M12 10v4l-3 4M12 14l3 4'/%3E%3C/svg%3E"); }
.fa-dice, .fa-candy { --ve-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/svg%3E"); }
/* Social marks (.fa-facebook etc.) retired: 0 uses left in src or the
   scraped blog HTML. .ve-social lives in chrome.css (SocialLinks). */

/* 12 ----------------------------------------------------------------- home */
/* Retired 2026-09-28: the old .ve-hero/.ve-paths/.ve-doctors/.ve-services/
   .ve-conditions/.ve-steps/.ve-awards/.ve-quote-card/.faq-wrap home layout
   (and its "Home details" / "Home refinements" follow-on rules further
   below) rendered nothing once Home.tsx moved to the new restyle system
   (PillarCards.tsx, Stories.tsx, TeamStrip.tsx, home.css) — 0 uses left in
   src or the scraped blog HTML. */

/* 13 ----------------------------------------------------------- responsive */
/* (Header/nav compaction retired: chrome.css .ve-header owns the header at every width.) */
@media (max-width: 960px) {
  #container { flex-direction: column; }
  #sidebar { flex-basis: auto; width: 100%; }
}
@media (max-width: 768px) {
  .column, .one_half, .one_third, .two_thirds, .one_fourth, .three_fourths { float: none; width: 100%; margin-right: 0; }
  .alignright, .alignleft { float: none; display: block; max-width: 100%; margin: 0 auto 1.2em; }
  img.alignright, img.alignleft, img.rounded { box-shadow: 6px 6px 0 var(--ve-butter); }
}

/* (Shell additions and footer layout retired: chrome.css owns header, social links and footer.) */

/* Home details / Home refinements retired with section 12 above (same
   dead .ve-hero-trio/.ve-doctor/.ve-quote-*/.testimonial_image/.faq-wrap
   system) — 0 uses left in src or the scraped blog HTML. */

/* Blog index */
.blogposts.nb { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.blogposts .post { display: flex; flex-direction: column; background: var(--ve-white); border: 1px solid var(--ve-line); border-radius: var(--ve-radius); overflow: hidden; box-shadow: var(--ve-shadow); }
.blog-subscribe-modal { position: relative; width: min(460px, 100%); background: var(--ve-white); border-radius: var(--ve-radius); padding: 28px; box-shadow: var(--ve-shadow); }
.blog-subscribe-modal h2 { margin-top: 0; }
.blog-subscribe-modal .field { margin-bottom: 14px; }
.blog-search { margin: 0 0 28px; }
.blog-search-label { display: block; margin-bottom: 8px; font-family: var(--ve-serif); font-size: 1.25rem; color: var(--ve-ink); }
.blog-search-field { display: flex; gap: 10px; align-items: stretch; }
.blog-search-field input[type='search'] { flex: 1; min-width: 0; min-height: 48px; font-size: 1rem; }
.blog-search-field input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.blog-search-clear { flex: 0 0 auto; min-height: 48px; padding: 0 18px; border: 2px solid var(--ve-pink); border-radius: 999px; background: var(--ve-white); color: var(--ve-pink); font-weight: 800; cursor: pointer; }
.blog-search-clear:hover { background: var(--ve-blush); color: var(--ve-pink-deep); }
.blog-search-status { margin: 10px 0 0; color: var(--ve-muted); font-weight: 600; }
.blog-search-status:empty { display: none; }
.blog-search-results mark { background: var(--ve-butter); color: inherit; padding: 0 2px; border-radius: 3px; }
.blog-search-more { display: flex; justify-content: center; margin: 28px 0 8px; }
.hidden { display: none !important; }

/* .ve-condition-hero (old plum brand panel) retired: no page renders it any
   more (ConditionHero is now the C3 title band). #content img[style*=
   'border-radius: 50%'] retired: 0 uses left in src. */

/* Blog topic chips, From-our-blog cards, More-on strip and the topic pages
   live in blog.css (.ve-post-*, .ve-blog-topic*, .ve-blog-more*) since the
   2026-09-28 restyle; the legacy from-the-blog-* / more-on-topic-* /
   blog-topic-chip* / topic-page-* rules were deleted with their markup.
   .ve-quote-mark + * retired with .ve-quote-mark above (section 12). */