/* WordPress's automatic block-gap spacing (theme.json settings.spacing.
   blockGap:true) inserts a margin-top between EVERY top-level sibling
   under .wp-site-blocks — including header → main and main → footer,
   which are template parts, not content the user placed. That leaves a
   ~24px seam of the raw body background between the header/content/footer
   on every single page, site-wide (confirmed identical on both the
   homepage and inner pages). It stays invisible when a section's own
   background happens to match the body's base color and becomes a very
   visible "disconnected" gap the moment it doesn't (e.g. the eCommerce PPC
   page's warm hero gradient against the plain dark body). This site's
   whole design language is full-bleed, edge-to-edge dark sections, so the
   root-level gap is never wanted — zero it here rather than on a
   per-template or per-page basis. Ordinary in-content block-gap spacing
   (between blocks a user actually stacks inside a page) is untouched. */
body > .wp-site-blocks > main,
body > .wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* A second, deeper instance of the same blockGap mechanism: Stravum
   Builder/Blocks widgets each render their own per-instance <style> tag
   as an actual sibling element right before their container div (not
   hoisted to <head>). It's zero-size and invisible, but WordPress's
   blockGap CSS uses a sibling combinator (.is-layout-flow > * + *) that
   only skips margin-top on the literal first child. When a page's first
   widget happens to emit that leading <style> tag, the <style> becomes
   "child 1" and the widget's real container becomes "child 2" — so it
   wrongly inherits the between-blocks gap and sits 24px below where the
   content area actually starts, disconnected from the header above it.
   Zero it specifically for that one case; ordinary spacing between two
   real content blocks is untouched. */
.entry-content > style:first-child + * {
	margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   Stravum — custom effects that Tailwind utilities can't express,
   plus header/footer chrome. Loaded on the front end AND in the editor.
   ------------------------------------------------------------------ */

.gradient-text {
    background: linear-gradient(135deg, #ffb4a4 0%, #fd5b38 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ticker-wrap { overflow: hidden; }
.ticker { display: flex; animation: ticker 30s linear infinite; }
@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---------------------------- Site header ---------------------------
   Sticky lives on the template-part WRAPPER (the element WordPress renders
   around the part) — position:sticky on the inner group can never stick,
   because its parent is exactly its own height. */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 50;
}
.stravum-header {
    background: rgba(16, 19, 26, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stravum-header .wp-block-site-title a { color: #fff; text-decoration: none; }

/* The core wp:navigation block is no longer in the header — it was replaced by
   the Stravum Builder Mega Menu (stravum-builder/mega-menu and family, styled
   in the plugin's assets/parts/mega-menu.css). The rules that used to live here
   — `.stravum-header .wp-block-navigation a` link colours and the whole
   `.wp-block-navigation__responsive-container.is-menu-open` dark-overlay
   override set — targeted markup that no longer renders anywhere on the site,
   so they were removed rather than left as dead weight. Nothing replaces them
   here: the mega menu ships its own drawer styling. */

/* NOTE for future header edits: the frosted-glass `backdrop-filter` on the
   header container makes that container the containing block for any
   position:fixed descendant, which silently traps overlays inside the header's
   own 87px box. The Mega Menu widget handles this itself by moving its drawer
   onto a <body>-level host while open (see assets/widgets.js in
   stravum-builder), so the blur can stay — but anything else fixed-position
   added inside this header will need the same treatment. */

/* Header CTA button: on mobile the header row (logo + hamburger + button)
   has no room for the full-size button, so the label was wrapping onto
   multiple lines and visually colliding with the menu toggle beside it. */
@media (max-width: 600px) {
    .stravum-header .wp-block-button__link,
    .st-site-header .wp-block-button__link {
        white-space: nowrap;
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* …but `white-space:nowrap` above also means the CTA can no longer shrink,
   and on a 320px phone the header row simply does not fit: measured at 320px
   the row needs 120px logo + 40px burger + 98px button + 2x24px gap = 306px
   inside a 280px content box, so the button hung 41px past the header and
   pushed the whole document 21px wider than the viewport. Tightening the gap
   and the two flexible items below brings it to ~252px, which fits with room
   to spare. Kept to <=400px so nothing changes on ordinary phones. */
@media (max-width: 400px) {
    .stravum-header .st-container-inner,
    .st-site-header .st-container-inner {
        gap: 12px;
        min-width: 0;
    }
    .stravum-header .wp-block-site-logo img,
    .st-site-header .wp-block-site-logo img {
        max-width: 104px;
        height: auto;
    }
    .stravum-header .wp-block-button__link,
    .st-site-header .wp-block-button__link {
        font-size: 12px;
        padding: 9px 11px;
    }
}

/* ------------------- Decorative bleed containment -------------------
   Several sections use oversized blurred "glow" divs (e.g. `absolute
   -inset-10 ... blur-[100px]`) that deliberately extend past their parent.
   On wide screens the page has slack to absorb that; on a phone the glow on
   the results section stuck 20px past the right edge and made the WHOLE
   document scroll sideways.

   `overflow-x: clip` — NOT `hidden` — is deliberate:
     * `hidden` creates a scroll container, and a scroll-container ancestor
       silently breaks `position: sticky`;
     * `clip` does not, so it cannot regress the sticky site header.
   It is scoped to `main`, which is NOT an ancestor of the sticky header
   (that lives directly under .wp-site-blocks), and which contains no
   sticky/fixed elements of its own — so this can only ever clip decorative
   content-area bleed. */
main {
    overflow-x: clip;
}

/* ------------------------ Touch target floors ------------------------
   WCAG 2.5.5 / iOS HIG want interactive controls to be at least 44x44
   CSS px. Audit measured the header CTA at 86x33 and the menu burger at
   40x32 — both are primary controls (the main conversion button and the
   only way to open navigation on a phone), so both were comfortably
   under-sized for a thumb.

   Height is raised via min-height + inline-flex centering rather than
   extra padding, so the visual size of the button face is unchanged on
   desktop while the touch box grows. Width is left alone on the CTA:
   the 320px header row is already tight (see the max-width:400px block
   above) and the button is 86px wide, well past the 44px floor. */
.st-site-header .wp-block-button__link,
.stravum-header .wp-block-button__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.st-mm-burger,
.st-mm-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------- Site footer --------------------------- */
.stravum-footer { background: #0A0C10; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.stravum-footer a { color: #A9ADC1; text-decoration: none; }
.stravum-footer a:hover { color: #ffb4a4; }

/* --------------- Post/page prose (single, page templates) ----------- */
.stravum-prose { color: #A9ADC1; font-family: "IBM Plex Sans", sans-serif; line-height: 1.75; }
.stravum-prose h1, .stravum-prose h2, .stravum-prose h3, .stravum-prose h4 { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; }
.stravum-prose a { color: #ffb4a4; }
.stravum-prose a:hover { color: #fd5b38; }
.stravum-prose img { border-radius: 1rem; }
.stravum-prose blockquote { border-left: 3px solid #fd5b38; padding-left: 1.25rem; color: #e3beb6; font-style: italic; }

/* ---------------------------- Breadcrumbs --------------------------- */
.stravum-breadcrumbs { margin-bottom: 20px; }
.stravum-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-family: "Geist", sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A9ADC1;
}
.stravum-breadcrumbs li { display: flex; align-items: center; gap: 10px; }
.stravum-breadcrumbs li + li::before { content: "›"; color: #fd5b38; }
.stravum-breadcrumbs a { color: #A9ADC1; text-decoration: none; }
.stravum-breadcrumbs a:hover { color: #ffb4a4; }
.stravum-breadcrumbs [aria-current="page"] { color: #e0e2ec; }

/* Keep the editor canvas dark so previews read like the front end. */
.editor-styles-wrapper { background-color: #10131a; }

/* ---------------------------- Blog / archive cards -------------------
   ROOT CAUSE of the "Hell / o / worl / d!" char-by-char wrap bug:
   WordPress's saved Global Styles record currently resolves
   --wp--style--global--content-size / --wide-size to "50%" (theme.json
   ships 1200px/1440px, but a Global Styles DB override — from the Site
   Editor's Styles panel — takes precedence over theme.json and is
   currently a stray percentage instead of a fixed unit).
   Core's `.is-layout-constrained > * { max-width: var(--wp--style--global--content-size) }`
   rule applies at EVERY nesting level. The card markup nests two
   layout:"constrained" groups (.stravum-card > inner text group), so the
   bad 50% compounds twice (50% of 50%) — on a ~373px card that shrinks
   the title/excerpt column to ~70px, forcing text to wrap one glyph at
   a time.
   Fix: re-declare a sane content-size scoped to the card. Custom
   properties inherit, so this single declaration fixes every nested
   constrained group inside the card without touching global styles or
   block markup. */
.stravum-card {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
    overflow: hidden; /* clip the featured image's rounded top corners to the card edge */
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.stravum-card .wp-block-post-title a {
    line-height: 1.3;
}
.stravum-card .wp-block-post-excerpt {
    line-height: 1.7;
}

/* Blog/archive grid: collapse 3 cols -> 2 on tablet -> 1 on mobile.
   `.columns-3` is the stable class WP adds from the block's columnCount
   attribute (unlike the per-block layout hash class, it's the same on
   every request), so it's safe to target directly here. */
@media (max-width: 1023px) {
    .wp-block-post-template.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .wp-block-post-template.columns-3 { grid-template-columns: 1fr; }
}

/* ---- Comments ---- */

/* Container: breathing room + a divider separating it from the post body above */
.wp-block-comments {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wp-block-comments-title {
    margin-bottom: 24px;
}

/* Each comment as its own dark card. WP nests replies as a plain <ol><li>
   inside the parent <li> (no extra class), so `li.comment` matches every
   depth, not just top-level comments. */
.wp-block-comment-template {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wp-block-comment-template li.comment {
    list-style: none;
    background: #191c23;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

/* Avatar + author/date header row (see templates/single.html for the
   wp:group wrapping wp:avatar + comment-author-name/comment-date) */
.stravum-comment-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.wp-block-avatar {
    flex-shrink: 0;
    line-height: 0;
}
.wp-block-avatar__image {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}
.wp-block-comment-author-name {
    color: #fff;
    font-weight: 700;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.wp-block-comment-date {
    font-family: "Geist", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7c8194;
    margin-top: 2px;
}
.wp-block-comment-date a { color: inherit; text-decoration: none; }

/* Comment body */
.wp-block-comment-content {
    color: #A9ADC1;
    line-height: 1.7;
}
.wp-block-comment-content p:last-child { margin-bottom: 0; }

/* Reply link */
.wp-block-comment-reply-link { margin-top: 8px; }
.comment-reply-link {
    display: inline-block;
    color: #fd5b38;
    font-family: "Geist", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.comment-reply-link:hover { color: #ffb4a4; }

/* Threading: WP nests a plain <ol> (no extra class) inside the parent
   <li> for each reply depth, so this descendant selector catches every
   level, not just direct children. */
.wp-block-comment-template ol {
    list-style: none;
    margin: 16px 0 0 32px;
    padding-left: 20px;
    border-left: 2px solid rgba(253, 91, 56, 0.25);
}
@media (max-width: 767px) {
    .wp-block-comment-template ol {
        margin-left: 14px;
        padding-left: 14px;
    }
}

/* ---- Comment form ---- */
.wp-block-post-comments-form .comment-reply-title {
    margin-bottom: 20px;
}
.wp-block-post-comments-form label {
    color: #e0e2ec;
    font-size: 14px;
    font-weight: 500;
}
/* Explicit background-color on every text-entry field — the previous bug
   was inputs rendering white-on-dark because nothing set a background,
   so the browser default (white) showed through. */
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
    background-color: #0A0C10;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 13px 15px;
    color: #fff;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    margin-top: 4px;
}
.wp-block-post-comments-form textarea { resize: vertical; }
.wp-block-post-comments-form input[type="text"]:focus,
.wp-block-post-comments-form input[type="email"]:focus,
.wp-block-post-comments-form input[type="url"]:focus,
.wp-block-post-comments-form textarea:focus {
    border-color: #fd5b38;
    outline: none;
}
.wp-block-post-comments-form .comment-form-cookies-consent {
    align-items: center;
}
.wp-block-post-comments-form .comment-form-cookies-consent label {
    text-transform: none;
    margin: 0;
}
.wp-block-post-comments-form input[type="submit"] {
    background-color: #fd5b38;
    color: #590c00;
    border: 0;
    border-radius: 12px;
    padding: 15px 32px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.wp-block-post-comments-form input[type="submit"]:hover {
    filter: brightness(1.08);
}
