/* ======================
   WAB BLOG — MAIN STYLESHEET v2.0
   Calibrated to Figma design export.
   All sizes/spacing from design, all colors via CSS vars.
   ====================== */

/* ──────────────────────
   THEME COMPATIBILITY FIXES
   Astra theme forces .site-content .ast-container to display:flex above 922px,
   which breaks our block layout (turns the page into row-flex chaos).
   Force it back to block-level flow on the article container.
   ────────────────────── */
@media (min-width: 922px) {
    .site-content .ast-container {
        display: inherit;
    }
}


/* ======================
   BASE & VARIABLES
   ====================== */
:root {
    --wab-primary: #12a5e9;
    --wab-accent: #6cc7f1;
    --wab-success: #00d492;
    --wab-bg: #ffffff;

    --wab-hero-title-color: #ffffff;
    --wab-hero-title-size: clamp(36px, 3.38vw + 0.5rem, 52px);
    --wab-hero-content-width: 833px;
    --wab-hero-height: 60vh;

    --wab-h2-color: #374151;
    --wab-h3-color: #374151;
    --wab-h4-color: #374151;
    --wab-h5-color: #4b5563;
    --wab-h6-color: #6b7280;
    --wab-p-color: #374151;

    --wab-h2-size: clamp(24px, 1.95vw + 0.5rem, 30px);
    --wab-h3-size: clamp(20px, 1.63vw + 0.5rem, 25px);
    --wab-h4-size: clamp(17px, 1.43vw + 0.5rem, 22px);
    --wab-h5-size: clamp(14px, 1.17vw + 0.5rem, 18px);
    --wab-h6-size: clamp(12px, 1.04vw + 0.5rem, 16px);
    --wab-p-size: clamp(16px, 1.17vw + 0.5rem, 18px);

    --wab-content-width: 640px;
    --wab-wide-width: 920px;

    --wab-gray-50: #fafaf9;
    --wab-gray-100: #f3f4f6;
    --wab-gray-200: #e5e7eb;
    --wab-gray-300: #d7d9dc;
    --wab-gray-400: #9ca3af;
    --wab-gray-500: #6b7280;
    --wab-gray-600: #4b5563;
    --wab-gray-700: #374151;
    --wab-gray-800: #1f2937;
    --wab-gray-900: #111827;

    --wab-radius: 16px;
    --wab-radius-sm: 6px;
    --wab-radius-md: 14px;
    --wab-transition: 0.3s ease;
}


/* ======================
   HERO SECTION
   Figma: full-width image, title 52px bold centered,
   meta pill below with dots between items.
   ====================== */
.wab-hero {
    position: relative;
    width: 100%;
    min-height: var(--wab-hero-height, 60vh);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Top padding grows by TOC height so the visual center (where content and
       the image's focal point sit) stays below the TOC bar. --wab-toc-offset
       is set by JS after measuring the TOC element; defaults to 0 when TOC
       isn't rendered. */
    padding: calc(60px + var(--wab-toc-offset, 0px)) 24px 60px;
    background-image: var(--wab-hero-bg, none);
    background-size: cover;
    background-position: var(--wab-hero-bg-pos, center center);
    background-color: var(--wab-gray-900);
    overflow: hidden;
}

.wab-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 1;
}

.wab-hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--wab-hero-content-width);
    width: 100%;
    text-align: center;
}

/* Figma: 52px, bold, centered */
.wab-hero__title {
    font-size: var(--wab-hero-title-size);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 20px;
    text-wrap: balance;
    color: var(--wab-hero-title-color);
    text-shadow: 0 0 20px #00000020;
}

/* Figma: meta below title, inline flex, no pill */
.wab-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 0 20px #00000020;
    opacity: 1;
}

.wab-hero__meta a,
.wab-hero__meta span,
.wab-hero__meta time {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 20px #00000020;
}

.wab-hero__sep {
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.7;
    flex-shrink: 0;
}

.wab-hero__meta-link {
    color: #fff !important;
    text-decoration: none;
    transition: opacity var(--wab-transition);
}

.wab-hero__meta-link:hover {
    opacity: 0.8;
}

.wab-hero__author-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wab-hero__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}


/* ======================
   TOC WRAPPER — FIXED OVERLAY
   ====================== */

/* FSE-only: theme.json in Twenty Twenty-Four and similar block themes ships
   `.wp-site-blocks > * + * { margin-block-start: 1.5rem }`. Our TOC sits as a
   sibling under .wp-site-blocks, so the rule pushes down whichever block
   follows it and cancels the TOC's own top margin. Cancel both to avoid
   layout drift. Selector only matches inside FSE (classic themes don't have
   .wp-site-blocks at all), so classic sites are untouched. */
.wp-site-blocks > #wab-toc-wrapper,
.wp-site-blocks > #wab-toc-wrapper + * {
    margin-block-start: 0 !important;
}

.wab-toc-wrapper {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 90;
    background: var(--wab-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: none;
    pointer-events: auto;
    will-change: transform;
    transition: transform 0.3s ease;
}

.wab-toc-wrapper__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.wab-toc-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--wab-toc-pad-y, 10px) 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    scrollbar-width: none;
}

.wab-toc-nav__list::-webkit-scrollbar {
    display: none;
}

/* Figma: 15px, normal weight */
.wab-toc-nav__link {
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    color: var(--wab-gray-400);
    transition: color var(--wab-transition);
    padding: 4px 0;
}

.wab-toc-nav__link:hover {
    color: var(--wab-primary);
}

.wab-toc-nav__link.is-active {
    color: var(--wab-gray-700);
}

.wab-toc-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--wab-gray-200);
}

.wab-toc-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--wab-primary);
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

@media (max-width: 768px) {
    .wab-toc-wrapper {
        display: none !important;
    }
}


/* ======================
   ARTICLE CONTENT
   Figma: content 640px, body 18px/30px, h2 30px/40px
   ====================== */
.wab-article {
    padding: 48px 24px 80px;
    overflow: visible; /* Required for sticky and full-width blocks */
    container-type: inline-size;
}

.wab-article__content {
    max-width: var(--wab-content-width);
    margin: 0 auto;
    font-size: var(--wab-p-size);
    line-height: 30px;
    color: var(--wab-p-color);
    position: relative;
    overflow: visible; /* Required for position:sticky in children */
}

/* Allow blocks to break out of content width.
   Uses the reliable position:relative + negative-margin-vw approach
   that works regardless of parent centering or padding offsets. */

/* ─── WIDE alignment (global) ─── */
.wab-article__content .alignwide {
    position: relative;
    width: var(--wab-wide-width);
    max-width: var(--wab-wide-width);
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* ─── FULL alignment (global) ─── */
.wab-article__content .alignfull {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    clear: both;
    box-sizing: border-box;
    /* Prevent horizontal scrollbars from pushing content */
    overflow: hidden;
}

/* ─── Scroll Video & Sticky Stack: no special overrides needed ─── */
/* The global .alignwide/.alignfull rules above handle positioning.
   The outer wrapper gets position:relative + left:50% + translateX(-50%).
   The inner sticky/section elements stay at width:100% of their parent.
   The JS expandOnScroll effect works on top by using getBoundingClientRect(). */

/* WP Layout system: blocks with inline max-width from settings. */
.wab-article__content > .wp-block-group,
.wab-article__content > .wp-block-columns,
.wab-article__content > .wp-block-cover,
.wab-article__content > .wp-block-media-text,
.wab-article__content > .wab-cta-banner,
.wab-article__content > .wab-comparison,
.wab-article__content > .wab-callout-box,
.wab-article__content > .wab-feature-card,
.wab-article__content > .wab-fcg,
.wab-article__content > .wab-related,
.wab-article__content > .wp-block-wab-sticky-stack,
.wab-article__content > .wab-scroll-video,
.wab-article__content > .wab-timeline-h {
    max-width: none;
}

/* Groups with alignment — WordPress injects inline max-width via layout system
   which overrides our alignwide/alignfull CSS. Force correct sizing. */
.wab-article__content > .wp-block-group.alignwide {
    width: var(--wab-wide-width) !important;
    max-width: var(--wab-wide-width) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wab-article__content > .wp-block-group.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 1100px) {
    .wab-article__content > .wp-block-group.alignwide,
    .wab-article__content > .wp-block-group.alignfull {
        width: 100% !important;
        max-width: 100% !important;
        left: auto;
        transform: none;
    }
}

/* Blocks with custom inline width — center them */
.wab-article__content > [style*="max-width"]:not(.alignfull):not(.alignwide) {
    margin-left: auto;
    margin-right: auto;
}

/* Allow custom widths wider than content to break out */
.wab-article__content > .has-global-padding,
.wab-article__content > .is-layout-constrained,
.wab-article__content > .is-layout-flow {
    max-width: none;
}

@media (max-width: 1100px) {
    .wab-article__content .alignwide {
        width: 100%;
        max-width: 100%;
        left: auto;
        transform: none;
    }
    .wab-article__content .alignfull {
        width: 100%;
        max-width: 100%;
        left: auto;
        transform: none;
    }
}

/* Ensure wide/full children of article content can expand */

/* ── Block spacing — typographic scale ──
   Three admin settings control the rhythm:
   • Block Spacing (rem)     — base gap between all blocks
   • H2 Multiplier (×)      — space above H2 section headings
   • H3–H6 Multiplier (×)   — space above H3–H6 subsection headings
   • WAB Block Multiplier   — space above WAB custom blocks */

/* Post content typography — plugin values must win over the theme.
   The .wab-article + .wab-article__content chain gives 3-class specificity
   (0,0,3,1) which beats standard theme selectors like
   `.wp-block-post-content > h2` (0,0,1,1) without needing !important.
   Direct-child (>) selectors ensure we only style flat content added by the
   user — paragraphs and headings inside our own or core blocks (Quote,
   Callout Box, Feature Card etc) keep their own styling because they're not
   direct children of .wab-article__content. */

/* h2 */
.wab-article .wab-article__content > h2,
.wab-article .wab-article__content > .wp-block-heading,
.wab-article .wab-article__content > .wp-block-post-content > h2,
.wab-article .wab-article__content > .wp-block-post-content > .wp-block-heading,
.wab-article .wab-article__content > .wp-block-group > h2 {
    font-size: var(--wab-h2-size);
    font-weight: 400;
    margin-top: calc(var(--wab-block-margin, 1.5rem) * var(--wab-heading-section-mult, 2.5));
    margin-bottom: 0.75em;
    line-height: 40px;
    color: var(--wab-h2-color);
    scroll-margin-top: 120px;
}

/* h3 */
.wab-article .wab-article__content > h3,
.wab-article .wab-article__content > .wp-block-post-content > h3,
.wab-article .wab-article__content > .wp-block-group > h3 {
    font-size: var(--wab-h3-size);
    font-weight: 400;
    margin-top: calc(var(--wab-block-margin, 1.5rem) * var(--wab-heading-sub-mult, 1.5));
    margin-bottom: 0.5em;
    line-height: 40px;
    color: var(--wab-h3-color);
}

.wab-article .wab-article__content > h4,
.wab-article .wab-article__content > .wp-block-post-content > h4,
.wab-article .wab-article__content > .wp-block-group > h4 {
    font-size: var(--wab-h4-size);
    font-weight: 400;
    margin-top: calc(var(--wab-block-margin, 1.5rem) * var(--wab-heading-sub-mult, 1.5));
    margin-bottom: 0.5em;
    color: var(--wab-h4-color);
}

.wab-article .wab-article__content > h5,
.wab-article .wab-article__content > .wp-block-post-content > h5,
.wab-article .wab-article__content > .wp-block-group > h5 {
    font-size: var(--wab-h5-size);
    font-weight: 400;
    margin-top: calc(var(--wab-block-margin, 1.5rem) * var(--wab-heading-sub-mult, 1.5));
    margin-bottom: 0.5em;
    color: var(--wab-h5-color);
}

.wab-article .wab-article__content > h6,
.wab-article .wab-article__content > .wp-block-post-content > h6,
.wab-article .wab-article__content > .wp-block-group > h6 {
    font-size: var(--wab-h6-size);
    font-weight: 400;
    margin-top: calc(var(--wab-block-margin, 1.5rem) * var(--wab-heading-sub-mult, 1.5));
    margin-bottom: 0.5em;
    color: var(--wab-h6-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* WAB custom blocks — their own spacing multiplier */
.wab-article .wab-article__content > [class*="wab-"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.wab-article .wab-article__content > [class*="wp-block-wab-"] {
    margin-top: calc(var(--wab-block-margin, 1.5rem) * var(--wab-block-mult, 2));
}

/* Paragraphs — direct children only (user's flat text). Content inside our
   own blocks, core Quote/Pullquote/Callout, lists etc keeps native styling. */
.wab-article .wab-article__content > p,
.wab-article .wab-article__content > .wp-block-paragraph,
.wab-article .wab-article__content > .wp-block-post-content > p,
.wab-article .wab-article__content > .wp-block-post-content > .wp-block-paragraph {
    margin: 0 0 1.5em;
    color: var(--wab-p-color);
    font-size: var(--wab-p-size);
    line-height: 30px;
}

/* Inline links in direct-child paragraphs — no buttons, no block-scoped links */
.wab-article .wab-article__content > p a,
.wab-article .wab-article__content > .wp-block-paragraph a,
.wab-article .wab-article__content > .wp-block-post-content > p a,
.wab-article .wab-article__content > .wp-block-post-content > .wp-block-paragraph a {
    color: var(--wab-p-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--wab-transition);
}

.wab-article .wab-article__content > p a:hover,
.wab-article .wab-article__content > .wp-block-paragraph a:hover,
.wab-article .wab-article__content > .wp-block-post-content > p a:hover,
.wab-article .wab-article__content > .wp-block-post-content > .wp-block-paragraph a:hover {
    color: var(--wab-primary);
}

/* Images — wide width (only direct content images, NOT inside custom blocks) */
.wab-article .wab-article__content > p > img,
.wab-article .wab-article__content > img {
    max-width: var(--wab-wide-width);
    width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    border-radius: var(--wab-radius);
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
}

/* Reset: images inside custom blocks stay normal */
.wab-related img,
.wab-cta-banner img,
.wab-callout-box img,
.wab-feature-card img,
.wab-fcg img,
.wab-comparison img,
.wab-timeline-h img,
.wab-bio img,
.wab-steps img {
    max-width: 100%;
    width: auto;
    position: static;
    left: auto;
    transform: none;
}

/* Figures — wide width */
.wab-article .wab-article__content > figure,
.wab-article .wab-article__content > .wp-block-image {
    max-width: var(--wab-wide-width);
    width: var(--wab-wide-width);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
}

.wab-article .wab-article__content figure img,
.wab-article .wab-article__content .wp-block-image img {
    max-width: 100%;
    width: auto;
    height: auto;
    position: static;
    left: auto;
    transform: none;
    display: inline-block;
    border-radius: var(--wab-radius);
}

.wab-article .wab-article__content figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--wab-gray-500);
    margin-top: 8px;
}

/* Blockquote — all values controllable via Settings > Typography > Blockquote */
.wab-article .wab-article__content blockquote {
    max-width: var(--wab-wide-width);
    width: var(--wab-wide-width);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 26px 0;
    background: none;
    border: none;
    font-style: normal;
    font-size: var(--wab-blockquote-size, 30px);
    line-height: var(--wab-blockquote-line-height, 40px);
    color: var(--wab-blockquote-color, var(--wab-primary));
    /* Reset browser defaults (margin-block: 1em, margin-inline: 40px) */
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-top: var(--wab-block-margin, 1.5em);
    margin-bottom: var(--wab-block-margin, 1.5em);
    text-align: center;
}

/* Figma: thin gradient line above/below quote */
.wab-article .wab-article__content blockquote::before,
.wab-article .wab-article__content blockquote::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin: 0 auto 26px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wab-gray-300) 50%,
        transparent 100%
    );
}

.wab-article .wab-article__content blockquote::after {
    margin: 26px auto 0;
}

.wab-article .wab-article__content blockquote p {
    color: var(--wab-blockquote-color, var(--wab-primary));
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

.wab-article .wab-article__content blockquote p:last-child {
    margin-bottom: 0;
}

/* Figma: cite = 11px, letter-spacing 2.2px, uppercase, dark */
.wab-article .wab-article__content blockquote cite {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--wab-gray-800);
    margin-top: 27px;
}

/* Reset blockquote inside WAB wrapper blocks — wrapper handles all styling */
.wab-cta-banner blockquote,
.wab-article .wab-article__content .wab-quote-card blockquote,
.wab-quote-card blockquote {
    all: unset;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.wab-cta-banner blockquote::before,
.wab-cta-banner blockquote::after,
.wab-article .wab-article__content .wab-quote-card blockquote::before,
.wab-article .wab-article__content .wab-quote-card blockquote::after,
.wab-quote-card blockquote::before,
.wab-quote-card blockquote::after {
    content: none !important;
    display: none !important;
}

.wab-article .wab-article__content .wab-quote-card blockquote p,
.wab-quote-card blockquote p {
    font-size: inherit;
    line-height: inherit;
    font-style: inherit;
    color: inherit;
    margin: 0 0 0.5em 0;
    padding: 0;
}
.wab-article .wab-article__content .wab-quote-card blockquote p:last-child,
.wab-quote-card blockquote p:last-child {
    margin-bottom: 0;
}

/* Video embeds — wide */
.wab-article .wab-article__content iframe,
.wab-article .wab-article__content .wp-block-embed {
    max-width: var(--wab-wide-width);
    width: var(--wab-wide-width);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Figma: lists with 32px left indent, 10px gap between items */
.wab-article .wab-article__content ul,
.wab-article .wab-article__content ol {
    margin: 0 0 1.5em;
    padding-left: 32px;
}

.wab-article .wab-article__content li {
    margin-bottom: 10px;
    line-height: 30px;
}

/* Figma: bold key terms in lists */
.wab-article .wab-article__content li strong {
    font-weight: 700;
}

.wab-article .wab-article__content code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.9em;
    background: var(--wab-gray-100);
    padding: 2px 6px;
    border-radius: 3px;
}

.wab-article .wab-article__content pre {
    background: var(--wab-gray-900);
    color: var(--wab-gray-100);
    padding: 24px;
    border-radius: var(--wab-radius);
    overflow-x: auto;
    margin: var(--wab-block-margin, 1.5em) 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.wab-article .wab-article__content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.wab-article .wab-article__content hr {
    border: none;
    height: 1px;
    background: var(--wab-gray-200);
    margin: var(--wab-block-margin, 1.5em) 0;
}

@media (max-width: 1100px) {
    .wab-article .wab-article__content img,
    .wab-article .wab-article__content figure,
    .wab-article .wab-article__content .wp-block-image,
    .wab-article .wab-article__content blockquote,
    .wab-article .wab-article__content iframe,
    .wab-article .wab-article__content .wp-block-embed {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        left: auto;
        transform: none;
    }
}


/* ======================
   DARK MODE TOGGLE
   Fully isolated from theme CSS via all:unset + explicit !important overrides.
   Works on Astra, GeneratePress, Divi, and any other theme.
   ====================== */
.wab-dark-toggle {
    all: unset !important;
    /* Positioning */
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 99999 !important;
    /* Size & shape */
    box-sizing: border-box !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Visual — light mode */
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    color: #374151 !important;
    /* Interaction */
    cursor: pointer !important;
    overflow: hidden !important;
    /* Transition */
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
    /* Resets */
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
}

.wab-dark-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
}

.wab-dark-toggle:active {
    transform: scale(0.94) !important;
}

.wab-dark-toggle:focus-visible {
    outline: 2px solid #0066ff !important;
    outline-offset: 3px !important;
}

/* ── Sun & Moon icons ── */
.wab-dark-toggle__sun,
.wab-dark-toggle__moon {
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    left: 50% !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    transition: opacity 0.22s ease, transform 0.25s ease !important;
}

/* Light mode: sun visible */
.wab-dark-toggle__sun {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}

/* Light mode: moon hidden */
.wab-dark-toggle__moon {
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.6) !important;
}

/* Dark mode button */
html.wab-dark .wab-dark-toggle {
    background: #1e2939 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e5e7eb !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

html.wab-dark .wab-dark-toggle:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Dark mode: sun hidden */
html.wab-dark .wab-dark-toggle__sun {
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.6) !important;
}

/* Dark mode: moon visible */
html.wab-dark .wab-dark-toggle__moon {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}


/* ======================
   UNIVERSAL FULL-WIDTH BREAKOUT
   Виривається з будь-якого контейнера теми через 100vw.
   Працює з будь-якою темою незалежно від padding/max-width батька.
   ====================== */

/* Батьківський контейнер — скидаємо його обмеження якщо він містить наш контент */
*:has(> .wab-hero),
*:has(> #wab-article) {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero — займає ширину батька, padding не ламає верстку */
.wab-hero,
.wab-hero *,
.wab-hero *::before,
.wab-hero *::after {
    box-sizing: border-box;
}

.wab-hero {
    width: 100%;
    max-width: 100%;
}


/* ======================
   ASTRA TABLE FIX
   Astra themes sometimes apply position:relative + left:50% +
   translateX(-50%) to wp-block-table for "breakout" effect.
   We reset all possible causes of horizontal shift.
   ====================== */
.wab-article .wab-article__content > .wp-block-table {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ======================
   MISC FIXES
   ====================== */

/* Margin note — readable line height */
.wab-margin-note p {
    line-height: 1.8em !important;
}

/* Margin note links — no underline */
.wab-margin-note a {
    text-decoration: none !important;
}

/* Blockquote inside WAB wrapper — zero margin
   (scoped to .wab-article to avoid touching Bootstrap .blockquote globally) */
.wab-article .blockquote {
    margin: 0 !important;
}

/* Accordion hover/focus — subtle background */
.wab-accordion__item:hover,
.wab-accordion__header:hover,
.wab-accordion__header:focus {
    background: rgba(247, 247, 247, 0.063) !important;
}

/* Greenshift CTA row — top spacing */
.wp-block-greenshift-blocks-row.cta-blog {
    margin-top: 60px !important;
}

/* Blockquote — force left align (overrides Figma center for in-text quotes) */
.wab-article .wab-article__content blockquote {
    text-align: left;
}

/* Accordion — consistent side padding */
.wab-accordion__header,
.wab-accordion__content {
    padding-left: 15px;
    padding-right: 15px;
}





/* ======================
   MOBILE — відступи та шрифти (max-width: 767px)
   Загальна логіка:
   • Контент статті: менший padding по краях на дуже маленьких екранах
   • Групи/кавери/колонки з фоном — внутрішній padding щоб текст не впирався
   • Колонки → стек, мінімальний gap
   • Шрифти: параграфи, h2–h4 трохи менші
   • WAB-блоки: переважно вже адаптивні, тут тільки глобальні поправки
   ====================== */
@media (max-width: 767px) {

    /* ── Стаття: зменшуємо бічний padding на маленьких екранах ── */
    .wab-article {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 32px;
        padding-bottom: 60px;
    }

    /* ── Шрифти ── */
    .wab-article__content p,
    .wab-article__content li {
        font-size: 16px;
        line-height: 28px;
    }

    .wab-article__content h2 {
        font-size: clamp(20px, 5.5vw, 26px);
        line-height: 1.25;
        margin-top: calc(var(--wab-block-margin, 1.5rem) * 1.8);
        margin-bottom: 0.6em;
    }

    .wab-article__content h3 {
        font-size: clamp(18px, 4.5vw, 22px);
        line-height: 1.3;
    }

    .wab-article__content h4 {
        font-size: clamp(16px, 4vw, 20px);
        line-height: 1.35;
    }

    /* ── Blockquote ── */
    .wab-article .wab-article__content blockquote {
        font-size: 22px;
        line-height: 1.45;
        padding: 16px 0;
    }

    /* ── Групи з фоном або border-radius — внутрішній відступ ──
       Gutenberg додає .has-background коли є колір фону.
       .wp-block-group з padding через редактор вже матиме свій padding,
       але базово якщо його нема — додаємо мінімальний. */
    .wab-article__content .wp-block-group.has-background,
    .wab-article__content .wp-block-group[style*="background"],
    .wab-article__content .wp-block-group[style*="border-radius"] {
        padding-left: max(16px, var(--wp--style--block-gap, 16px));
        padding-right: max(16px, var(--wp--style--block-gap, 16px));
        padding-top: max(20px, var(--wp--style--block-gap, 20px));
        padding-bottom: max(20px, var(--wp--style--block-gap, 20px));
    }

    /* ── Cover блок — зменшуємо мінімальну висоту ── */
    .wab-article__content .wp-block-cover,
    .wab-article__content .wp-block-cover-image {
        min-height: 220px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .wab-article__content .wp-block-cover__inner-container,
    .wab-article__content .wp-block-cover-image__inner-container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    /* ── Колонки → вертикальний стек ──
       WP сам ставить flex-wrap але gap може бути великим. */
    .wab-article__content .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .wab-article__content .wp-block-column {
        flex-basis: 100% !important;
        min-width: 100% !important;
    }

    /* Колонки з фоном або рамкою — дати відступ всередині ── */
    .wab-article__content .wp-block-column.has-background,
    .wab-article__content .wp-block-column[style*="background"],
    .wab-article__content .wp-block-column[style*="border"] {
        padding: 16px !important;
        border-radius: var(--wab-radius-sm);
    }

    /* ── Media & Text — стек ── */
    .wab-article__content .wp-block-media-text {
        grid-template-columns: 1fr !important;
    }

    .wab-article__content .wp-block-media-text .wp-block-media-text__media {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .wab-article__content .wp-block-media-text .wp-block-media-text__content {
        grid-column: 1 !important;
        grid-row: 2 !important;
        padding: 16px 0 !important;
    }

    /* ── Таблиці — горизонтальний скрол ── */
    .wab-article__content .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
    }

    .wab-article__content .wp-block-table table {
        min-width: 480px;
    }

    /* ── Pre/code — горизонтальний скрол ── */
    .wab-article .wab-article__content pre {
        padding: 16px;
        font-size: 0.82rem;
    }

    /* ── Списки — трохи менший indent ── */
    .wab-article .wab-article__content ul,
    .wab-article .wab-article__content ol {
        padding-left: 22px;
    }

    /* ── Full/wide alignment на мобільному —
       вже скидається через 1100px breakpoint,
       але на 767px треба ще прибрати горизонтальні
       overflow проблеми від трансформацій ── */
    .wab-article__content .alignfull,
    .wab-article__content .alignwide {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Full-width блоки (кавери, sticky stack тощо) —
       компенсуємо padding статті щоб виходили в край ── */
    .wab-article__content > .wp-block-cover.alignfull,
    .wab-article__content > .wp-block-group.alignfull,
    .wab-article__content > .wp-block-cover-image.alignfull {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
    }

    /* ── Sticky Stack — тісніший padding ── */
    .single-post .wp-block-wab-sticky-stack .wp-block-group {
        padding: 10px;
    }

    .single-post .wp-block-wab-sticky-stack .wp-block-group p {
        font-size: 20px !important;
        line-height: 1.5em !important;
    }

    .single-post .wp-block-wab-sticky-stack .wp-block-group h2 {
        font-size: 25px !important;
    }

    /* ── Callout box — вертикальний стек ── */
    .single-post .wab-callout-box {
        display: flex;
        flex-direction: column;
    }

    /* ── WP quote block ── */
    .single-post .wp-block-quote p {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    /* ── Hero ── */
    .wab-hero {
        padding: 24px 14px;
    }

    .wab-hero__content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .wab-hero__title {
        font-size: clamp(26px, 7vw, 36px);
        margin-bottom: 14px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .wab-hero__meta {
        display: flex;
        font-size: 13px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        box-sizing: border-box;
    }

    .wab-hero__author-avatar {
        width: 36px;
        height: 36px;
    }

    .wab-hero__sep {
        width: 3px;
        height: 3px;
    }
}

/* Дуже маленькі екрани (< 400px) */
@media (max-width: 399px) {
    .wab-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wab-article__content > .wp-block-cover.alignfull,
    .wab-article__content > .wp-block-group.alignfull,
    .wab-article__content > .wp-block-cover-image.alignfull {
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: calc(100% + 20px) !important;
        max-width: calc(100% + 20px) !important;
    }
}