/* =============================================================================
   Foxco Dual Heading Widget — Preset Styles
   Version: 2.1.0
   Loaded as a proper stylesheet on both the Elementor preview iframe
   and the frontend, so presets always render correctly.
============================================================================= */

/* === FOXCO CLASSIC === */
.foxco-dual-heading.preset-foxco-classic {
    background: #0d0d0d;
    border: 2px solid #e879f9;
    border-radius: 8px;
    padding: 28px 44px;
    position: relative;
    overflow: hidden;
}
.foxco-dual-heading.preset-foxco-classic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -30%, rgba(232,121,249,.18) 0%, transparent 65%);
    pointer-events: none;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    line-height: 1.1;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-1 strong {
    color: #e85d04;
    font-style: normal;
}
.foxco-dual-heading.preset-foxco-classic .foxco-dual-heading__heading-2 {
    color: #e85d04;
    font-size: clamp(.9rem, 1.8vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0;
}

/* === NEON PULSE === */
@keyframes foxco-neon-flicker {
    0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }
    20%,24%,55% { opacity: .85; }
}
@keyframes foxco-neon-pulse {
    0%,100% { text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5); }
    50%      { text-shadow: 0 0 4px #00f5ff, 0 0 12px #00f5ff, 0 0 28px rgba(0,245,255,.3); }
}
.foxco-dual-heading.preset-neon-pulse {
    background: #05050f;
    border: 1px solid rgba(0,245,255,.25);
    border-radius: 6px;
    padding: 32px 44px;
    position: relative;
    overflow: hidden;
}
.foxco-dual-heading.preset-neon-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,245,255,.015) 0px,
        rgba(0,245,255,.015) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}
.foxco-dual-heading.preset-neon-pulse .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 8px;
    text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5);
    animation: foxco-neon-pulse 2.4s ease-in-out infinite, foxco-neon-flicker 5s linear infinite;
}
.foxco-dual-heading.preset-neon-pulse .foxco-dual-heading__heading-2 {
    color: #c084fc;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 6px #a855f7, 0 0 18px rgba(168,85,247,.5);
}

/* === GRADIENT FIRE === */
@keyframes foxco-fire-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.foxco-dual-heading.preset-gradient-fire {
    background: #0a0a0a;
    border-left: 4px solid #ff4500;
    padding: 28px 40px;
    border-radius: 0 8px 8px 0;
}
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-1 {
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    line-height: 1.1;
    background: linear-gradient(270deg, #ff6b00, #ff0044, #ff6b00, #ff8800);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: foxco-fire-shift 3.5s ease infinite;
}
.foxco-dual-heading.preset-gradient-fire .foxco-dual-heading__heading-2 {
    color: rgba(255,255,255,.75);
    font-size: clamp(.9rem, 1.8vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    margin: 0;
}

/* === TECH TERMINAL === */
@keyframes foxco-blink {
    0%,49% { opacity: 1; }
    50%,100% { opacity: 0; }
}
.foxco-dual-heading.preset-tech-terminal {
    background: #080808;
    border: 1px solid rgba(0,255,65,.3);
    border-radius: 4px;
    padding: 36px 40px 28px;
    position: relative;
    font-family: "Courier New", Courier, monospace;
    box-shadow: 0 0 24px rgba(0,255,65,.08), inset 0 0 60px rgba(0,255,65,.03);
}
.foxco-dual-heading.preset-tech-terminal::before {
    content: "● ● ●";
    position: absolute;
    top: 12px;
    left: 16px;
    color: rgba(0,255,65,.4);
    font-size: .55rem;
    letter-spacing: 4px;
    font-family: sans-serif;
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-1 {
    color: #00ff41;
    font-size: clamp(1.2rem, 2.8vw, 2.2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    text-shadow: 0 0 8px rgba(0,255,65,.7), 0 0 20px rgba(0,255,65,.35);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2 {
    color: #00cc33;
    font-size: clamp(.8rem, 1.5vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 0;
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2::before {
    content: "> ";
    color: rgba(0,255,65,.6);
}
.foxco-dual-heading.preset-tech-terminal .foxco-dual-heading__heading-2::after {
    content: "_";
    animation: foxco-blink .8s step-end infinite;
    color: #00ff41;
}

/* === GLASSMORPHISM === */
.foxco-dual-heading.preset-glassmorphism {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    padding: 36px 48px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
.foxco-dual-heading.preset-glassmorphism::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: linear-gradient(105deg, rgba(255,255,255,.12), rgba(255,255,255,0));
    pointer-events: none;
}
.foxco-dual-heading.preset-glassmorphism .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    line-height: 1.2;
}
.foxco-dual-heading.preset-glassmorphism .foxco-dual-heading__heading-2 {
    color: rgba(255,255,255,.7);
    font-size: clamp(.9rem, 1.7vw, 1.15rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    margin: 0;
}

/* === CINEMATIC GOLD === */
.foxco-dual-heading.preset-cinematic-gold {
    background: transparent;
    padding: 24px 0 28px;
    border-bottom: 1px solid rgba(212,175,55,.35);
    position: relative;
}
.foxco-dual-heading.preset-cinematic-gold::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, transparent);
    margin-bottom: 20px;
}
.foxco-dual-heading.preset-cinematic-gold .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 2.8rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 14px;
    line-height: 1.15;
}
.foxco-dual-heading.preset-cinematic-gold .foxco-dual-heading__heading-2 {
    color: #d4af37;
    font-size: clamp(.7rem, 1.2vw, .9rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    margin: 0;
}

/* === CYBER SLASH === */
@keyframes foxco-cyber-scan {
    0%   { top: -2px; }
    100% { top: 100%; }
}
.foxco-dual-heading.preset-cyber-slash {
    background: #0d0d1a;
    border-left: 4px solid #ff6600;
    border-radius: 0 12px 12px 0;
    padding: 30px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 80px rgba(255,102,0,.06), -2px 0 24px rgba(255,102,0,.2);
}
.foxco-dual-heading.preset-cyber-slash::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,102,0,.06) 100%);
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
}
.foxco-dual-heading.preset-cyber-slash::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,102,0,.6), transparent 70%);
    animation: foxco-cyber-scan 3s linear infinite;
    pointer-events: none;
    opacity: .5;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 8px;
    line-height: 1.1;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-1 strong {
    color: #ff6600;
    font-style: normal;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-2 {
    color: #ff6600;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.foxco-dual-heading.preset-cyber-slash .foxco-dual-heading__heading-2::before {
    content: "// ";
    opacity: .6;
}


/* =============================================================================
   QUOTE STYLES — real <span> elements, no pseudo-elements
   .foxco-quote--open / .foxco-quote--close injected directly into the HTML
============================================================================= */

/* Shared base for all quote spans */
.foxco-quote {
    display: inline;
    font-style: normal;
    font-weight: 400;
    line-height: 0;
    vertical-align: -0.3em;
}

/* ── 1. TYPOGRAPHIC ────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-typographic .foxco-quote {
    color: #e85d04;
    font-size: 1.4em;
    font-family: Georgia, serif;
    line-height: 0;
    vertical-align: -0.3em;
}

/* ── 2. OVERSIZED ──────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-oversized .foxco-dual-heading__heading-1 {
    position: relative;
}
.foxco-dual-heading.quote-oversized .foxco-quote--oversized {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 4.5em;
    line-height: 1;
    color: #e85d04;
    opacity: 0.45;
    pointer-events: none;
    vertical-align: 0;
}
.foxco-dual-heading.quote-oversized .foxco-quote--open.foxco-quote--oversized {
    top: -0.05em;
    left: -0.35em;
}
.foxco-dual-heading.quote-oversized .foxco-quote--close.foxco-quote--oversized {
    bottom: -0.45em;
    right: -0.3em;
}
/* Add padding so the oversized quotes don't overlap text */
.foxco-dual-heading.quote-oversized .foxco-dual-heading__heading-1 {
    padding-left: 0.45em;
    padding-right: 0.45em;
}

/* ── 3. BRACKETS ───────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-brackets .foxco-quote--bracket {
    display: inline-block;
    width: 10px;
    align-self: stretch;
    border-style: solid;
    border-color: #e85d04;
    opacity: 0.8;
    vertical-align: middle;
    line-height: normal;
}
.foxco-dual-heading.quote-brackets .foxco-quote--open.foxco-quote--bracket {
    border-width: 2px 0 2px 2px;
    margin-right: 8px;
}
.foxco-dual-heading.quote-brackets .foxco-quote--close.foxco-quote--bracket {
    border-width: 2px 2px 2px 0;
    margin-left: 8px;
}
/* Make heading inline-flex so bracket spans stretch to full height */
.foxco-dual-heading.quote-brackets .foxco-dual-heading__heading-1 {
    display: inline-flex;
    align-items: stretch;
}

/* ── 4. CHEVRONS ───────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-chevron .foxco-quote {
    color: #e85d04;
    font-size: 0.75em;
    font-weight: 300;
    letter-spacing: -1px;
    vertical-align: 0.1em;
    line-height: 0;
}

/* ── 5. NEON ───────────────────────────────────────────────────────────────── */
.foxco-dual-heading.quote-neon .foxco-quote {
    color: #00f5ff;
    font-size: 1.6em;
    font-family: Georgia, serif;
    line-height: 0;
    vertical-align: -0.35em;
    text-shadow: 0 0 8px #00f5ff, 0 0 20px #00f5ff;
}

/* ── 6. ANIMATED ───────────────────────────────────────────────────────────── */
@keyframes foxco-quote-cycle {
    0%   { color: #e85d04; }
    33%  { color: #e879f9; }
    66%  { color: #00f5ff; }
    100% { color: #e85d04; }
}
.foxco-dual-heading.quote-animated .foxco-quote {
    font-family: Georgia, serif;
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.35em;
    animation: foxco-quote-cycle 3s ease-in-out infinite;
}

/* =============================================================================
   NEON QUOTE PRESETS — applied via .neon-{preset} on the wrapper
============================================================================= */

/* Foxco Orange — #df6737 */
.foxco-dual-heading.neon-foxco .foxco-quote {
    color: #df6737 !important;
    text-shadow: 0 0 8px #df6737, 0 0 20px #df6737, 0 0 40px rgba(223,103,55,.5) !important;
}

/* Purple */
.foxco-dual-heading.neon-purple .foxco-quote {
    color: #c084fc !important;
    text-shadow: 0 0 8px #c084fc, 0 0 20px #a855f7, 0 0 40px rgba(168,85,247,.5) !important;
}

/* Matrix Green */
.foxco-dual-heading.neon-green .foxco-quote {
    color: #00ff41 !important;
    text-shadow: 0 0 8px #00ff41, 0 0 20px #00ff41, 0 0 40px rgba(0,255,65,.5) !important;
}

/* Hot Pink */
.foxco-dual-heading.neon-pink .foxco-quote {
    color: #ff0099 !important;
    text-shadow: 0 0 8px #ff0099, 0 0 20px #ff0099, 0 0 40px rgba(255,0,153,.5) !important;
}

/* Gold */
.foxco-dual-heading.neon-gold .foxco-quote {
    color: #ffd700 !important;
    text-shadow: 0 0 8px #ffd700, 0 0 20px #f59e0b, 0 0 40px rgba(255,215,0,.5) !important;
}

/* Cyan (default — also the base .quote-neon style, listed here for explicitness) */
.foxco-dual-heading.neon-cyan .foxco-quote {
    color: #00f5ff !important;
    text-shadow: 0 0 8px #00f5ff, 0 0 20px #00f5ff, 0 0 40px rgba(0,245,255,.5) !important;
}

/* =============================================================================
   NEON PULSE — HEADING TEXT GLOW PRESETS
   Applied via .neon-text-{preset} on the wrapper
============================================================================= */

.foxco-dual-heading.neon-text-foxco .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #df6737, 0 0 21px #df6737, 0 0 42px rgba(223,103,55,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-purple .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #c084fc, 0 0 21px #a855f7, 0 0 42px rgba(168,85,247,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-green .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #00ff41, 0 0 21px #00ff41, 0 0 42px rgba(0,255,65,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-pink .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #ff0099, 0 0 21px #ff0099, 0 0 42px rgba(255,0,153,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-gold .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #ffd700, 0 0 21px #f59e0b, 0 0 42px rgba(255,215,0,.6) !important;
    animation: none !important;
}
.foxco-dual-heading.neon-text-white .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 4px rgba(255,255,255,.6), 0 0 12px rgba(255,255,255,.3) !important;
    animation: none !important;
}
/* cyan keeps default animation */
.foxco-dual-heading.neon-text-cyan .foxco-dual-heading__heading-1 {
    text-shadow: 0 0 7px #00f5ff, 0 0 21px #00f5ff, 0 0 42px rgba(0,245,255,.5) !important;
}

/* =============================================================================
   INLINE LAYOUT — separator span styling
============================================================================= */
.foxco-inline-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    opacity: 0.7;
    flex-shrink: 0;
    color: #e85d04;
}

/* =============================================================================
   DR GUBERMAN PRESET — blue/gold health & wellness
============================================================================= */
@keyframes foxco-dg-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.foxco-dual-heading.preset-dr-guberman {
    background: linear-gradient(135deg, #296eb5 0%, #1a5490 60%, #296eb5 100%);
    border: 2px solid #f9bf26;
    border-radius: 6px;
    padding: 22px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(240,192,64,.2);
}
/* Subtle top shimmer bar */
.foxco-dual-heading.preset-dr-guberman::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f9bf26, #fffbe8, #f9bf26, transparent);
    background-size: 200% 100%;
    animation: foxco-dg-shimmer 3s linear infinite;
}
/* Faint diagonal texture */
.foxco-dual-heading.preset-dr-guberman::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.015) 0px,
        rgba(255,255,255,.015) 1px,
        transparent 1px,
        transparent 12px
    );
    pointer-events: none;
}
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-1 {
    color: #ffffff;
    font-size: clamp(1.4rem, 3.2vw, 2.8rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    line-height: 1.1;
}
/* Gold shimmer on the heading text */
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-1 em,
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-1 strong {
    color: #f9bf26;
    font-style: normal;
}
.foxco-dual-heading.preset-dr-guberman .foxco-dual-heading__heading-2 {
    color: #f9bf26;
    font-size: clamp(.85rem, 1.6vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}