/*
 * Global Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Works WITH Gutenberg and FSE — never against them.
 *
 * Load order (via wp_enqueue_style dependencies):
 *   tokens.css   ← custom properties at :root
 *   global.css   ← this file: typography, layout helpers, block style variants
 *   (conditionally) woocommerce.css, learndash.css, animations.css, etc.
 *
 * Specificity is intentionally low — we target Gutenberg's own class
 * structure so styles apply exactly where the block editor expects them.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Paragraph Line Length ─────────────────────────────────────────────── */
/* Scoped to post/page content only — avoids WPForms, LearnDash, WC etc. */
.entry-content > p,
.wp-block-post-content > p {
    text-wrap: pretty;
    max-inline-size: 72ch;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
a {
    transition: color var(--msk-duration-fast) var(--msk-ease-out);
}

/* ── Images ────────────────────────────────────────────────────────────── */
img, video {
    height: auto;       /* Prevent aspect ratio distortion */
    max-inline-size: 100%;
}

/* ── Cover Block Enhancements ──────────────────────────────────────────── */
.wp-block-cover {
    /* Ensure content is always legible over any image */
    isolation: isolate;
}

.wp-block-cover__inner-container {
    position: relative;
    z-index: var(--msk-z-raised);
}

/* ── Group Block: Card Variant ─────────────────────────────────────────── */
/* Apply class "is-style-card" in the block editor to get a card treatment */
.wp-block-group.is-style-card {
    background: var(--msk-color-surface);
    border-radius: var(--msk-radius-lg);
    box-shadow: var(--msk-shadow-md);
    padding: var(--msk-space-8);
    transition: box-shadow var(--msk-duration-normal) var(--msk-ease-out),
                transform      var(--msk-duration-normal) var(--msk-ease-out);
}

.wp-block-group.is-style-card:hover {
    box-shadow: var(--msk-shadow-lg);
    transform: translateY(-2px);
}

/* ── Separator: Accent Variant ─────────────────────────────────────────── */
.wp-block-separator.is-style-accent {
    border: none;
    block-size: 3px;
    inline-size: 60px;
    background: var(--msk-gradient-accent);
    border-radius: var(--msk-radius-full);
    margin-inline: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Enhance without overriding theme.json button presets */
.wp-block-button__link {
    transition:
        background-color var(--msk-duration-fast) var(--msk-ease-out),
        box-shadow       var(--msk-duration-fast) var(--msk-ease-out),
        transform        var(--msk-duration-fast) var(--msk-ease-out);
}

.wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: var(--msk-shadow-accent);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* ── Columns: Balanced Gutters ─────────────────────────────────────────── */
/* FSE generates inline gap styles — this just sets a sensible default */
.wp-block-columns:not([style*="gap"]) {
    gap: var(--msk-space-8);
}

/* ── Block Style: Glass ────────────────────────────────────────────────── */
/* Frosted glass card — pair with a Cover or colored section background */
.wp-block-group.is-style-glass {
    background: color-mix(in oklch, var(--msk-color-surface) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in oklch, var(--msk-color-border) 50%, transparent);
    border-radius: var(--msk-radius-lg);
    padding: var(--msk-space-8);
    box-shadow: var(--msk-shadow-sm);
}

/* ── Block Style: Hover Lift (Image) ──────────────────────────────────── */
.wp-block-image.is-style-hover-lift img {
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                box-shadow var(--msk-duration-normal) var(--msk-ease-out);
    border-radius: var(--msk-radius-md);
}

.wp-block-image.is-style-hover-lift img:hover {
    transform: translateY(-4px);
    box-shadow: var(--msk-shadow-lg);
}

/* ── Block Style: Hover Lift Cards (Columns) ──────────────────────────── */
/* Each column child lifts on hover — great for feature/service grids */
.wp-block-columns.is-style-hover-lift > .wp-block-column {
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                box-shadow var(--msk-duration-normal) var(--msk-ease-out);
    border-radius: var(--msk-radius-lg);
    padding: var(--msk-space-6);
}

.wp-block-columns.is-style-hover-lift > .wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: var(--msk-shadow-lg);
}

/* ── Block Style: Gradient Overlay (Cover) ────────────────────────────── */
.wp-block-cover.is-style-gradient-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--msk-gradient-hero);
    opacity: 0.6;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ── Block Style: Accent Underline (Heading) ──────────────────────────── */
.wp-block-heading.is-style-accent-underline {
    padding-block-end: var(--msk-space-3);
    border-block-end: 3px solid var(--msk-color-accent);
    display: inline-block;
}

/* ── Block Style: Gradient Text (Heading & Paragraph) ─────────────────── */
.wp-block-heading.is-style-gradient-text,
.is-style-gradient-text {
    background: var(--msk-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Block Style: Accent Glow (Button) ────────────────────────────────── */
.wp-block-button.is-style-accent-glow .wp-block-button__link {
    box-shadow: var(--msk-shadow-accent);
    transition: box-shadow var(--msk-duration-normal) var(--msk-ease-out),
                transform  var(--msk-duration-fast)   var(--msk-ease-out);
}

.wp-block-button.is-style-accent-glow .wp-block-button__link:hover {
    box-shadow:
        var(--msk-shadow-accent),
        0 8px 30px color-mix(in oklch, var(--msk-color-accent) 25%, transparent);
    transform: translateY(-1px);
}

/* ── Utility Classes ───────────────────────────────────────────────────── */
/* Available in the block editor "Additional CSS Class" field */

/* Gradient text effect — works on any inline/block element */
.msk-text-gradient {
    background: var(--msk-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* Subtle text overline / eyebrow label */
.msk-eyebrow {
    display: block;
    font-size: var(--msk-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-widest);
    text-transform: uppercase;
    color: var(--msk-color-accent);
    margin-block-end: var(--msk-space-2);
}

/* Surface tint — gentle background differentiation */
.msk-surface-alt {
    background-color: var(--msk-color-surface-alt);
}

/* Generic hover lift — add to any block for a subtle raise on hover */
.msk-hover-lift {
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                box-shadow var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--msk-shadow-lg);
}

/* Gradient border — accent-coloured border via background trick */
.msk-gradient-border {
    border: 2px solid transparent;
    background-clip: padding-box;
    background-origin: border-box;
    position: relative;
    border-radius: var(--msk-radius-lg);
}

.msk-gradient-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--msk-gradient-accent);
    z-index: -1;
}

/* Accent left bar — vertical accent stripe on left edge */
.msk-accent-bar {
    border-inline-start: 4px solid var(--msk-color-accent);
    padding-inline-start: var(--msk-space-6);
}

/* Animated link underlines — expanding underline on hover.              */
/* Excludes buttons and nav links to avoid conflicts.                    */
.msk-animated-links a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-pages-list__item__link) {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-animated-links a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-pages-list__item__link):hover {
    background-size: 100% 2px;
}

/* Full-viewport hero — exact viewport height minus header.             */
/* Requires fullview.js which sets --msk-header-height dynamically.     */
.msk-full-viewport-hero.wp-block-cover {
    height: calc(100svh - var(--msk-header-height, 0px) - var(--wp-admin--admin-bar--height, 0px));
    min-height: 0;
    max-height: calc(100svh - var(--msk-header-height, 0px) - var(--wp-admin--admin-bar--height, 0px));
    overflow: hidden;
}

.msk-full-viewport-hero.wp-block-cover > .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    max-height: 100%;
}

/* Image to edge — removes padding so an image in a column/group        */
/* bleeds to the block edge. Add to the parent Group or Column.         */
.msk-image-to-edge {
    padding-block-end: 0;
    padding-inline-end: 0;
}

.msk-image-to-edge .wp-block-image,
.msk-image-to-edge figure {
    margin: 0;
}

.msk-image-to-edge img {
    display: block;
    margin: 0;
}

/* Column equalization — stretches columns to equal height with          */
/* the last child pushed to the bottom. Add to a Columns block.         */
.msk-equal-columns.wp-block-columns {
    align-items: stretch;
}

.msk-equal-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.msk-equal-columns > .wp-block-column > *:last-child {
    margin-block-start: auto;
}

/* Remove vertical whitespace — zero out block spacing */
.msk-no-gap {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Visually hidden but accessible */
.msk-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
border: 0;
}