/*
 * File: frontend.css
 * Location: /wptruss/assets/css/frontend.css
 * Purpose: Global wpTruss utility classes with CSS variable fallbacks.
 *          All classes use doubled specificity where needed and include
 *          hard-coded fallback values so they work even before tokens load.
 *          No animation or transition (V1 Motion Layer policy).
 */

/* ── Background utilities ─────────────────────────────────────────────────── */
.wpt-bg-primary   { background-color: var(--wpt-color-primary,   #FF6B35); }
.wpt-bg-secondary { background-color: var(--wpt-color-secondary, #004E89); }
.wpt-bg-accent    { background-color: var(--wpt-color-accent,    #FFD23F); }
.wpt-bg-dark      { background-color: var(--wpt-color-dark,      #1A1A1D); }
.wpt-bg-light     { background-color: var(--wpt-color-light,     #FFFFFF); }
.wpt-bg-surface   { background-color: var(--wpt-color-surface,   #F8F9FA); }
.wpt-bg-muted     { background-color: var(--wpt-color-muted,     #6C757D); }

/* ── Text color utilities ─────────────────────────────────────────────────── */
.wpt-text-primary   { color: var(--wpt-color-primary,   #FF6B35); }
.wpt-text-secondary { color: var(--wpt-color-secondary, #004E89); }
.wpt-text-dark      { color: var(--wpt-color-dark,      #1A1A1D); }
.wpt-text-light     { color: var(--wpt-color-light,     #FFFFFF); }
.wpt-text-muted     { color: var(--wpt-color-muted,     #6C757D); }

/* ── Border radius utilities ──────────────────────────────────────────────── */
.wpt-radius-none { border-radius: 0; }
.wpt-radius-sm   { border-radius: var(--wpt-radius-sm,   0.25rem); }
.wpt-radius-md   { border-radius: var(--wpt-radius-md,   0.375rem); }
.wpt-radius-lg   { border-radius: var(--wpt-radius-lg,   0.5rem); }
.wpt-radius-xl   { border-radius: var(--wpt-radius-xl,   0.75rem); }
.wpt-radius-full { border-radius: var(--wpt-radius-full, 9999px); }

/* ── Shadow utilities ─────────────────────────────────────────────────────── */
.wpt-shadow-none { box-shadow: none; }
.wpt-shadow-sm   { box-shadow: var(--wpt-shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); }
.wpt-shadow-md   { box-shadow: var(--wpt-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)); }
.wpt-shadow-lg   { box-shadow: var(--wpt-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); }
.wpt-shadow-xl   { box-shadow: var(--wpt-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1)); }

/* ── Block vertical padding ───────────────────────────────────────────────── */
.wpt-pad-xs  { padding-top: var(--wpt-spacing-xs,  0.25rem); padding-bottom: var(--wpt-spacing-xs,  0.25rem); }
.wpt-pad-sm  { padding-top: var(--wpt-spacing-sm,  0.5rem);  padding-bottom: var(--wpt-spacing-sm,  0.5rem);  }
.wpt-pad-md  { padding-top: var(--wpt-spacing-md,  1rem);    padding-bottom: var(--wpt-spacing-md,  1rem);    }
.wpt-pad-lg  { padding-top: var(--wpt-spacing-lg,  1.5rem);  padding-bottom: var(--wpt-spacing-lg,  1.5rem);  }
.wpt-pad-xl  { padding-top: var(--wpt-spacing-xl,  2rem);    padding-bottom: var(--wpt-spacing-xl,  2rem);    }
.wpt-pad-2xl { padding-top: var(--wpt-spacing-2xl, 3rem);    padding-bottom: var(--wpt-spacing-2xl, 3rem);    }
.wpt-pad-3xl { padding-top: var(--wpt-spacing-3xl, 4rem);    padding-bottom: var(--wpt-spacing-3xl, 4rem);    }
.wpt-pad-4xl { padding-top: var(--wpt-spacing-4xl, 6rem);    padding-bottom: var(--wpt-spacing-4xl, 6rem);    }

/* ── Text alignment ───────────────────────────────────────────────────────── */
.wpt-text-left   { text-align: left;   }
.wpt-text-center { text-align: center; }
.wpt-text-right  { text-align: right;  }

/* ── Container ────────────────────────────────────────────────────────────── */
.wpt-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left:  var(--wpt-spacing-lg, 1.5rem);
    padding-right: var(--wpt-spacing-lg, 1.5rem);
    box-sizing: border-box;
}

/* ── Global button base ───────────────────────────────────────────────────── */
.wpt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wpt-spacing-xs, 0.25rem);
    font-family: var(--wpt-font-body, sans-serif);
    font-weight: var(--wpt-font-semibold, 600);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    border-radius: var(--wpt-radius-md, 0.375rem);
    line-height: 1;
    box-sizing: border-box;
    /* No transition — V1 Motion Layer policy */
}
.wpt-btn--sm { padding: var(--wpt-spacing-xs, 0.25rem) var(--wpt-spacing-sm, 0.5rem); font-size: var(--wpt-text-sm, 0.875rem); }
.wpt-btn--md { padding: var(--wpt-spacing-sm, 0.5rem)  var(--wpt-spacing-md, 1rem);   font-size: var(--wpt-text-base, 1rem);   }
.wpt-btn--lg { padding: var(--wpt-spacing-md, 1rem)    var(--wpt-spacing-xl, 2rem);   font-size: var(--wpt-text-lg, 1.125rem); }
.wpt-btn--primary   { background: var(--wpt-color-primary,   #FF6B35); color: #fff; }
.wpt-btn--secondary { background: var(--wpt-color-secondary, #004E89); color: #fff; }
.wpt-btn--outline   { background: transparent; border-color: currentColor; }

/* ── Glass ────────────────────────────────────────────────────────────────── */
.wpt-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Grid helpers ─────────────────────────────────────────────────────────── */
.wpt-grid        { display: grid; }
.wpt-grid--2col  { grid-template-columns: repeat(2, 1fr); gap: var(--wpt-spacing-lg, 1.5rem); }
.wpt-grid--3col  { grid-template-columns: repeat(3, 1fr); gap: var(--wpt-spacing-lg, 1.5rem); }
.wpt-grid--4col  { grid-template-columns: repeat(4, 1fr); gap: var(--wpt-spacing-lg, 1.5rem); }
@media (max-width: 1024px) {
    .wpt-grid--4col,.wpt-grid--3col { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
    .wpt-grid--2col,.wpt-grid--3col,.wpt-grid--4col { grid-template-columns: 1fr; }
}

/* ── Responsive visibility — hide per device ──────────────────────────────── */
/*
 * Used by all wpTruss blocks via the Layout panel (Panel 5).
 * Blocks add these classes based on hideOnMobile / hideOnTablet / hideOnDesktop attributes.
 * Defined once here — no per-block CSS needed.
 *
 * Breakpoints:
 *   Mobile:  max-width 640px
 *   Tablet:  641px – 1024px
 *   Desktop: min-width 1025px
 */
@media (max-width: 640px) {
    .wpt-hide-mobile { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .wpt-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
    .wpt-hide-desktop { display: none !important; }
}

/* ── Responsive layout direction — stack vs row per device ────────────────── */
/*
 * Used by all wpTruss blocks via the Layout panel (Panel 5).
 * Controls whether block inner columns stack vertically (one after another)
 * or display side by side (row) at each breakpoint.
 * Applied to the block's flex container.
 *
 * 'stack' = flex-direction: column  (one div after another, top to bottom)
 * 'row'   = flex-direction: row     (side by side, left to right)
 */
@media (max-width: 640px) {
    .wpt-mobile-stack { flex-direction: column !important; }
    .wpt-mobile-row   { flex-direction: row    !important; flex-wrap: wrap; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .wpt-tablet-stack { flex-direction: column !important; }
    .wpt-tablet-row   { flex-direction: row    !important; flex-wrap: wrap; }
}
@media (min-width: 1025px) {
    .wpt-desktop-stack { flex-direction: column !important; }
    .wpt-desktop-row   { flex-direction: row    !important; flex-wrap: wrap; }
}

/* ── Screen reader only ───────────────────────────────────────────────────── */
.wpt-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}