/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ==========================================================================
   JF CSS Framework (Clean) — Bricks + Advanced Themer friendly
   - Scoped: .jf-scope ...
   - Theming: :root[data-theme="light|dark"]
   - Layers: predictable overrides
   - OKLCH-first colors + fallback
   - Container queries + @media fallback (safety)
   ========================================================================== */

@layer jf-reset, jf-base, jf-components, jf-utilities, jf-overrides;

/* Optional: typed custom property for glow */
@property --jf-glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ========================================================================== */
/* RESET */
/* ========================================================================== */
@layer jf-reset {
  :where(.jf-scope) *,
  :where(.jf-scope) *::before,
  :where(.jf-scope) *::after { box-sizing: border-box; }

  :where(.jf-scope) img,
  :where(.jf-scope) video { max-width: 100%; height: auto; display: block; }

  :where(.jf-scope) button,
  :where(.jf-scope) input,
  :where(.jf-scope) select,
  :where(.jf-scope) textarea { font: inherit; }

  :where(.jf-scope) a { color: inherit; text-decoration: none; }

  :where(.jf-scope) :focus-visible {
    outline: 3px solid color-mix(in oklab, var(--jf-primary) 65%, transparent);
    outline-offset: 2px;
  }
}

/* ========================================================================== */
/* TOKENS + THEME */
/* ========================================================================== */
@layer jf-base {
  :root {
    color-scheme: light;

    /* =========================================
       1. BRAND SOURCE (Define ONCE here)
       ========================================= */
    --jf-brand-primary: hsl(238 100% 62%);
    --jf-brand-secondary: hsl(0 94% 68%);
    --jf-brand-tertiary: hsl(198 74% 51%);

    /* 2. Mappings (Derived from Source) */
    --jf-primary: var(--jf-brand-primary);
    --jf-secondary: var(--jf-brand-secondary);
    --jf-tertiary: var(--jf-brand-tertiary);

    /* Surfaces */
    --jf-bg: hsl(0 0% 98%);
    --jf-surface: hsl(0 0% 100%);
    --jf-surface-2: hsl(0 0% 96%);

    /* Text */
    --jf-text: hsl(0 0% 18%);
    --jf-text-muted: hsl(0 0% 38%);

    /* Border */
    --jf-border: hsl(0 0% 0% / 0.12);

    /* Feedback */
    --jf-success: hsl(136 95% 40%);
    --jf-error: hsl(351 95% 56%);

    /* Radii */
    --jf-radius-s: 0.5rem;
    --jf-radius-m: 0.75rem;
    --jf-radius-l: 1.25rem;
    --jf-radius-full: 999rem;

    /* Shadows */
    --jf-shadow-s: 0 1px 2px hsl(0 0% 0% / 0.10);
    --jf-shadow-m: 0 6px 24px hsl(0 0% 0% / 0.12);
    --jf-shadow-l: 0 14px 50px hsl(0 0% 0% / 0.18);

    /* Spacing */
    --jf-space-2xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    --jf-space-xs: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
    --jf-space-s: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --jf-space-m: clamp(1.25rem, 1rem + 1vw, 2rem);
    --jf-space-l: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
    --jf-space-xl: clamp(2.25rem, 1.7rem + 2.6vw, 4.5rem);

    /* Type */
    --jf-text-s: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
    --jf-text-m: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    --jf-text-l: clamp(1.15rem, 1.05rem + 0.75vw, 1.5rem);
    --jf-text-xl: clamp(1.4rem, 1.15rem + 1.4vw, 2.1rem);
    --jf-text-2xl: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);

    /* Layout */
    --jf-max: 1200px;
    --jf-container-pad: var(--jf-space-s);

    /* Motion */
    --jf-ease: cubic-bezier(.2,.8,.2,1);
    --jf-dur-1: 160ms;
    --jf-dur-2: 260ms;

    --jf-glow: 0;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --jf-bg: hsl(0 0% 6%);
    --jf-surface: hsl(0 0% 11%);
    --jf-surface-2: hsl(0 0% 15%);

    --jf-text: hsl(0 0% 92%);
    --jf-text-muted: hsl(0 0% 72%);

    --jf-border: hsl(0 0% 100% / 0.12);

    --jf-shadow-s: 0 1px 2px hsl(0 0% 0% / 0.35);
    --jf-shadow-m: 0 10px 30px hsl(0 0% 0% / 0.35);
    --jf-shadow-l: 0 18px 60px hsl(0 0% 0% / 0.45);
  }

  /* OKLCH upgrade (progressive enhancement) */
  @supports (color: oklch(60% 0.2 250)) {
    :root {
      /* Define base brand as OKLCH-ish via conversion from fallback */
      --jf-primary: oklch(from var(--jf-brand-primary) l c h);
      --jf-secondary: oklch(from var(--jf-brand-secondary) l c h);
      --jf-tertiary: oklch(from var(--jf-brand-tertiary) l c h);

      --jf-bg: oklch(from hsl(0 0% 98%) l c h);
      --jf-surface: oklch(from hsl(0 0% 100%) l c h);
      --jf-surface-2: oklch(from hsl(0 0% 96%) l c h);

      --jf-text: oklch(from hsl(0 0% 18%) l c h);
      --jf-text-muted: oklch(from hsl(0 0% 38%) l c h);

      --jf-border: color-mix(in oklab, var(--jf-text) 14%, transparent);

      --jf-success: oklch(from hsl(136 95% 40%) l c h);
      --jf-error: oklch(from hsl(351 95% 56%) l c h);
    }

    :root[data-theme="dark"] {
      --jf-border: color-mix(in oklab, var(--jf-text) 16%, transparent);
    }
  }

  /* Scope defaults */
  :where(.jf-scope) {
    background: var(--jf-bg);
    color: var(--jf-text);
    font-size: var(--jf-text-m);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  :where(.jf-scope) :where(h1,h2,h3,h4) {
    color: var(--jf-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0;
  }

  :where(.jf-scope) h1 { font-size: var(--jf-text-2xl); line-height: 1.1; }
  :where(.jf-scope) h2 { font-size: var(--jf-text-xl); line-height: 1.15; }
  :where(.jf-scope) h3 { font-size: var(--jf-text-l); line-height: 1.2; }

  :where(.jf-scope) :where(p,li) {
    font-size: var(--jf-text-m);
    line-height: 1.6;
    text-wrap: pretty;
    margin: 0;
    color: var(--jf-text-muted);
  }

  :where(.jf-scope) a {
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.08em;
  }
}

/* ========================================================================== */
/* COMPONENTS */
/* ========================================================================== */
@layer jf-components {
  /* Section + container */
  .jf-section { padding-block: var(--jf-space-xl); }

  .jf-container {
    width: min(100% - (2 * var(--jf-container-pad)), var(--jf-max));
    margin-inline: auto;
  }

  /* Container Queries (opt-in) */
  .jf-cq {
    container-type: inline-size;
    container-name: jf;
  }

  /* Kicker */
  .jf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--jf-text-s);
    color: var(--jf-text-muted);
    letter-spacing: 0.02em;
  }

  /* Media placeholder */
  .jf-media {
    --_ratio: 16 / 9;
    margin: 0;
    display: grid;
    place-items: center;

    aspect-ratio: var(--_ratio);
    width: 100%;

    border-radius: var(--jf-radius-l);
    border: 1px solid var(--jf-border);
    background: var(--jf-surface-2);
    box-shadow: var(--jf-shadow-s);

    overflow: hidden;
    position: relative;

    transition: transform var(--jf-dur-2) var(--jf-ease),
                box-shadow var(--jf-dur-2) var(--jf-ease),
                border-color var(--jf-dur-2) var(--jf-ease);
  }

  .jf-media:hover {
    transform: translateY(-1px);
    box-shadow: var(--jf-shadow-m);
    border-color: color-mix(in oklab, var(--jf-primary) 22%, var(--jf-border));
  }

  .jf-media > .jf-media__label {
    font-size: var(--jf-text-s);
    color: var(--jf-text-muted);
    text-align: center;
    padding: var(--jf-space-xs);
    max-width: 60ch;
    text-wrap: balance;
  }

  .jf-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      120% 80% at 20% 10%,
      color-mix(in oklab, var(--jf-primary) 12%, transparent),
      transparent 60%
    );
    opacity: 0.9;
    pointer-events: none;
  }

  .jf-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      transparent 0%,
      color-mix(in oklab, var(--jf-text) 6%, transparent) 35%,
      transparent 70%
    );
    opacity: 0.35;
    pointer-events: none;
  }

  /* Media ratios */
  .jf-media--hero { --_ratio: 16 / 7; }
  .jf-media--wide { --_ratio: 21 / 9; }
  .jf-media--card { --_ratio: 4 / 3; border-radius: var(--jf-radius-m); }
  .jf-media--square { --_ratio: 1 / 1; border-radius: var(--jf-radius-m); }
  .jf-media--avatar { --_ratio: 1 / 1; border-radius: var(--jf-radius-full); width: 72px; }

  /* Layout primitives */
  .jf-stack { display: grid; gap: var(--jf-space-s); }
  .jf-cluster { display: flex; flex-wrap: wrap; gap: var(--jf-space-xs); align-items: center; }
  .jf-grid { display: grid; gap: var(--jf-space-m); }
  .jf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Container-query responsive (requires ancestor .jf-cq) */
  @container jf (max-width: 720px) {
    .jf-grid-2, .jf-grid-3,.jf-grid-4 { grid-template-columns: 1fr; }
  }

  /* Viewport fallback (safety net if .jf-cq is missing) */
  @media (max-width: 720px) {
    .jf-grid-2, .jf-grid-3 { grid-template-columns: 1fr; }
  }

  /* Card */
  .jf-card {
    background: var(--jf-surface);
    border: 1px solid var(--jf-border);
    border-radius: var(--jf-radius-l);
    padding: var(--jf-space-m);
    box-shadow: var(--jf-shadow-s);
    transition: transform var(--jf-dur-2) var(--jf-ease),
                box-shadow var(--jf-dur-2) var(--jf-ease),
                border-color var(--jf-dur-2) var(--jf-ease);
  }

  .jf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jf-shadow-m);
    border-color: color-mix(in oklab, var(--jf-primary) 25%, var(--jf-border));
  }

  /* Button */
  .jf-btn {
    --_bg: var(--jf-primary);
    --_fg: white;
    --_bd: color-mix(in oklab, var(--jf-primary) 70%, black);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    padding: 0.75em 1.05em;
    border-radius: var(--jf-radius-m);
    border: 1px solid var(--_bd);

    background: var(--_bg);
    color: var(--_fg);

    font-weight: 650;
    letter-spacing: 0.01em;

    box-shadow: var(--jf-shadow-s);
    cursor: pointer;
    user-select: none;

    transition: transform var(--jf-dur-2) var(--jf-ease),
                filter var(--jf-dur-2) var(--jf-ease),
                box-shadow var(--jf-dur-2) var(--jf-ease);
  }

  .jf-btn:hover { transform: translateY(-1px); box-shadow: var(--jf-shadow-m); }
  .jf-btn:active { transform: translateY(0px) scale(0.99); }

  .jf-btn--secondary { --_bg: var(--jf-secondary); --_bd: color-mix(in oklab, var(--jf-secondary) 70%, black); }
  .jf-btn--tertiary { --_bg: var(--jf-tertiary); --_bd: color-mix(in oklab, var(--jf-tertiary) 70%, black); }

  .jf-btn--ghost {
    --_bg: transparent;
    --_fg: var(--jf-text);
    --_bd: transparent;
    box-shadow: none;
  }
  .jf-btn--ghost:hover {
    background: color-mix(in oklab, var(--jf-text) 8%, transparent);
  }

  /* Input */
  .jf-input, .jf-select, .jf-textarea {
    width: 100%;
    padding: 0.8em 0.95em;
    border-radius: var(--jf-radius-m);
    border: 1px solid var(--jf-border);
    background: var(--jf-surface-2);
    color: var(--jf-text);
    box-shadow: var(--jf-shadow-s);
    transition: border-color var(--jf-dur-2) var(--jf-ease),
                box-shadow var(--jf-dur-2) var(--jf-ease),
                background var(--jf-dur-2) var(--jf-ease);
  }

  .jf-input::placeholder, .jf-textarea::placeholder {
    color: color-mix(in oklab, var(--jf-text) 45%, transparent);
  }

  .jf-input:hover, .jf-select:hover, .jf-textarea:hover {
    border-color: color-mix(in oklab, var(--jf-primary) 35%, var(--jf-border));
  }

  .jf-input:focus, .jf-select:focus, .jf-textarea:focus {
    border-color: color-mix(in oklab, var(--jf-primary) 70%, white);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--jf-primary) 22%, transparent);
    background: var(--jf-surface);
    outline: none;
  }

  .jf-input:invalid {
    border-color: var(--jf-error);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--jf-error) 20%, transparent);
  }

  /* Badge */
  .jf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35em 0.7em;
    border-radius: var(--jf-radius-full);
    background: color-mix(in oklab, var(--jf-primary) 10%, transparent);
    color: color-mix(in oklab, var(--jf-primary) 70%, var(--jf-text));
    border: 1px solid color-mix(in oklab, var(--jf-primary) 20%, transparent);
    font-weight: 600;
    font-size: var(--jf-text-s);
  }

  /* Divider */
  .jf-divider {
    height: 1px;
    background: var(--jf-border);
    border: 0;
    margin-block: var(--jf-space-m);
  }

  /* Link */
  .jf-link {
    color: var(--jf-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    transition: opacity var(--jf-dur-1) var(--jf-ease);
  }
  .jf-link:hover { opacity: 0.85; }

  /* Animations */
  @keyframes jf-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes jf-pop {
    0% { transform: scale(0.98); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes jf-glow-pulse {
    0% { --jf-glow: 0; }
    100% { --jf-glow: 1; }
  }

  .jf-anim-fade-up { animation: jf-fade-up var(--jf-dur-2) var(--jf-ease) both; }
  .jf-anim-pop { animation: jf-pop var(--jf-dur-2) var(--jf-ease) both; }
  .jf-anim-glow {
    animation: jf-glow-pulse 1200ms var(--jf-ease) infinite alternate;
    box-shadow:
      0 0 calc(10px + (18px * var(--jf-glow))) color-mix(in oklab, var(--jf-primary) 25%, transparent),
      var(--jf-shadow-m);
  }

  /* Reduced motion (single block, no duplicates) */
  @media (prefers-reduced-motion: reduce) {
    :where(.jf-scope *) {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ========================================================================== */
/* UTILITIES (small + intentional) */
/* ========================================================================== */
@layer jf-utilities {
  .jf-u-gap-xs { gap: var(--jf-space-xs); }
  .jf-u-gap-s  { gap: var(--jf-space-s); }
  .jf-u-gap-m  { gap: var(--jf-space-m); }
  .jf-u-gap-l  { gap: var(--jf-space-l); }

  .jf-u-p-xs { padding: var(--jf-space-xs); }
  .jf-u-p-s  { padding: var(--jf-space-s); }
  .jf-u-p-m  { padding: var(--jf-space-m); }
  .jf-u-p-l  { padding: var(--jf-space-l); }

  .jf-u-py-l  { padding-block: var(--jf-space-l); }
  .jf-u-py-xl { padding-block: var(--jf-space-xl); }

  .jf-u-text-center { text-align: center; }
  .jf-u-text-left { text-align: left; }
  .jf-u-text-right { text-align: right; }

  .jf-u-muted { color: var(--jf-text-muted); }
  .jf-u-title { color: var(--jf-text); }

  .jf-u-flex { display: flex; }
  .jf-u-flex-col { flex-direction: column; }
  .jf-u-wrap { flex-wrap: wrap; }
  .jf-u-items-center { align-items: center; }
  .jf-u-justify-between { justify-content: space-between; }

  .jf-u-full { width: 100%; }
  .jf-u-max { width: min(100% - (2 * var(--jf-container-pad)), var(--jf-max)); margin-inline: auto; }

  .jf-u-surface { background: var(--jf-surface); border: 1px solid var(--jf-border); border-radius: var(--jf-radius-l); }
  .jf-u-bg { background: var(--jf-bg); }

  .jf-u-hidden { display: none !important; }
}

/* ========================================================================== */
/* OVERRIDES (ONLY place for site hacks) */
/* ========================================================================== */
@layer jf-overrides {
  /* Put Bricks/site-specific overrides here. */
  /* 
     STRATEGY: Use [data-jf-custom="name"] for unique overrides. 
     Do not pollute the global class namespace.
  */
  @media (min-width: 0px) {
    /* Example:
    [data-jf-custom="marketing-hero"] {
      background: color-mix(in oklab, var(--jf-primary) 5%, transparent);
    } 
    */
  }
}