/**
 * LeanCMS v2 — Core Plugin Styles
 *
 * CSS variables for LCMS blocks. This file is loaded separately
 * from the Tailwind build so it won't be overwritten during rebuilds.
 *
 * @package lcms
 */

:root {
    /* ── Brand / Text / Background Colors ────────────────────
       Plugin-level fallbacks. The theme's config.css is the source
       of truth and overrides these via the lcms-config dependency.
       To change colours, update _brand-config.json + config.css.
       ──────────────────────────────────────────────────────── */
    --color-brand-primary: #6529AD;
    --color-brand-primary-hover: #732EC2;
    --color-brand-accent: #ddae27;
    --color-brand-accent-hover: #f7e07c;

    --color-text-primary: #101010;
    --color-text-secondary: #666666;
    --color-text-light: rgba(255, 255, 255, 0.95);
    --color-text-link: var(--color-brand-accent);
    --color-text-link-hover: var(--color-brand-accent-hover);

    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-brand-light: #f0f4ff;
    --color-bg-brand-light-alt: #e8eeff;
    --color-bg-dark: #153f80;
    --color-bg-dark-secondary: #112e60;
    --color-card-bg: #f9fafb;

    /* ── Typography ───────────────────────────────────────── */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: var(--font-family);
    --font-body: var(--font-family);

    /* ── Buttons ──────────────────────────────────────────────
       Semantic button variables for content blocks. Defaults
       cascade from brand colours; override in _brand-config.json
       under `buttons.*` (see brand-config-fallback). Values may
       be solid colours OR linear-gradient(...) strings.
       ──────────────────────────────────────────────────────── */
    --btn-primary-bg: var(--color-brand-primary);
    --btn-primary-bg-hover: var(--color-brand-primary-hover);
    --btn-primary-color: #ffffff;
    --btn-primary-color-hover: #ffffff;
    --btn-primary-border: transparent;

    --btn-secondary-bg: var(--color-brand-accent);
    --btn-secondary-bg-hover: var(--color-brand-accent-hover);
    --btn-secondary-color: #ffffff;
    --btn-secondary-color-hover: #ffffff;
    --btn-secondary-border: transparent;

    /* Chrome button alias — header CTA, gforms submit, error-404.
       Defaults track --btn-secondary-bg so existing sites keep their
       accent-coloured chrome CTAs unchanged. */
    --button-bg: var(--btn-secondary-bg);
    --button-bg-hover: var(--btn-secondary-bg-hover);
    --button-color: var(--btn-secondary-color);
    --button-color-hover: var(--btn-secondary-color-hover);

    /* ── Layout ───────────────────────────────────────────── */
    --content-max-width: 1200px;
    --content-max-width-wide: 1460px;

    /* ── Borders & Radius ─────────────────────────────────── */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 32px;

    /* ── Block Presentation Style ─────────────────────────── */
    --block-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --block-border: none;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);

    /* ── Transitions ──────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-standard: 300ms ease;

    /* ── Block Spacing ───────────────────────────────────── */
    --block-spacing-none: 0;
    --block-spacing-minimal: 1rem;
    --block-spacing-compact: 2rem;
    --block-spacing-default: 4rem;
    --block-spacing-spacious: 6rem;
    --block-spacing-extra-spacious: 8rem;
}

/* ── Container ───────────────────────────────────────────── */
.lcms-container {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Override Tailwind's max-w-screen-xl to use our variable */
section .max-w-screen-xl {
    max-width: var(--content-max-width);
}

/* ── Block Spacing Classes ───────────────────────────────── */
.lcms-spacing-none {
    padding-top: var(--block-spacing-none) !important;
    padding-bottom: var(--block-spacing-none) !important;
}

.lcms-spacing-minimal {
    padding-top: var(--block-spacing-minimal) !important;
    padding-bottom: var(--block-spacing-minimal) !important;
}

.lcms-spacing-compact {
    padding-top: var(--block-spacing-compact) !important;
    padding-bottom: var(--block-spacing-compact) !important;
}

.lcms-spacing-default {
    padding-top: var(--block-spacing-default) !important;
    padding-bottom: var(--block-spacing-default) !important;
}

.lcms-spacing-spacious {
    padding-top: var(--block-spacing-spacious) !important;
    padding-bottom: var(--block-spacing-spacious) !important;
}

.lcms-spacing-extra-spacious {
    padding-top: var(--block-spacing-extra-spacious) !important;
    padding-bottom: var(--block-spacing-extra-spacious) !important;
}

/* ── Block Dividers ──────────────────────────────────────── */
.lcms-block-wrap {
    position: relative;
}

.lcms-divider {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}

.lcms-divider--top {
    top: -1px;
}

.lcms-divider--bottom {
    bottom: -1px;
}

.lcms-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

@media (min-width: 768px) {
    .lcms-divider svg {
        height: 80px;
    }
}

/* ── Icon Component (SVG Mask) ───────────────────────────── */
.lcms-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: var(--lcms-icon-url);
    mask-image: var(--lcms-icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
}

/* ── Icon Component (Emoji) ──────────────────────────────── */
.lcms-icon-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.lcms-icon-emoji.w-4  { font-size: 1rem; }
.lcms-icon-emoji.w-6  { font-size: 1.5rem; }
.lcms-icon-emoji.w-10 { font-size: 2.5rem; }
.lcms-icon-emoji.w-14 { font-size: 3.5rem; }
.lcms-icon-emoji.w-20 { font-size: 5rem; }

/* ── Icon Component (PNG / Image) ───────────────────────── */
.lcms-icon-img {
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Icon Component (SVG Set) ───────────────────────────── */
.lcms-icon-svg-set {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lcms-icon-svg-set svg {
    width: 100%;
    height: 100%;
}

/* ── Border Radius Classes ───────────────────────────────── */
.lcms-rounded-sm {
    border-radius: var(--border-radius-sm) !important;
}

.lcms-rounded {
    border-radius: var(--border-radius) !important;
}

.lcms-rounded-lg {
    border-radius: var(--border-radius-lg) !important;
}

.lcms-rounded-xl {
    border-radius: var(--border-radius-xl) !important;
}

.lcms-rounded-none {
    border-radius: 0 !important;
}

/* ── Flex Alignment Utilities ────────────────────────────── */
.items-end {
    align-items: flex-end;
}

/* ── Card Component Classes ─────────────────────────────── */
.lcms-card {
    background: var(--color-card-bg, #f9fafb);
    border-radius: var(--border-radius-lg);
    padding: var(--card-padding, 1.5rem);
}

.lcms-card-shadow {
    box-shadow: var(--shadow-cards, var(--block-shadow));
    border: var(--block-border);
    transition: box-shadow var(--transition-fast);
}

.lcms-card-interactive:hover {
    box-shadow: var(--shadow-cards-hover, var(--shadow-cards));
}

/* ── Image Shadow Class ──────────────────────────────────── */
.lcms-image-shadow {
    box-shadow: var(--shadow-images, none);
}

/* ── DaisyUI Button Radius & Shadow Override ─────────────── */
.btn {
    border-radius: var(--rounded-btn, 25px) !important;
    box-shadow: var(--shadow-btn, none);
}

.btn:hover {
    color: var(--button-color-hover, #fff);
}

/* ── Card Style for Columns ──────────────────────────────── */
.lcms-card {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-cards, var(--shadow-sm));
}

@media (min-width: 768px) {
    .lcms-card {
        padding: var(--card-padding, 2rem);
    }
}

/* Card modifiers — below media query to ensure they win. */
.lcms-card.lcms-card--compact {
    padding: var(--card-padding-compact, 1rem);
}

.lcms-card.lcms-card--flush {
    padding: 0;
}

/* ── Responsive Pull Offsets ────────────────────────────────
   Use via inline style: style="--pull-top: -10rem;"
   Only applies on md+ breakpoints, resets on mobile.
   Uses attribute selector + !important to win specificity.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .block-content__col[style*="--pull-top"] {
        margin-top: var(--pull-top) !important;
    }
    .block-content__col[style*="--pull-right"] {
        margin-right: var(--pull-right) !important;
    }
    .block-content__col[style*="--pull-bottom"] {
        margin-bottom: var(--pull-bottom) !important;
    }
    .block-content__col[style*="--pull-left"] {
        margin-left: var(--pull-left) !important;
    }
}

/* ── Gravity Forms Styling ──────────────────────────────────
   Match form buttons and inputs to site branding.
   ──────────────────────────────────────────────────────────── */
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
    background: var(--button-bg, var(--color-brand-accent)) !important;
    border-color: var(--color-brand-accent) !important;
    color: var(--button-color, #fff) !important;
    padding: var(--btn-padding, 12px 24px);
    border-radius: var(--rounded-btn, 25px);
    box-shadow: var(--shadow-btn, none);
    font-weight: 600;
    transition: var(--transition-fast);
    cursor: pointer;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
    background: var(--button-bg-hover, var(--color-brand-accent-hover)) !important;
    border-color: var(--color-brand-accent-hover) !important;
    color: var(--button-color-hover, #fff) !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--color-text-primary);
    opacity: 0.6;
}

/* ── Dialog Component ────────────────────────────────────────
   Native <dialog> element styling for modals, drawers, and sheets.
   Uses CSS-only approach with minimal JS for open/close.
   ──────────────────────────────────────────────────────────── */
.lcms-dialog {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lcms-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.lcms-dialog__backdrop {
    position: fixed;
    inset: 0;
    cursor: pointer;
}

.lcms-dialog__backdrop button {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lcms-dialog__box {
    background: var(--color-bg-primary, #fff);
    color: var(--color-text-primary, #101010);
    text-align: left;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.lcms-dialog__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    padding: 0.25rem;
    transition: color var(--transition-fast);
    z-index: 10;
}

.lcms-dialog__close:hover {
    color: var(--color-text-primary, #101010);
}

.lcms-dialog__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.lcms-dialog__content {
    font-size: 1rem;
    line-height: 1.6;
}

.lcms-dialog__content p {
    margin-bottom: 1rem;
}

.lcms-dialog__content p:last-child {
    margin-bottom: 0;
}

/* Modal variant — centered overlay */
.lcms-dialog--modal[open] {
    display: grid;
    place-items: center;
    padding: 1rem;
}

.lcms-dialog--modal .lcms-dialog__box {
    max-width: 42rem;
    max-height: 80vh;
    width: 100%;
    border-radius: var(--border-radius-lg, 16px);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    animation: lcms-modal-pop 0.2s ease-out;
}

/* Drawer variant — slides from right */
.lcms-dialog--drawer[open] {
    display: flex;
    justify-content: flex-end;
}

.lcms-dialog--drawer .lcms-dialog__box {
    height: 100vh;
    width: 100%;
    max-width: 28rem;
    padding: 1.5rem;
    animation: lcms-drawer-slide-in 0.3s ease-out;
}

/* Sheet variant — slides from bottom */
.lcms-dialog--sheet[open] {
    display: flex;
    align-items: flex-end;
}

.lcms-dialog--sheet .lcms-dialog__box {
    width: 100%;
    max-height: 80vh;
    border-radius: var(--border-radius-lg, 16px) var(--border-radius-lg, 16px) 0 0;
    padding: 1.5rem;
    animation: lcms-sheet-slide-up 0.3s ease-out;
}

/* Animations */
@keyframes lcms-modal-pop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lcms-drawer-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes lcms-sheet-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}