/* =========================================================================
   TA Dialogues — Design Tokens
   Every variable is namespaced with --tad- so nothing collides with the
   parent WordPress/Elementor theme. All page styles must scope everything
   inside .tad-page to keep the parent theme untouched outside these pages.

   How to edit globally:
   - Swap colors: change the hex values on .tad-page below
   - Swap fonts: change --tad-font-display / --tad-font-body and the
     Google Fonts <link> in header partials
   - Change spacing rhythm: adjust --tad-space-* values proportionally
   ========================================================================= */

.tad-page {
    /* ---- Typography ---------------------------------------------------- */
    /* Brand fonts: Montserrat (headings) + Open Sans (body) — real TTF files at
       assets/fonts/ loaded via @font-face below. Fira Code kept as mono. */
    --tad-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --tad-font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --tad-font-mono:    "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;

    /* Type scale (fluid, clamps between mobile and desktop sizes) */
    --tad-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12–13 */
    --tad-fs-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);   /* 14–15 */
    --tad-fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* 16–18 */
    --tad-fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);    /* 18–22 */
    --tad-fs-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);     /* 22–28 */
    --tad-fs-2xl:  clamp(1.75rem, 1.5rem + 1vw, 2.25rem);         /* 28–36 */
    --tad-fs-3xl:  clamp(2.25rem, 1.9rem + 1.7vw, 3rem);          /* 36–48 */
    --tad-fs-4xl:  clamp(2.75rem, 2.2rem + 2.6vw, 4rem);          /* 44–64 */
    --tad-fs-5xl:  clamp(3.25rem, 2.5rem + 3.5vw, 5rem);          /* 52–80 */

    --tad-lh-tight: 1.1;
    --tad-lh-snug:  1.25;
    --tad-lh-body:  1.6;

    --tad-tracking-tight:  -0.02em;
    --tad-tracking-normal: 0;
    --tad-tracking-wide:   0.08em;
    --tad-tracking-wider:  0.16em;

    /* ---- Spacing rhythm ------------------------------------------------ */
    --tad-space-1:  4px;
    --tad-space-2:  8px;
    --tad-space-3:  12px;
    --tad-space-4:  16px;
    --tad-space-5:  24px;
    --tad-space-6:  32px;
    --tad-space-7:  48px;
    --tad-space-8:  64px;
    --tad-space-9:  96px;
    --tad-space-10: 128px;

    /* ---- Radii, borders, shadows -------------------------------------- */
    --tad-radius-sm: 6px;
    --tad-radius-md: 12px;
    --tad-radius-lg: 20px;
    --tad-radius-pill: 999px;

    --tad-border-thin: 1px solid var(--tad-border);
    --tad-shadow-soft: 0 10px 40px -12px rgba(11, 27, 59, 0.15);
    --tad-shadow-lift: 0 20px 60px -20px rgba(11, 27, 59, 0.25);

    /* ---- Motion -------------------------------------------------------- */
    --tad-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
    --tad-dur-fast:  180ms;
    --tad-dur-mid:   320ms;
    --tad-dur-slow:  560ms;

    /* ---- Container widths --------------------------------------------- */
    --tad-container:      min(1240px, 100% - 2 * var(--tad-space-5));
    --tad-container-narrow: min(880px, 100% - 2 * var(--tad-space-5));
}

/* =========================================================================
   TALR theme — light editorial, invite-only premium
   Applied via .tad-page.tad-page--talr on the outer page wrapper.
   ========================================================================= */
.tad-page--talr {
    /* Surface colors */
    --tad-bg:            #FFFFFF;
    --tad-bg-alt:        #F7F5F0;   /* warm off-white for alt sections */
    --tad-bg-inverse:    #063084;   /* brand navy for footer / dark bands */
    --tad-panel:         #FFFFFF;
    --tad-panel-alt:     #FBFAF6;

    /* Ink */
    --tad-ink:           #0B1B3B;   /* headlines / body (deep navy-black) */
    --tad-ink-muted:     #4A5A7A;
    --tad-ink-inverse:   #FFFFFF;   /* text on dark bands */
    --tad-ink-inverse-muted: #B3BDD1;

    /* Brand — TA Dialogues palette: navy / orange / gold */
    --tad-brand:         #063084;   /* TA Dialogues navy (primary) */
    --tad-brand-hover:   #04225C;
    --tad-accent:        #F27F0C;   /* TA Dialogues orange (CTA) */
    --tad-accent-hover:  #D86F00;
    --tad-gold:          #F7AD19;   /* gold — secondary accent */

    /* Structural */
    --tad-border:        #E5E1D8;
    --tad-divider:       #EFECE4;

    /* Chips / stats */
    --tad-chip-bg:       #F0EBE0;
    --tad-chip-ink:      #0B1B3B;
}

/* =========================================================================
   TA Tech theme — dark AI/tech editorial (matches event stage design)
   Applied via .tad-page.tad-page--tatech on the outer page wrapper.
   ========================================================================= */
.tad-page--tatech {
    --tad-bg:            #FFFFFF;
    --tad-bg-alt:        #F1EFE8;
    --tad-bg-inverse:    #444441;
    --tad-panel:         #FFFFFF;
    --tad-panel-alt:     #F1EFE8;
    --tad-panel-border:  rgba(122, 29, 156, 0.18);
    --tad-ink:           #1A1A1A;
    --tad-ink-muted:     #5A5A58;
    --tad-ink-inverse:   #FFFFFF;
    --tad-ink-inverse-muted: #C7CAD1;
    --tad-brand:         #7A1D9C;
    --tad-brand-hover:   #5D157A;
    --tad-brand-glow:    0 6px 24px rgba(122, 29, 156, 0.22);
    --tad-brand-2:       #0F6E56;
    --tad-accent:        #F27F0C;
    --tad-accent-hover:  #D86F00;
    --tad-accent-2:      #D85A30;
    --tad-neutral:       #444441;
    --tad-cream:         #F1EFE8;
    --tad-hex-tint:      rgba(122, 29, 156, 0.14);
    --tad-border:        #E5E1D8;
    --tad-divider:       #EFECE4;
    --tad-chip-bg:       #F1EFE8;
    --tad-chip-ink:      #1A1A1A;
}

/* =========================================================================
   Base primitives shared by both themes
   ========================================================================= */
.tad-page {
    font-family: var(--tad-font-body);
    font-size: var(--tad-fs-base);
    line-height: var(--tad-lh-body);
    color: var(--tad-ink);
    background: var(--tad-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.tad-page * { box-sizing: border-box; }

.tad-container       { width: var(--tad-container);        margin-inline: auto; }
.tad-container-narrow{ width: var(--tad-container-narrow); margin-inline: auto; }

.tad-section         { padding-block: clamp(48px, 6vw, 96px); position: relative; }
.tad-section--tight  { padding-block: clamp(32px, 4vw, 64px); }

.tad-eyebrow {
    display: inline-block;
    font-family: var(--tad-font-mono);
    font-size: var(--tad-fs-xs);
    letter-spacing: var(--tad-tracking-wider);
    text-transform: uppercase;
    color: var(--tad-brand);
    margin-bottom: var(--tad-space-4);
}

.tad-h1, .tad-h2, .tad-h3 {
    font-family: var(--tad-font-display);
    font-weight: 600;
    line-height: var(--tad-lh-tight);
    letter-spacing: var(--tad-tracking-tight);
    margin: 0 0 var(--tad-space-5);
    color: var(--tad-ink);
}
.tad-h1 { font-size: var(--tad-fs-5xl); font-weight: 700; }
.tad-h2 { font-size: var(--tad-fs-3xl); }
.tad-h3 { font-size: var(--tad-fs-xl); }

.tad-lead {
    font-size: var(--tad-fs-lg);
    color: var(--tad-ink-muted);
    max-width: 62ch;
}

/* Buttons */
.tad-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tad-space-2);
    padding: 14px 26px;
    font-family: var(--tad-font-body);
    font-size: var(--tad-fs-sm);
    font-weight: 600;
    letter-spacing: var(--tad-tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--tad-radius-pill);
    cursor: pointer;
    transition: transform var(--tad-dur-fast) var(--tad-ease),
                background var(--tad-dur-fast) var(--tad-ease),
                border-color var(--tad-dur-fast) var(--tad-ease),
                box-shadow var(--tad-dur-fast) var(--tad-ease);
}
.tad-btn:hover { transform: translateY(-2px); }

.tad-btn--primary {
    background: var(--tad-brand);
    color: #fff;
}
.tad-btn--primary:hover { background: var(--tad-brand-hover); }

.tad-btn--accent {
    background: var(--tad-accent);
    color: #fff;
}
.tad-btn--accent:hover { background: var(--tad-accent-hover); }

.tad-btn--ghost {
    background: transparent;
    color: var(--tad-ink);
    border-color: var(--tad-border);
}
.tad-page--tatech .tad-btn--ghost { color: var(--tad-ink); border-color: var(--tad-panel-border); }
.tad-page--tatech .tad-btn--primary { box-shadow: var(--tad-brand-glow); color: #04121F; }
.tad-page--tatech .tad-btn--primary:hover { box-shadow: 0 0 32px rgba(0, 231, 255, 0.75); }

/* Chips (event date, location, time) */
.tad-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tad-space-2);
    padding: 6px 14px;
    font-family: var(--tad-font-mono);
    font-size: var(--tad-fs-xs);
    letter-spacing: var(--tad-tracking-wide);
    text-transform: uppercase;
    background: var(--tad-chip-bg);
    color: var(--tad-chip-ink);
    border-radius: var(--tad-radius-pill);
}

/* Header tagline (DIALOGUE · INSIGHT · IMPACT) shown under wordmark */
.tad-header__logo { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.tad-header__tagline {
    font-family: var(--tad-font-mono);
    font-size: 9px;
    letter-spacing: var(--tad-tracking-wider);
    text-transform: uppercase;
    color: var(--tad-ink-muted);
    margin-top: 2px;
}
.tad-page--tatech .tad-header__tagline { color: var(--tad-brand); opacity: 0.7; }

/* Utility: screen-reader-only for a11y form labels */
.tad-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;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tad-page * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Image lightbox (shared by both pages) ============================= */
.tad-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 1.25rem);
    padding: clamp(12px, 4vw, 48px);
    background: rgba(6, 12, 26, 0.93);
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.tad-lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
.tad-lightbox__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: 100%; }
.tad-lightbox__img {
    max-width: min(1100px, 88vw); max-height: 82vh; width: auto; height: auto;
    object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.tad-lightbox__count { color: rgba(255,255,255,.72); font-size: 13px; letter-spacing: .06em; font-family: var(--tad-font-mono, monospace); }
.tad-lightbox__close {
    position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
    font-size: 26px; line-height: 1; cursor: pointer;
}
.tad-lightbox__nav {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
    font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s ease;
}
.tad-lightbox__nav:hover, .tad-lightbox__close:hover { background: rgba(255,255,255,.22); }
@media (max-width: 640px) { .tad-lightbox__nav { width: 40px; height: 40px; font-size: 22px; } }

/* ===== Co-brand / partner logo (header) + agency credit (footer) ======== */
/* The "BIG DUMMY" logo is a placeholder — swap for a real presenting-partner logo. */
.tad-page .tad-header__cobrand {
    display: inline-flex; align-items: center; gap: 12px;
    padding-left: 18px; margin-left: 4px;
    border-left: 1px solid rgba(150,163,199,0.28);
}
.tad-page .tad-header__cobrand-label {
    font-family: var(--tad-font-mono); font-size: 9px; line-height: 1.3;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--tad-ink-muted); max-width: 66px;
}
.tad-page .tad-header__cobrand img {
    height: 40px; width: auto; display: block;
    background: #fff; border-radius: 8px; padding: 6px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
@media (max-width: 1040px) { .tad-page .tad-header__cobrand { display: none; } }

.tad-page .tad-footer__partner { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tad-page .tad-footer__partner-label {
    font-family: var(--tad-font-mono); font-size: 10px; line-height: 1.3;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--tad-ink-muted); max-width: 80px;
}
.tad-page .tad-footer__partner-logo {
    height: 36px; width: auto; display: block;
    background: #fff; border-radius: 8px; padding: 7px 12px;
}
.tad-page .tad-footer__credit {
    display: inline-block; margin-top: 14px;
    font-size: 12px; color: var(--tad-ink-muted); text-decoration: none;
    letter-spacing: 0.02em;
}
.tad-page .tad-footer__credit strong { color: var(--tad-ink); font-weight: 600; }
.tad-page .tad-footer__credit:hover { color: var(--tad-brand); }
.tad-page .tad-footer__credit:hover strong { color: var(--tad-brand); }


@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype-variations"),
         url("../fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
         url("../fonts/Montserrat-Regular.ttf") format("truetype");
    font-weight: 100 900; font-style: normal; font-display: swap;
}