/* ============================================================
   FLAIR — site styles
   Physical stylesheet loaded on the front end (inc/assets.php)
   and inside the block editor iframe (inc/setup.php,
   add_editor_style). Rules that must render identically in both
   contexts live here, not in theme.json's css field.

   Prefix convention: every custom class is prefixed flair-.
   ============================================================ */

/* ---- Design tokens: shadow and motion. Every box-shadow/transition
   declaration in this file (and in popups.css/banners.css) reads
   these instead of a hardcoded value, so the Shadow/Motion style
   pickers (Appearance > Flair, inc/settings.php) can retheme the
   whole site by overriding just these six custom properties via a
   small inline <style> block — see flair_design_token_css() in
   inc/settings.php. The values below ARE the "Medium" shadow /
   "Standard" motion presets, unchanged from what this theme looked
   like before the picker existed, so leaving both settings on their
   defaults changes nothing visually. Per-popup Animation choices
   (fade/slide/zoom/bounce, set in that popup's own settings panel)
   are a separate, deliberately independent concept — an explicit
   per-item author choice, not overridden by the site-wide Motion
   token. ---- */
:root{
  --flair-shadow-sm:0 2px 8px rgba(40,46,51,.10);
  --flair-shadow-md:0 6px 18px rgba(40,46,51,.16);
  --flair-shadow-lg:0 2px 4px rgba(40,46,51,.04),0 20px 48px rgba(40,46,51,.10);
  --flair-motion-fast:.18s;
  --flair-motion-slow:.4s;
  --flair-motion-ease:ease;
}

/* ---- Flow rhythm: full-width bands sit flush; inner content
   breathes with the SM token. Editor selectors included so the
   backend preview matches the front end ---- */
.is-layout-flow > * + *:not(.alignfull){margin-top:var(--wp--preset--spacing--sm)}
.is-layout-constrained > * + *{margin-top:var(--wp--preset--spacing--sm)}
.editor-styles-wrapper .is-layout-flow > * + *:not(.alignfull){margin-block-start:var(--wp--preset--spacing--sm)!important}
.editor-styles-wrapper .is-layout-constrained > * + *{margin-block-start:var(--wp--preset--spacing--sm)!important}

/* ---- Tables: hairlines only, per the brand guidelines ---- */
.wp-block-table figure{margin:0}
.wp-block-table,
.wp-block-table table{border:none!important;border-collapse:collapse;width:100%}
.wp-block-table thead{border-bottom:none!important}
.wp-block-table th,
.wp-block-table td{border:none!important;border-bottom:1px solid var(--wp--preset--color--background-alt)!important;padding:.6em .9em}
.wp-block-table thead th{background:var(--wp--preset--color--background-alt);
  font-family:var(--wp--preset--font-family--headings);font-weight:600;
  color:var(--wp--preset--color--foreground);text-align:left}

/* ---- Pull quote: left-aligned, gradient left rule, large italic
   quote, subtle attribution ---- */
.wp-block-pullquote{
  text-align:left;
  border:none!important;
  border-left:4px solid transparent!important;
  border-image:var(--wp--preset--gradient--brand) 1!important;
  padding:var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  margin:var(--wp--preset--spacing--xl) 0;
}
.wp-block-pullquote blockquote{margin:0;padding:0}
.wp-block-pullquote p{
  font-family:var(--wp--preset--font-family--headings);
  font-weight:600;font-style:italic;
  font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  line-height:1.35;letter-spacing:-0.01em;
  color:var(--wp--preset--color--foreground);
  margin-bottom:var(--wp--preset--spacing--sm);
}
.wp-block-pullquote cite{
  display:block;text-align:left;
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--small);
  font-style:normal;text-transform:none;letter-spacing:0;
  color:var(--wp--preset--color--muted);
}

/* ---- Header (pattern flair/header): the translucent bar look
   is always on; the sticky behavior is opt-in from Appearance >
   Flair and scoped to the flair-sticky-header body class.
   Sticky lives on the template part wrapper, because position:
   sticky is constrained by the parent's height and the pattern's
   own wrapper is only as tall as the header ---- */
.flair-header{background:color-mix(in srgb,var(--wp--preset--color--background) 93%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--wp--preset--color--background-alt)}
.flair-sticky-header .wp-block-template-part:has(.flair-header){position:sticky;
  top:var(--wp-admin--admin-bar--height, 0);z-index:60}
.flair-sticky-header .flair-header{position:sticky;
  top:var(--wp-admin--admin-bar--height, 0);z-index:60}
.flair-header .wp-block-site-title a{text-decoration:none}
.flair-login a{font-family:var(--wp--preset--font-family--body);font-weight:500;
  color:var(--wp--preset--color--foreground);text-decoration:none;transition:color var(--flair-motion-fast) var(--flair-motion-ease)}
.flair-login a:hover{color:var(--wp--preset--color--primary)}

/* Small button: reduced padding to match .btn-sm from the templates */
.wp-block-button .has-small-font-size{padding:.7em 1.55em}

/* ---- Footer (pattern flair/footer) ---- */
.flair-footer a{color:color-mix(in srgb,var(--wp--preset--color--background) 72%,transparent);text-decoration:none;transition:color var(--flair-motion-fast) var(--flair-motion-ease)}
.flair-footer a:hover{color:var(--wp--preset--color--background)}
.flair-footer .wp-block-site-title a{color:var(--wp--preset--color--background);text-decoration:none}
.flair-footer p,.flair-footer li{color:color-mix(in srgb,var(--wp--preset--color--background) 72%,transparent)}
.flair-footer-heading{color:var(--wp--preset--color--background);font-weight:700}
.flair-footer .wp-block-navigation a{color:color-mix(in srgb,var(--wp--preset--color--background) 72%,transparent);text-decoration:none}
.flair-footer .wp-block-navigation a:hover{color:var(--wp--preset--color--background)}
.flair-footer-logo img{filter:brightness(0) invert(1)} /* core/site-logo has no light/dark variant; this makes the one uploaded logo read on the dark footer band */

/* ---- Footer junction: nothing may add space between the last
   content section and the footer. The signup band's own top
   padding is the only air at the seam ---- */
body > .wp-site-blocks > .wp-block-template-part{margin-top:0}
.wp-block-template-part > *:first-child{margin-top:0}

/* ---- Read more link: a subtle eyebrow-style link with an arrow
   cue that it opens the post ---- */
.wp-block-post-excerpt__more-link{
  font-family:var(--wp--preset--font-family--headings);
  font-weight:600;
  font-size:var(--wp--preset--font-size--small);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted);
  text-decoration:none;
  transition:color var(--flair-motion-fast) var(--flair-motion-ease);
}
.wp-block-post-excerpt__more-link::after{content:"\2192";margin-left:.5em;transition:margin-left var(--flair-motion-fast) var(--flair-motion-ease)}
.wp-block-post-excerpt__more-link:hover{color:var(--wp--preset--color--primary)}
.wp-block-post-excerpt__more-link:hover::after{margin-left:.8em}

/* ---- Category as eyebrow above post titles: eyebrow styling,
   never a pill (used on the single post template) ---- */
.flair-eyebrow-terms{
  font-family:var(--wp--preset--font-family--headings);
  font-weight:700;
  font-size:var(--wp--preset--font-size--small);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--secondary);
}
.flair-eyebrow-terms a{background:none!important;padding:0;color:inherit;text-decoration:none}
.flair-eyebrow-terms a:hover{color:var(--wp--preset--color--primary)}

/* ---- Author headline: the one-line role under the author name
   in the signature card and the author archive header ---- */
.flair-author-headline{display:block;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--muted)}
.wp-block-post-author-name a{text-decoration:none}
.wp-block-post-author-name a:hover{color:var(--wp--preset--color--primary)}

/* ---- Author headline as the label on author archives (the
   signature card keeps the small muted note styling) ---- */
.flair-headline-as-eyebrow .flair-author-headline{
  display:block;
  font-family:var(--wp--preset--font-family--headings);
  font-weight:700;
  font-size:var(--wp--preset--font-size--small);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--secondary);
}

/* ---- Author links: the Website/Public email row on the author
   archive header ---- */
.flair-author-links{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--muted)}
.flair-author-links a{color:inherit;text-decoration:underline}
.flair-author-links a:hover{color:var(--wp--preset--color--primary)}

/* ---- Loop rows: the featured image stretches with the content
   column, with a 280px minimum width and a 4:3 minimum height,
   so it always stays proportioned; the excerpt clamps to three
   lines so long excerpts can never stretch a row ---- */
.wp-block-post-template article .wp-block-post-featured-image{
  flex:0 0 280px;
  min-height:210px;
  align-self:stretch;
}
.wp-block-post-template article .wp-block-post-featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.wp-block-post-template article .wp-block-post-excerpt__excerpt{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---- Loop rows on mobile (60em breakpoint): the image stacks
   above the post details at full width instead of squeezing
   beside them ---- */
@media (max-width: 60em) {
  .wp-block-post-template article.wp-block-group{flex-direction:column}
  .wp-block-post-template article .wp-block-post-featured-image{
    flex:none;
    min-height:0;
    width:100%;
  }
  .wp-block-post-template article .wp-block-post-featured-image img{
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
  }
}

/* ---- Reading time in the post meta row: same treatment as the
   date (small, muted) ---- */
.flair-reading-time{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--muted)}
.wp-block-shortcode{display:contents}

/* ---- Single post hero image: cap the height so the title block
   and the full image fit on a desktop screen at once ---- */
body.single .wp-block-post-featured-image{max-height:62vh;overflow:hidden}
body.single .wp-block-post-featured-image img{width:100%;height:100%;max-height:62vh;object-fit:cover}

/* ---- Comments: not used in the templates yet, but styled so
   enabling comments never looks broken. Block comments and the
   classic comment list are both covered; form fields inherit the
   pill input styles and the submit button takes the gradient ---- */
.wp-block-comment,.comment{border-bottom:1px solid var(--wp--preset--color--border);
  padding:var(--wp--preset--spacing--lg) 0}
.wp-block-comment-author-name,.comment-author .fn{font-family:var(--wp--preset--font-family--headings);
  font-weight:600;color:var(--wp--preset--color--foreground)}
.wp-block-comment-date,.comment-metadata{font-size:var(--wp--preset--font-size--small);
  color:var(--wp--preset--color--muted)}
.wp-block-comment-reply-link,.comment-reply-link{font-family:var(--wp--preset--font-family--headings);
  font-weight:600;font-size:var(--wp--preset--font-size--small);letter-spacing:.12em;
  text-transform:uppercase;color:var(--wp--preset--color--primary);text-decoration:none}
.comment-respond .comment-reply-title{font-family:var(--wp--preset--font-family--headings);
  font-weight:700;font-size:var(--wp--preset--font-size--h3)}
.comment-form .form-submit .submit{border:none;cursor:pointer}

/* ---- Text selection: highlighted text reads white on the
   brand gradient, on brand even mid-gesture ---- */
::selection{background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--background)}
::-moz-selection{background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--background)}

/* ---- Step number chips: gradient rounded square, white numeral
   (used by the steps-row pattern) ---- */
.flair-step-num{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:min(.5rem,var(--wp--custom--card-radius,.5rem));
  background:var(--wp--preset--gradient--brand);
  color:var(--wp--preset--color--background);
  font-family:var(--wp--preset--font-family--headings);font-weight:700;
  font-size:var(--wp--preset--font-size--small)}

/* ---- Pain cards: the left accent border from the home design ---- */
.flair-pain-card{border-left:3px solid var(--wp--preset--color--primary)!important}

/* ---- Checklists on gradient cards: checks read white — but a light
   panel nested inside the gradient (a white card, .is-style-card)
   resets its own text back to dark (see the "Band text rules" block
   below); the checklist icon needs the same reset, or it stays
   invisible-white on a light card. ---- */
.has-brand-gradient-background .is-style-checklist li::before{color:var(--wp--preset--color--background)}
.has-brand-gradient-background :is(.has-background-background-color,.is-style-card) .is-style-checklist li::before{color:var(--wp--preset--color--secondary)}

/* ---- Price suffix: the /month note inside pricing headings ---- */
.flair-price-note{font-size:var(--wp--preset--font-size--lead);font-weight:600;opacity:.85}

/* ---- Band text rules, explicit: paragraphs and list items on
   gradient or charcoal bands read white by default, per the
   guidelines; light panels inside bands keep their dark text ---- */
.has-brand-gradient-background p,
.has-brand-gradient-background li,
.has-foreground-background-color p,
.has-foreground-background-color li{color:var(--wp--preset--color--background)}
.has-brand-gradient-background :is(.has-background-background-color,.is-style-card) :is(p,li,h1,h2,h3,h4,h5,h6){
  color:var(--wp--preset--color--foreground)
}

/* ---- Decorative accent (toolbar format + pattern kicker lines):
   the accent typeface, living in the physical stylesheet so it
   renders everywhere ---- */
.flair-decorative{font-family:var(--wp--preset--font-family--accent);font-weight:600;font-size:1.15em;line-height:1.2}

/* ---- Landing hero card: rounded corners must clip the dark
   header strip ---- */
.flair-landing-card{overflow:hidden}

/* ---- Back to top: floating button, in the DOM only when the
   Appearance > Flair "Back to top" setting is on (inc/settings.php
   prints the markup, inc/assets.php enqueues assets/js/back-to-top.js).
   Bottom-LEFT by default: the popup system's corner-launcher style
   already claims bottom-right (assets/css/popups.css), and both can be
   on the same page at once. The "Back to top position" setting adds
   .flair-back-to-top--right when the site needs the other corner
   instead (e.g. a cookie-consent widget sitting bottom-left). ---- */
.flair-back-to-top{
  position:fixed;left:var(--wp--preset--spacing--lg);bottom:var(--wp--preset--spacing--lg);
  z-index:8000;
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:50%;
  background:var(--wp--preset--gradient--brand);color:var(--wp--preset--color--background);
  border:none;cursor:pointer;box-shadow:var(--flair-shadow-md);
  opacity:0;transform:translateY(.5rem);pointer-events:none;
  transition:opacity var(--flair-motion-slow) var(--flair-motion-ease),transform var(--flair-motion-slow) var(--flair-motion-ease);
}
.flair-back-to-top--right{left:auto;right:var(--wp--preset--spacing--lg)}
.flair-back-to-top .dashicons{font-size:1.3rem;line-height:1}
.flair-back-to-top:hover{transform:translateY(0) scale(1.06)}
.flair-back-to-top-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  .flair-back-to-top{transition:none!important}
}

/* ---- Decorative opt-in form fields: no form plugin is wired up in
   this theme, so every lead-capture form (blog signup band, lead
   magnet landing page, the "CTA: Optin card" pattern) is a wp:html
   block with real <input>/<label>/<button> markup that doesn't submit
   anywhere yet — wire the <form action="..."> up to your ESP/CRM after
   inserting. The inputs themselves inherit the global
   input[type=...] styling already defined above; this just handles
   label placement and field-to-field spacing. The submit button uses
   the theme's own .wp-element-button class, so it already matches
   every other button on the site with no extra CSS needed here. ---- */
.flair-optin{display:block;width:100%;max-width:100%;box-sizing:border-box}
.flair-optin *{max-width:100%;box-sizing:border-box}
.flair-optin-field{display:block;margin-top:var(--wp--preset--spacing--sm)}
.flair-optin-field:first-child{margin-top:0}
.flair-optin-field label{
  display:block;font-family:var(--wp--preset--font-family--headings);font-weight:600;
  font-size:var(--wp--preset--font-size--small);margin-bottom:.375rem;color:var(--wp--preset--color--foreground);
}
.flair-optin-field label .flair-optin-required{color:var(--wp--preset--color--accent)}
.flair-optin-field input{width:100%;display:block}
.flair-optin-submit{margin-top:var(--wp--preset--spacing--sm);border:none;cursor:pointer;width:100%;text-align:center}
.flair-optin-note{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--muted);margin-top:var(--wp--preset--spacing--xs);line-height:1.5}

/* ---- Optin card: boxed variant (gradient header strip + white body),
   used by the "CTA: Optin card" pattern and the lead-magnet landing
   template. Same card shadow/radius language as .flair-popup-panel and
   is-style-card elsewhere in this theme. ---- */
.flair-optin-card{
  background:var(--wp--preset--color--background);border-radius:min(1.25rem,var(--wp--custom--card-radius,1.25rem));
  box-shadow:var(--flair-shadow-lg);overflow:hidden;
}
.flair-optin-card-top{
  background:var(--wp--preset--gradient--brand);color:var(--wp--preset--color--background);
  padding:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}
.flair-optin-card-top .flair-decorative{font-size:1.5rem;line-height:1;opacity:.95;color:inherit}
.flair-optin-card-top p{color:var(--wp--preset--color--background);margin-top:.125rem;font-weight:700;font-family:var(--wp--preset--font-family--headings)}
.flair-optin-card-top :is(h1,h2,h3,h4,h5,h6){color:var(--wp--preset--color--background)}
.flair-optin-card-body{padding:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg)}
.flair-optin-card .flair-optin-submit{margin-top:var(--wp--preset--spacing--sm)}

/* ---- Wins row: numbered benefit cards, meant to overlap the bottom
   of a hero band on lead-magnet landing pages ("CTA: Wins row"
   pattern). Negative margin pulls it up over the section above; give
   that section enough bottom padding that the overlap has room to sit
   in, same idea as the blog template's featured-post/article overlap. ---- */
.flair-wins-row{position:relative;z-index:5;margin-top:-4.375rem;padding-top:var(--wp--preset--spacing--md)}
@media(max-width:60em){.flair-wins-row{margin-top:-2.5rem}}
.flair-win-ico{
  width:2.125rem;height:2.125rem;border-radius:min(.625rem,var(--wp--custom--card-radius,.625rem));background:var(--wp--preset--gradient--brand);
  color:var(--wp--preset--color--background);display:flex;align-items:center;justify-content:center;
  font-family:var(--wp--preset--font-family--headings);font-weight:700;font-size:var(--wp--preset--font-size--small);
  margin-bottom:var(--wp--preset--spacing--sm);
}

/* ---- Skip link: output on wp_body_open (inc/setup.php,
   flair_skip_link()), before the header template part, so it's the
   very first focusable element on every page. WordPress core's own
   .screen-reader-text visual-hiding technique (not display:none, so
   it stays reachable by keyboard/AT and only becomes visible once
   focused) — every default block theme uses the same pattern. ---- */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  overflow:hidden;position:absolute!important;white-space:nowrap;word-wrap:normal;
}
.flair-skip-link:focus{
  clip:auto!important;clip-path:none;height:auto;width:auto;
  position:fixed;top:var(--wp--preset--spacing--sm);left:var(--wp--preset--spacing--sm);
  z-index:100000;padding:var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  background:var(--wp--preset--color--background);color:var(--wp--preset--color--foreground);
  border-radius:.5rem;box-shadow:var(--flair-shadow-md);
  font-family:var(--wp--preset--font-family--headings);font-weight:700;
}

/* ---- Stacked scroll ("Stack" style, core/group + core/cover,
   registered in inc/block-styles.php): kept here rather than
   theme.json's styles.css string like most other .is-style-* rules,
   since a hand-edited escape mistake in that one giant JSON string
   would break the whole theme.

   The "photos in your hand" effect: apply this to a run of consecutive
   sections and, instead of each one scrolling past, every section
   sticks to the top of the viewport until the next one scrolls up and
   physically covers it — like flipping through a stack of prints
   rather than reading a long page. Pure CSS (position:sticky), no JS
   and no library: later sections simply paint over earlier ones
   because they come later in the DOM and neither sets a z-index, which
   is enough on its own for the covering effect.

   Two things this style can't enforce, so they're on whoever builds
   the section instead:
     - An opaque background (the block's own Background color, or a
       Cover's image) — without one, the section underneath shows
       through instead of being covered.
     - No ancestor between this block and the page root can have its
       own overflow:hidden/auto, or position:sticky stops working
       entirely (a browser limitation, not something CSS here can work
       around). ---- */
.is-style-stack{position:sticky;top:0;min-height:100vh}
@supports (min-height:100dvh){.is-style-stack{min-height:100dvh}}

/* ---- Image tile label ("Layout: Image category grid" pattern,
   patterns/image-category-grid.php): a flat white rectangle over a
   full-bleed photo tile — sharp corners on purpose, not the pill/ghost
   button styles used everywhere else in this theme, since this reads
   as an overlay caption rather than a themed button. ---- */
.flair-image-tile-label{
  display:inline-block;background:var(--wp--preset--color--background);color:var(--wp--preset--color--foreground);
  padding:.6em 1.4em;font-family:var(--wp--preset--font-family--headings);font-weight:600;
  font-size:var(--wp--preset--font-size--small);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
}
.flair-image-tile-label:hover{text-decoration:underline}