/*
 * Critical layout CSS — guaranteed even if the compiled Tailwind asset
 * (tailwind.css) is stale, cached, or fails to load, since these are
 * structural/override rules, not decorative utility classes. Enqueued as
 * its own cacheable file (see ssc_enqueue_assets() in functions.php)
 * instead of an inline <style> block so repeat visits don't re-download it
 * with every page's HTML.
 */

/* Page never runs edge-to-edge, no matter how wide the viewport gets. */
#content .ast-container{max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important}
/* Nav menu markers/margins — WP core + Astra parent both put list-style on li. */
.ss-menu,.ss-menu li{list-style:none!important;margin:0!important;padding:0!important}
/* A logged custom-logo image can be uploaded at any size; keep it header-scaled.
   brightness(0) flattens whatever colors the uploaded logo has into a solid
   silhouette (using its own alpha channel), giving a clean monochrome mark
   instead of a busy multi-color logo fighting the ivory/ink/yellow palette. */
.ss-logo img,.ss-logo .custom-logo{max-height:32px!important;width:auto!important;filter:brightness(0)!important}
/* CF7/WPForms/Gravity Forms all inject global input/button CSS (borders, box-shadow,
   square corners) that otherwise beats the pill-shaped newsletter form below it. */
.ss-newsletter input{border:0!important;border-radius:9999px!important;background-color:#fff!important;box-shadow:0 2px 10px rgba(24,23,19,.05)!important;width:100%!important;height:auto!important;padding:15px 58px 15px 22px!important;font-size:11px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#181713!important;outline:none!important}
.ss-newsletter input::placeholder{color:#B4B2A6!important;font-size:11px!important;letter-spacing:.14em!important}
/* Global button resets (Astra + form plugins both set button padding/line-height,
   which stretches this into an oval and pushes the icon off-center). Pin an
   exact square box so border-radius:50% is a true circle every time. */
.ss-newsletter-btn{position:absolute!important;right:5px!important;top:50%!important;transform:translateY(-50%)!important;translate:none!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;margin:0!important;line-height:1!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:50%!important;background-color:#FFC531!important}
.ss-newsletter-btn svg{width:13px!important;height:13px!important;display:block!important;flex:none!important}
/* Ask-AI section (front-page.php): same unlayered-CSS defeat as the newsletter
   form above — WP/Astra/plugin global textarea & button styles beat Tailwind's
   layered utilities regardless of specificity. Inline styles on the markup are
   the primary fix; these cover the states/pseudo-elements inline styles can't
   (::placeholder, :focus, :hover) so nothing reverts to the theme default look. */
#ssai-input,#ssai-modal-input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important}
#ssai-input::placeholder,#ssai-modal-input::placeholder{color:#72716A!important;opacity:1!important}
#ssai-input:focus,#ssai-modal-input:focus{border:0!important;box-shadow:none!important;outline:none!important}
#ssai-form button[type="submit"],#ssai-modal-form button[type="submit"],#ssai-close{border-radius:9999px!important;box-sizing:border-box!important;line-height:1!important}
#ssai-form button[type="submit"]{background-color:#181713!important;color:#fff!important}
#ssai-form button[type="submit"]:hover,#ssai-form button[type="submit"]:focus{background-color:#181713!important;color:#fff!important}
#ssai-modal-form button[type="submit"]{background-color:#FFC531!important;color:#181713!important}
#ssai-close{background-color:transparent!important;border-color:rgba(24,23,19,.16)!important;color:#181713!important}
#ssai-close:hover{background-color:#181713!important;border-color:#181713!important;color:#fff!important}
#ssai-form button[type="submit"] svg,#ssai-modal-form button[type="submit"] svg,#ssai-close svg{width:16px!important;height:16px!important;display:block!important;flex:none!important}
#ssai-modal-form button[type="submit"] svg{width:14px!important;height:14px!important}
/* Answer/citation/source links are injected into #ssai-body by JS after the
   AI responds. Astra prints its own unlayered global `a{color}` (Customizer
   "Link Color", the stray blue seen in the modal) which beats the layered
   Tailwind text-ink utility on those links regardless of specificity — same
   failure as the nav/footer links above, just reached via innerHTML instead
   of PHP markup. */
#ssai-body a{color:#181713!important}
#ssai-body a:hover{color:#F2B41C!important}
/* Astra generates its own ::selection rule from the Customizer "Theme Color"
   (often a stray leftover color, unrelated to this redesign); force ours. */
::selection{background-color:#FFC531!important;color:#181713!important}
/* Astra dynamic CSS prints unlayered `h3, .entry-content h3 {…}` sizing/colors;
   Tailwind v4 utilities live in @layer utilities and unlayered CSS always wins
   over layered CSS, so plain utility classes can never shrink these titles.
   This rule is unlayered + !important on purpose. */
.ss-blog-title,.ss-blog-title a{font-size:14px!important;line-height:1.4!important;color:#181713!important;margin:0!important}
.ss-blog-title a:hover{color:#F2B41C!important}
/* Astra also prints an unlayered global link color — force ink on nav, arrow,
   footer and logo links */
.ss-menu a,.ss-link,.ss-foot-link,.ss-logo,.ss-logo a{color:#181713!important}
/* Footer tagline: Astra Customizer typography prints an unlayered global
   `p{font-size:...}` rule, which beats any Tailwind text-[Npx] utility here
   regardless of value (same unlayered-always-wins failure as .ss-blog-title). */
.ss-foot-tagline{font-size:11px!important}
.ss-menu a:hover,.ss-link:hover,.ss-foot-link:hover{color:#F2B41C!important}
/* Footer link columns: WP/Astra unlayered ul{padding-left} indents the lists so
   items don't sit flush under their column heading — force the reset. */
.ss-foot-list{margin:0!important;padding:0!important;list-style:none!important}
.ss-foot-list li{margin-left:0!important;padding-left:0!important;list-style:none!important}
/* Round prev/next arrow buttons: Astra/plugin button resets stretch them into
   squares/ovals and off-center the icon (same failure as the newsletter button).
   Pin an exact circle; hover uses the brand yellow, not Astra theme color. */
.ss-arrow{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;margin:0!important;line-height:1!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid #181713!important;border-radius:50%!important;background:transparent!important;color:#181713!important;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.ss-arrow svg{width:13px!important;height:13px!important;display:block!important;flex:none!important}
.ss-arrow:hover{background:#FFC531!important;border-color:#FFC531!important;color:#181713!important;transform:scale(1.06)}
/* Blog card thumbnails: same unlayered img{height:auto} failure as the team
   photos — a wide featured image renders shorter than the 16:10 thumb box and
   leaves a pale gap between the photo and the text. Pin box + fill. */
.ss-blog-thumb{display:block!important;aspect-ratio:16/10!important;overflow:hidden!important}
.ss-blog-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;margin:0!important}
/* keep the image-to-text gap tight; Astra/plugin CSS adds default p/heading margins */
.ss-blog-body{padding:10px 14px 14px!important}
.ss-blog-body p{margin:8px 0 0!important}
/* Team photos: WP core/Astra print an unlayered img{height:auto} that cancels
   Tailwind height utilities — the two grid columns differ in width, so one photo
   rendered shorter and its glass frame stretched with empty space below it. */
.ss-team-img{height:240px!important;width:100%!important;object-fit:cover!important;display:block!important}
@media (min-width:768px){.ss-team-img{height:320px!important}}
/* Hero slideshow: text/card variants are stacked in one grid cell and crossfade
   (.is-on); the photos form a PILE — depth 0 is straight on top, deeper photos
   are tilted so their corners peek out behind, echoing the tilted yellow card. */
.ss-slide{opacity:0;pointer-events:none;transition:opacity .7s ease,transform .7s ease}
.ss-slide.is-on{opacity:1;pointer-events:auto}
.ss-slide-txt{transform:translateY(10px)}
.ss-slide-txt.is-on{transform:none}
.ss-pile{transition:transform .65s cubic-bezier(.4,0,.2,1)}
.ss-pile[data-depth="0"]{transform:none;z-index:30}
.ss-pile[data-depth="1"]{transform:rotate(-5deg) translate(-14px,8px);z-index:20}
.ss-pile[data-depth="2"]{transform:rotate(4deg) translate(14px,12px);z-index:10}
.ss-pile[data-depth="3"]{transform:rotate(-2deg) translate(-4px,-10px);z-index:5}
/* slide dots (clickable) */
.ss-dot{width:8px;height:8px;min-width:8px;border-radius:9999px;border:0;padding:0;margin:0;background:rgba(24,23,19,.22);cursor:pointer;transition:width .3s ease,background-color .3s ease}
.ss-dot.is-on{width:24px;background:#FFC531}
.ss-dot:hover{background:#F2B41C}
@media (prefers-reduced-motion:reduce){.ss-slide,.ss-pile,.ss-dot{transition:none}}
/* Testimonial carousel: directional slide — quotes exit toward one side and the
   neighbor's quote glides in from the other, so items visibly rotate one slot over.
   JS sequence: .ss-tsl-out-l/r (animated exit) → swap text → .ss-tsl-snap +
   .ss-tsl-in-r/l (jump to entry side, no transition) → release (animated entry). */
[data-ss-tsl] .ss-tsl-fade{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}
[data-ss-tsl].ss-tsl-snap .ss-tsl-fade{transition:none!important}
[data-ss-tsl].ss-tsl-out-l .ss-tsl-fade{opacity:0;transform:translateX(-44px)}
[data-ss-tsl].ss-tsl-out-r .ss-tsl-fade{opacity:0;transform:translateX(44px)}
[data-ss-tsl].ss-tsl-in-r .ss-tsl-fade{opacity:0;transform:translateX(44px)}
[data-ss-tsl].ss-tsl-in-l .ss-tsl-fade{opacity:0;transform:translateX(-44px)}
@media (prefers-reduced-motion:reduce){
  [data-ss-tsl] .ss-tsl-fade{transition:none}
  .ss-arrow{transition:none}
}
/* Floating glass header: sticky reserves the header's normal flow space, so
   it pins to the viewport top the instant scrolling starts with no layout
   jump (unlike position:fixed, which would need a manual spacer). Once
   pinned, page content already scrolls underneath it — the .is-scrolled
   glass/pill look (toggled by the wp_footer script) just makes that
   visible via a translucent, blurred bar instead of a plain edge-to-edge one.
   The inset/floating look comes from side padding on .ss-header itself, NOT
   from shrinking .ss-header-bar's max-width: that div carries Tailwind's
   `max-w-[1200px]!` (important, @layer utilities), and per the cascade-layers
   spec an !important declaration inside ANY layer beats an !important
   declaration outside all layers, regardless of specificity — so a plain
   unlayered override here could never win. Padding on the parent sidesteps
   the fight entirely (the child just has less available width to fill). */
.ss-header{position:sticky;top:0;z-index:50;transition:top .35s ease,padding .35s ease}
.ss-header.is-scrolled{top:14px;padding-left:clamp(16px,6vw,110px);padding-right:clamp(16px,6vw,110px)}
.ss-header-bar{transition:padding .35s ease,border-radius .35s ease,background-color .35s ease,box-shadow .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.ss-header.is-scrolled .ss-header-bar{border-radius:28px!important;background-color:rgba(251,249,243,.78)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;backdrop-filter:blur(20px) saturate(180%)!important;box-shadow:0 14px 40px rgba(24,23,19,.16),inset 0 1px 0 rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.55)!important;padding-top:10px!important;padding-bottom:10px!important}
@media (prefers-reduced-motion:reduce){.ss-header,.ss-header-bar{transition:none}}
/* Mobile nav open/close, forced: Astra parent theme + assorted plugins print
   their own unlayered CSS touching bare `nav`/menu selectors, and unlayered
   CSS always beats Tailwind v4 utilities (they live in @layer utilities) no
   matter the specificity or source order — the exact failure mode already
   hit on link colors and heading sizes elsewhere in this file. That silently
   defeated the `hidden`/`peer-checked:block` utilities on the mobile dropdown,
   so it rendered open all the time regardless of the checkbox. This mirrors
   the same open/close logic with unlayered !important, immune to interference. */
@media (max-width:1023.98px){
  .ss-nav{display:none!important}
  #ss-nav-toggle:checked ~ .ss-nav{display:block!important}
}
/* Blog pagination: same bare-`nav`-element failure as the mobile dropdown
   above — Astra/plugins print unlayered CSS on plain `nav` that beats
   Tailwind's layered flex/grid utilities regardless of specificity, so the
   prev/next + page-number row collapsed into a vertical stack. Dedicated
   classes + !important sidestep the fight entirely. */
.ss-pagination{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:56px!important}
.ss-pagenum{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;margin:0!important;line-height:1!important;box-sizing:border-box!important;border-radius:50%!important;font-size:12px!important;font-weight:700!important;text-decoration:none!important;flex:none!important}
.ss-pagenum.is-current{background-color:#181713!important;color:#fff!important;border:0!important}
.ss-pagenum.is-link{background:transparent!important;border:1px solid rgba(24,23,19,.15)!important;color:#181713!important}
.ss-pagenum.is-link:hover{background-color:#FFC531!important;border-color:#FFC531!important;color:#181713!important}
.ss-pagenum.is-dots{border:0!important;color:#72716A!important}
/* Blog hero lead paragraph: Astra Customizer typography prints an unlayered
   global `p{margin:...}` shorthand rule (same failure noted on
   .ss-foot-tagline above) that overrides Tailwind's mx-auto AND mt-* — it
   was both flush left instead of centered under the title, and sitting hard
   against the title with the top-margin utility silently defeated too. */
.ss-hero-lead{margin:24px auto 0!important;max-width:560px!important}
/* Single blog post detail: matches the "glass lid" card used on the home
   page (front-page.php) and page-privacy-policy.php — a translucent,
   blurred outer rim around an opaque inner panel. Those use two nested
   divs; .ast-article-single is a single element printed by Astra's parent
   template (template-parts/content-single.php), so the inner opaque panel
   is faked with a ::before sized 10px in from the edges (matching the
   home page's p-2.5 rim) — real content keeps sitting on solid white for
   long-form legibility, only the thin rim shows the blur/translucency.
   Scoped to .single-post (post type only) so it never touches the custom
   page templates, which build the two-layer version with real markup. */
.single-post .ast-article-single{position:relative!important;border-radius:28px!important;background-color:rgba(255,255,255,.35)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 36px rgba(24,23,19,.09)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;overflow:hidden!important}
.single-post .ast-article-single::before{content:"";position:absolute;inset:10px;border-radius:20px;background-color:#fff;z-index:0}
.single-post .ast-article-single>*{position:relative;z-index:1}
/* Main/featured image: rounded corners matching the blog card thumbnail
   treatment. img.wp-post-image is WP core's own class on the featured
   image, so this catches it wherever Astra positions it (behind/above/
   inline the header) without needing to know which banner layout is active. */
.single-post img.wp-post-image,.single-post .ast-single-post-featured-section,.single-post .post-thumb{border-radius:20px!important;overflow:hidden!important}
/* Prev/next post navigation: same bordered-pill / brand-yellow-hover
   language as .ss-pagenum/.ss-arrow (blog list pagination), so single-post
   navigation reads as the same component instead of Astra's plain text
   links. It sits outside the card above (a sibling of .ast-article-single,
   not a child), so it gets its own spacing rather than the card's padding. */
.single-post .post-navigation{border-top:0!important;margin-top:40px!important;padding-top:0!important}
.single-post .post-navigation .nav-links{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
.single-post .post-navigation .nav-previous,.single-post .post-navigation .nav-next{width:auto!important;flex:0 1 auto!important;margin:0!important}
.single-post .post-navigation .nav-next{margin-left:auto!important;text-align:right!important}
.single-post .post-navigation a{display:inline-flex!important;align-items:center!important;gap:8px!important;width:auto!important;height:auto!important;margin:0!important;padding:13px 22px!important;line-height:1.2!important;border-radius:9999px!important;border:1px solid rgba(24,23,19,.15)!important;background-color:transparent!important;color:#181713!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.1em!important;text-decoration:none!important;transition:background-color .2s ease,border-color .2s ease,color .2s ease!important}
.single-post .post-navigation a:hover{background-color:#FFC531!important;border-color:#FFC531!important;color:#181713!important}
.single-post .post-navigation .ss-postnav-arrow{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:14px!important;height:14px!important;flex:none!important}
.single-post .post-navigation .ss-postnav-arrow svg{width:14px!important;height:14px!important;display:block!important}
.single-post .post-navigation .nav-previous .ss-postnav-arrow{transform:rotate(180deg)!important}
/* Post tag chips ("Tagged:" row, appended by the sc-latest-posts plugin's
   the_content filter): the plugin's own inline <style> colors these with
   --sc-acc/--sc-acc-deep/--sc-acc-rgb custom properties that only existed
   in the old dark design system (sc_global_modern_css, unhooked in
   functions.php) — with those vars now undefined, the gradient background
   resolves to transparent while :hover's hardcoded `color:#fff` still
   applies, so hovering a chip turned it white-on-transparent (invisible).
   Hardcoded ink/brand-yellow values replace the broken var() references. */
.sc-tags{border-top-color:rgba(24,23,19,.1)!important}
.sc-tags-label{color:#72716A!important}
.sc-tag-chip{background:rgba(24,23,19,.05)!important;border-color:rgba(24,23,19,.15)!important;color:#181713!important}
.sc-tag-chip:hover{background:#FFC531!important;border-color:#FFC531!important;color:#181713!important}
/* Scroll reveal (sitewide): sections/cards rise + fade in as the visitor
   scrolls to them. Progressive enhancement only — the hidden state keys off
   data-ss-reveal-init, which JS (ssc_scroll_reveal_assets in functions.php)
   adds right before it starts observing, so content stays fully visible if
   JS never runs. */
[data-ss-reveal-init]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);transition-delay:var(--ss-delay,0ms)}
[data-ss-reveal-init].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-ss-reveal-init]{transition:none;transform:none}}