/*
Theme Name:        Porto Child - Latimer
Theme URI:         https://latimersummit.com
Description:       Custom child theme for the Latimer Futures Summit 2026 site. Extends Porto with the Summit brand system: electric-yellow accents, dark navy backgrounds, Barlow Condensed display + Inter body.
Author:            PopTech Studio
Author URI:        https://poptechstudio.ai
Template:          porto
Version:           1.0.0
Requires at least: 6.5
Tested up to:      6.9
Requires PHP:      8.0
Text Domain:       porto-child-latimer
*/

/* =========================================================================
   1. BRAND TOKENS
   Extracted from the master Keynote deck. See references/design-system.md.
   ========================================================================= */

:root {
    /* Colors */
    --latimer-yellow:      #EAFF00;
    --latimer-yellow-dim:  #C5D900;
    --latimer-bg:          #000000;
    --latimer-bg-deep:     #050C1C;
    --latimer-bg-card:     rgba(255, 255, 255, 0.04);
    --latimer-text:        #FFFFFF;
    --latimer-muted:       #888888;
    --latimer-muted-light: #A5A5A5;
    --latimer-border:      rgba(255, 255, 255, 0.08);  /* canonical edge-line token (header rule, footer borders, contact links, etc) */

    /* Typography families */
    --latimer-font-display: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --latimer-font-body:    'Inter', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Type scale (clamp for fluid sizes; mobile -> desktop) */
    --latimer-fs-eyebrow:    0.75rem;                          /* 12px */
    --latimer-fs-body-sm:    0.875rem;                         /* 14px */
    --latimer-fs-body:       1rem;                             /* 16px */
    --latimer-fs-body-lg:    1.125rem;                         /* 18px */
    --latimer-fs-h4:         clamp(1.25rem, 1.5vw, 1.5rem);    /* 20-24 */
    --latimer-fs-h3:         clamp(1.5rem, 2vw, 2rem);         /* 24-32 */
    --latimer-fs-h2:         clamp(2rem, 3vw, 2.75rem);        /* 32-44 */
    --latimer-fs-h1:         clamp(2.5rem, 5vw, 4rem);         /* 40-64 */
    --latimer-fs-display:    clamp(3.5rem, 8vw, 6.5rem);       /* 56-104 — hero */

    /* Type weights */
    --latimer-fw-regular: 400;
    --latimer-fw-medium:  500;
    --latimer-fw-semi:    600;
    --latimer-fw-bold:    700;
    --latimer-fw-display: 700;

    /* Letter spacing */
    --latimer-ls-eyebrow: 0.18em;
    --latimer-ls-display: -0.01em;
    --latimer-ls-tight:   -0.02em;

    /* Line heights */
    --latimer-lh-display: 0.95;
    --latimer-lh-heading: 1.1;
    --latimer-lh-body:    1.55;

    /* Spacing scale (8-pt base) */
    --latimer-sp-1:  0.25rem;   /* 4   */
    --latimer-sp-2:  0.5rem;    /* 8   */
    --latimer-sp-3:  0.75rem;   /* 12  */
    --latimer-sp-4:  1rem;      /* 16  */
    --latimer-sp-5:  1.5rem;    /* 24  */
    --latimer-sp-6:  2rem;      /* 32  */
    --latimer-sp-7:  3rem;      /* 48  */
    --latimer-sp-8:  4rem;      /* 64  */
    --latimer-sp-9:  6rem;      /* 96  */
    --latimer-sp-10: 8rem;      /* 128 */

    /* Layout containers */
    --latimer-container:    1280px;
    --latimer-container-sm: 880px;
    --latimer-gutter:       max(1rem, 5vw);

    /* Radii + transitions */
    --latimer-radius-sm: 4px;
    --latimer-radius:    8px;
    --latimer-radius-lg: 16px;
    --latimer-radius-pill: 999px;
    --latimer-transition: 220ms cubic-bezier(0.2, 0, 0.2, 1);

    /* Texture asset paths (to be replaced by L01.3 with theme_url() refs in functions.php) */
    --latimer-texture-marble:  url('assets/images/texture-marble.png');
    --latimer-texture-galaxy:  url('assets/images/texture-galaxy.png');
}

/* =========================================================================
   2. RESET / BASE
   Light reset on top of Porto's defaults. Keep Porto's normalize intact.
   ========================================================================= */

body.latimer-summit {
    background: var(--latimer-bg);
    color: var(--latimer-text);
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body);
    font-weight: var(--latimer-fw-regular);
    line-height: var(--latimer-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.latimer-summit a {
    color: var(--latimer-yellow);
    text-decoration: none;
    transition: color var(--latimer-transition);
}

body.latimer-summit a:hover,
body.latimer-summit a:focus {
    color: var(--latimer-yellow-dim);
}

body.latimer-summit ::selection {
    background: var(--latimer-yellow);
    color: var(--latimer-bg);
}

/* =========================================================================
   3. TYPOGRAPHY
   Display via Barlow Condensed; body via Inter. Eyebrow + accent treatments.
   ========================================================================= */

.latimer-display,
.latimer-summit h1,
.latimer-summit h2,
.latimer-summit h3 {
    font-family: var(--latimer-font-display);
    font-weight: var(--latimer-fw-display);
    line-height: var(--latimer-lh-heading);
    letter-spacing: var(--latimer-ls-tight);
    color: var(--latimer-text);
    margin: 0 0 var(--latimer-sp-4);
}

.latimer-display {
    font-size: var(--latimer-fs-display);
    line-height: var(--latimer-lh-display);
    letter-spacing: var(--latimer-ls-display);
    text-wrap: balance;
}

.latimer-summit h1 { font-size: var(--latimer-fs-h1); }
.latimer-summit h2 { font-size: var(--latimer-fs-h2); }
.latimer-summit h3 { font-size: var(--latimer-fs-h3); }
.latimer-summit h4 { font-size: var(--latimer-fs-h4); }

.latimer-eyebrow {
    display: inline-block;
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-eyebrow);
    font-weight: var(--latimer-fw-semi);
    letter-spacing: var(--latimer-ls-eyebrow);
    text-transform: uppercase;
    color: var(--latimer-yellow);
    margin-bottom: var(--latimer-sp-3);
}

.latimer-time {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-h4);
    font-weight: var(--latimer-fw-display);
    color: var(--latimer-yellow);
    letter-spacing: var(--latimer-ls-tight);
}

.latimer-accent { color: var(--latimer-yellow); }
.latimer-muted  { color: var(--latimer-muted); }

.latimer-summit p {
    margin: 0 0 var(--latimer-sp-4);
    color: var(--latimer-text);
    max-width: 65ch;
}

/* =========================================================================
   4. LAYOUT — containers, sections, dark wrappers
   ========================================================================= */

.latimer-container {
    width: 100%;
    max-width: var(--latimer-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--latimer-gutter);
    padding-right: var(--latimer-gutter);
}

.latimer-container--narrow { max-width: var(--latimer-container-sm); }

.latimer-section {
    padding-top: var(--latimer-sp-9);
    padding-bottom: var(--latimer-sp-9);
    background: var(--latimer-bg);
    color: var(--latimer-text);
    position: relative;
    overflow: hidden;
}

.latimer-section--deep { background: var(--latimer-bg-deep); }

.latimer-section--marble {
    background-color: var(--latimer-bg);
    background-image: var(--latimer-texture-marble);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.latimer-section--marble::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 0;
}

.latimer-section--marble > * {
    position: relative;
    z-index: 1;
}

/* =========================================================================
   5. HERO — landing-page hero block from slide 1
   ========================================================================= */

.latimer-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: var(--latimer-sp-10);
    padding-bottom: var(--latimer-sp-10);
}

.latimer-hero__inner {
    width: 100%;
}

.latimer-hero__title {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-display);
    line-height: var(--latimer-lh-display);
    letter-spacing: var(--latimer-ls-display);
    color: var(--latimer-yellow);
    margin: 0 0 var(--latimer-sp-3);
}

.latimer-hero__date {
    font-family: var(--latimer-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--latimer-yellow);
    margin: 0 0 var(--latimer-sp-6);
    line-height: 1;
}

.latimer-hero__meta {
    font-size: var(--latimer-fs-body-lg);
    color: var(--latimer-text);
    margin-bottom: var(--latimer-sp-6);
}

.latimer-hero__sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--latimer-sp-6);
    margin-top: var(--latimer-sp-7);
    opacity: 0.85;
}

.latimer-hero__sponsors img {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); /* render any colored logo as white */
}

/* =========================================================================
   6. BUTTONS
   ========================================================================= */

.latimer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--latimer-sp-2);
    padding: var(--latimer-sp-3) var(--latimer-sp-5);
    min-height: 44px; /* WCAG 2.5.5 tap target — L01.8 WU9 */
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body);
    font-weight: var(--latimer-fw-semi);
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid var(--latimer-yellow);
    border-radius: var(--latimer-radius-pill);
    transition: background var(--latimer-transition), color var(--latimer-transition), transform var(--latimer-transition);
    cursor: pointer;
    white-space: nowrap;
}

.latimer-btn--primary {
    background: var(--latimer-yellow);
    color: var(--latimer-bg);
}

.latimer-btn--primary:hover,
.latimer-btn--primary:focus {
    background: var(--latimer-yellow-dim);
    color: var(--latimer-bg);
    transform: translateY(-2px);
}

.latimer-btn--ghost {
    background: transparent;
    color: var(--latimer-yellow);
}

.latimer-btn--ghost:hover,
.latimer-btn--ghost:focus {
    background: var(--latimer-yellow);
    color: var(--latimer-bg);
    transform: translateY(-2px);
}

/* =========================================================================
   7. SPEAKER CARD — circular crop + name + role text
   Pattern from slides 4, 5, 6, 8, 9, 10, 11, 12, 16, 17, 18.
   ========================================================================= */

.latimer-speaker {
    display: flex;
    align-items: center;
    gap: var(--latimer-sp-5);
    padding: var(--latimer-sp-4);
}

.latimer-speaker__photo {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--latimer-radius-pill);
    overflow: hidden;
    background: var(--latimer-bg-card);
}

.latimer-speaker__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.latimer-speaker__photo--tbc { opacity: 0.7; }

.latimer-speaker__silhouette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--latimer-bg-deep), var(--latimer-bg));
    color: var(--latimer-yellow);
    font-family: var(--latimer-font-display);
    font-size: 2.5rem;
    font-weight: var(--latimer-fw-display);
    letter-spacing: var(--latimer-ls-tight);
    line-height: 1;
    border: 1px solid var(--latimer-border);
}

.latimer-speaker__body {
    flex: 1;
    min-width: 0;
}

.latimer-speaker__name {
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body-lg);
    font-weight: var(--latimer-fw-semi);
    color: var(--latimer-yellow);
    margin: 0 0 var(--latimer-sp-2);
    line-height: 1.2;
}

.latimer-speaker__roles {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--latimer-text);
    font-size: var(--latimer-fs-body-sm);
    line-height: var(--latimer-lh-body);
}

.latimer-speaker__roles li {
    margin: 0 0 var(--latimer-sp-1);
    padding-left: var(--latimer-sp-3);
    position: relative;
}

.latimer-speaker__roles li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--latimer-yellow);
}

.latimer-speaker__tbc {
    display: inline-block;
    font-size: var(--latimer-fs-eyebrow);
    font-weight: var(--latimer-fw-semi);
    letter-spacing: var(--latimer-ls-eyebrow);
    color: var(--latimer-muted);
    margin-left: var(--latimer-sp-2);
    text-transform: uppercase;
}

/* Speaker grid for /speakers/ */
.latimer-speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* L01.13 WU11 — row-gap bumped sp-5 -> sp-6 (24 -> 32px) so Day 2 VC's
       4-speaker panel and other dense grids don't visually overlap rows.
       Column-gap unchanged at sp-5. */
    gap: var(--latimer-sp-6) var(--latimer-sp-5);
}

/* L01.13 post-sign-off hotfix v2 (Jon 2026-05-25 — Future of Money mockup):
   vertical speaker cards on single-session pages. Photo stacks on top
   (220px circle), name + roles below in a left-aligned column. Grid
   auto-flows as many fixed-240px columns as fit; container capped at
   1100px so 4 speakers fit in a single centered row (4 × 240 + 3 × 32
   gap = 1056), 3 speakers fit comfortably (3 × 240 + 2 × 32 = 784), 2
   speakers row at 512px, and 5+ speakers wrap with justify-content:
   center. Supersedes the prior 2-up max-width 720px rule. */
/* L01.13 hotfix v4 (Jon 2026-05-25): single-session speaker cards have
   their OWN class namespace `.session-speakers*` so no inherited
   .latimer-speaker rule can re-flow them. Inline markup lives in
   single-session.php; this block is the only CSS that styles it. */

/* 2026-05-25: The prior v5 archive-footer override block (forcing
   `body.post-type-archive #footer` to width:100% text-align:left) and
   the v6 `body.elementor-template-full-width #main.boxed` override
   block were both removed. Per Rob: there is one footer rendering and
   it is the homepage's. /agenda/, /speakers/, /sponsors/ now use the
   same `#main.column1.boxed` wrapper as /, /register/, /contact/ so
   `.latimer-footer__container` resolves identically everywhere. The
   `porto_meta_layout` filter that previously forced these archives to
   `widewidth` was also removed from functions.php. */

.session-speakers {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 32px 24px !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.session-speakers__card {
    flex: 0 0 240px !important;
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.session-speakers__photo {
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    margin: 0 auto 16px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: var(--latimer-bg-card) !important;
    text-decoration: none !important;
}

.session-speakers__photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.session-speakers__photo--tbc { opacity: 0.7 !important; }

.session-speakers__silhouette {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: var(--latimer-yellow) !important;
    font-family: var(--latimer-font-display) !important;
    font-size: 60px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--latimer-bg-deep), var(--latimer-bg)) !important;
}

.session-speakers__name {
    font-family: var(--latimer-font-body) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--latimer-yellow) !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}

.session-speakers__name a {
    color: inherit !important;
    text-decoration: none !important;
}

.session-speakers__tbc {
    color: var(--latimer-yellow) !important;
    font-weight: 400 !important;
}

.session-speakers__roles {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--latimer-text) !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

.session-speakers__roles li {
    margin: 0 0 4px !important;
    padding-left: 14px !important;
    position: relative !important;
    list-style: none !important;
}

.session-speakers__roles li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--latimer-yellow) !important;
}

@media (max-width: 480px) {
    .session-speakers__card { flex: 0 0 100% !important; max-width: 280px !important; }
}

/* =========================================================================
   8. SESSION ROW — agenda block pattern
   Time stamp left (yellow), title + speakers right.
   ========================================================================= */

.latimer-session {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--latimer-sp-6);
    padding: var(--latimer-sp-6) 0;
    border-bottom: 1px solid var(--latimer-border);
    align-items: start;
}

.latimer-session__time {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-h4);
    color: var(--latimer-yellow);
    line-height: 1;
}

.latimer-session__title {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-h3);
    font-weight: var(--latimer-fw-display);
    color: var(--latimer-text);
    margin: 0 0 var(--latimer-sp-3);
    line-height: 1.15;
}

.latimer-session__speakers {
    color: var(--latimer-muted-light);
    font-size: var(--latimer-fs-body);
}

@media (max-width: 768px) {
    .latimer-session {
        grid-template-columns: 1fr;
        gap: var(--latimer-sp-3);
    }
}

/* =========================================================================
   9. SPONSOR STRIP
   Used in hero, footer, and /sponsors/ index.
   ========================================================================= */

.latimer-sponsor-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--latimer-sp-6);
    padding: var(--latimer-sp-6) 0;
}

.latimer-sponsor-strip__item {
    /* L01.13 hotfix v3 (Rob 2026-05-28): tightened slot from 160 -> 150 and
       row gap from 48 -> 32 so all 6 partner logos fit on a single row at
       Elementor's ~1140px container width (6*150 + 5*32 = 1060). Below the
       desktop breakpoint the strip still wraps via flex-wrap: wrap. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    width: 150px !important;
    flex: 0 0 150px !important;
    padding: 0 !important;
}

.latimer-sponsor-strip__item img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    /* Force monochrome white (Jon 2026-05-25 directive: "make them all
       white"). brightness(0) collapses every channel to black; invert(1)
       flips that black to white. Result: any sponsor PNG renders as a
       white-only silhouette regardless of native palette, normalizing
       Merrill's red M, Breakthrough's cyan atom, etc. into a single
       cohesive monochrome row. */
    filter: brightness(0) invert(1) !important;
    opacity: 0.95 !important;
    transition: opacity var(--latimer-transition);
}

.latimer-sponsor-strip__item img:hover {
    opacity: 1 !important;
}

.latimer-sponsor-strip__item img:hover { opacity: 1; }

/* L01.13 hotfix v4 (Rob 2026-05-28): widen the Elementor section that holds
   the partner strip so all 6 logos sit on one row at desktop. Section
   7fd81fa ("In Partnership With" on homepage post 173) had its content
   container capped at 1200px by post-173.css, which is the per-section
   width Elementor wrote into its compiled stylesheet. Override targets
   that exact selector (3 classes + 1 tag) and adds !important so neither
   Elementor regenerating its CSS nor Porto's defaults can win the cascade.
   Pushing to 1600px gives plenty of breathing room for the 6-logo strip. */
@media (min-width: 992px) {
    .elementor-173 .elementor-element.elementor-element-7fd81fa > div.elementor-container {
        max-width: 1400px !important;
    }
    .elementor-173 .elementor-element-7fd81fa .latimer-sponsor-strip {
        flex-wrap: nowrap !important;
    }
    .elementor-173 .elementor-element-7fd81fa .latimer-sponsor-strip__item {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
}

/* =========================================================================
   10. AGENDA DAY BLOCK
   Wraps a Day-1 or Day-2 collection of session rows.
   ========================================================================= */

.latimer-agenda-day {
    margin-bottom: var(--latimer-sp-9);
}

.latimer-agenda-day__header {
    display: flex;
    align-items: baseline;
    gap: var(--latimer-sp-4);
    margin-bottom: var(--latimer-sp-6);
    padding-bottom: var(--latimer-sp-4);
    border-bottom: 2px solid var(--latimer-yellow);
}

.latimer-agenda-day__label {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-h2);
    color: var(--latimer-yellow);
    margin: 0;
}

.latimer-agenda-day__date {
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body-lg);
    color: var(--latimer-muted-light);
}

/* =========================================================================
   11. UTILITIES
   ========================================================================= */

.latimer-stack > * + * { margin-top: var(--latimer-sp-5); }
.latimer-stack--lg > * + * { margin-top: var(--latimer-sp-7); }
.latimer-stack--sm > * + * { margin-top: var(--latimer-sp-3); }

.latimer-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--latimer-sp-3);
    align-items: center;
}

.latimer-text-center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   12. ELEMENTOR + PORTO INTEGRATION HOOKS
   Reset Porto's body backgrounds on Latimer-themed pages so child styles win.
   Elementor sections inherit brand tokens via the body.latimer-summit cascade.
   ========================================================================= */

body.latimer-summit #wrapper { background: var(--latimer-bg); }

body.latimer-summit .elementor-section.elementor-section-stretched > .elementor-container {
    max-width: var(--latimer-container);
}

/* Porto header + footer dark-mode treatment */
body.latimer-summit #header,
body.latimer-summit #footer {
    background: var(--latimer-bg);
    color: var(--latimer-text);
    border-color: var(--latimer-border);
}

/* =========================================================================
   13. PORTO OUTER-CHROME OVERRIDE
   Porto's default theme renders a white top bar + light-grey body gutter.
   Hammer those to brand black so the dark hero composition reads edge-to-edge.
   Uses !important strategically because Porto inlines its own colors heavily.
   ========================================================================= */

html,
body.latimer-summit,
body.latimer-summit #wrapper,
body.latimer-summit .page-wrapper,
body.latimer-summit .main-content-wrap,
body.latimer-summit #main,
body.latimer-summit #content,
body.latimer-summit .site,
body.latimer-summit .body {
    background-color: var(--latimer-bg) !important;
    color: var(--latimer-text);
}

/* Porto top bar (thin strip at very top) */
body.latimer-summit .top-bar,
body.latimer-summit .top-bar-block,
body.latimer-summit .header-top,
body.latimer-summit .header-top-bar {
    background-color: var(--latimer-bg) !important;
    color: var(--latimer-text) !important;
    border-color: var(--latimer-border) !important;
}

body.latimer-summit .top-bar a,
body.latimer-summit .header-top a {
    color: var(--latimer-text);
}

/* Porto main header strip */
body.latimer-summit #header,
body.latimer-summit .header-wrapper,
body.latimer-summit .header-main,
body.latimer-summit .header-body,
body.latimer-summit .header-wrap,
body.latimer-summit .header-container,
body.latimer-summit .header-corporate,
body.latimer-summit [class*="header-"],
body.latimer-summit #header .header-row,
body.latimer-summit #header .header-row-content,
body.latimer-summit .header-row-1 {
    background-color: var(--latimer-bg) !important;
    color: var(--latimer-text);
    border-color: var(--latimer-border) !important;
}

/* Porto main nav menu links */
body.latimer-summit .main-menu > li > a,
body.latimer-summit #header .menu > li > a {
    color: var(--latimer-text);
}

body.latimer-summit .main-menu > li > a:hover,
body.latimer-summit .main-menu > li.current-menu-item > a,
body.latimer-summit #header .menu > li > a:hover {
    color: var(--latimer-yellow);
}

/* Porto default logo: hide if the porto-bundled placeholder ever re-appears.
   The LFS logo is wired in via porto_settings -> logo / retina-logo (see
   hotfix-4-deploy/branding/). Once set there, Porto emits the LFS URL and
   this rule no-ops (the src no longer matches porto/images/logo). */
body.latimer-summit #header .header-logo .standard-logo[src*="porto/images/logo"],
body.latimer-summit #header .header-logo .retina-logo[src*="porto/images/logo"],
body.latimer-summit #footer .footer-logo img[src*="porto/images/logo"] {
    opacity: 0;
}

/* LFS wordmark size — Rob 2026-05-25, third bump in this thread. Prior
   rule blocks targeted `.header-logo` which does NOT exist in Porto's
   live DOM (the actual ancestor is `.logo`). That's why earlier 120px
   and 160px bumps produced no visible change. Selectors corrected to
   target `.logo img` and the `.standard-logo` / `.retina-logo` image
   classes directly. Aspect ratio 1.78:1, so at 240px height the logo
   renders ~427px wide. */
body.latimer-summit #header .logo img,
body.latimer-summit #header img.standard-logo,
body.latimer-summit #header img.retina-logo {
    height: 240px !important;
    max-height: 240px !important;
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 991px) {
    body.latimer-summit #header .logo img,
    body.latimer-summit #header img.standard-logo,
    body.latimer-summit #header img.retina-logo {
        height: 160px !important;
        max-height: 160px !important;
    }
}

/* Porto footer */
body.latimer-summit #footer,
body.latimer-summit .footer,
body.latimer-summit .footer-main,
body.latimer-summit .footer-top,
body.latimer-summit .footer-bottom,
body.latimer-summit .footer-wrap {
    background-color: var(--latimer-bg) !important;
    color: var(--latimer-muted-light);
    border-color: var(--latimer-border) !important;
}

body.latimer-summit #footer a {
    color: var(--latimer-yellow);
}

/* Porto search + cart icons in header — yellow accent */
body.latimer-summit #header .search-toggle,
body.latimer-summit #header .cart-link,
body.latimer-summit #header .header-icon-link {
    color: var(--latimer-yellow);
}

/* Yellow primary buttons MUST have black text — Porto's .btn / theme cascade
   sets color:white or yellow-on-yellow, defeating section-6 rule. Hammer it. */
body.latimer-summit .latimer-btn--primary,
body.latimer-summit .latimer-btn--primary:link,
body.latimer-summit .latimer-btn--primary:visited,
body.latimer-summit a.latimer-btn--primary {
    background-color: var(--latimer-yellow) !important;
    color: #000000 !important;
    border-color: var(--latimer-yellow) !important;
}

body.latimer-summit .latimer-btn--primary:hover,
body.latimer-summit .latimer-btn--primary:focus,
body.latimer-summit a.latimer-btn--primary:hover,
body.latimer-summit a.latimer-btn--primary:focus {
    background-color: var(--latimer-yellow-dim) !important;
    color: #000000 !important;
    border-color: var(--latimer-yellow-dim) !important;
}

/* Ghost (outline) buttons: yellow border + yellow text on dark, invert on hover */
body.latimer-summit .latimer-btn--ghost,
body.latimer-summit a.latimer-btn--ghost {
    background-color: transparent !important;
    color: var(--latimer-yellow) !important;
    border-color: var(--latimer-yellow) !important;
}

body.latimer-summit .latimer-btn--ghost:hover,
body.latimer-summit a.latimer-btn--ghost:hover {
    background-color: var(--latimer-yellow) !important;
    color: #000000 !important;
}

/* Porto's container width sometimes constrains hero — let our sections breathe */
body.latimer-summit .latimer-hero,
body.latimer-summit .latimer-section {
    max-width: none;
    width: 100%;
}

/* =========================================================================
   14. GALAXY-ATMOSPHERE BACKGROUND VARIANTS
   Architectural pivot (CTO 2026-05-11): the rendered slide PNGs from L01.2
   are flattened deck compositions with text + branding BAKED IN. Layering
   HTML titles on top produced doubled-text. We replaced them with a single
   clean atmospheric layer (hero-galaxy.jpg, raw .key Data/image-1-1-8.png,
   3840x2160 dark abstract marble/galaxy — no text, no people, no logos)
   used at three intensities tuned per-section in lat_bg_style().
   ========================================================================= */

/* Hero / full-bleed galaxy (overlay 0.55 -> 0.85) — texture visible behind type */
.latimer-section--galaxy {
    background-color: var(--latimer-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Campus-photo hero variant (L01.8 WU3) — Penn campus shot with heavier
   overlay; bg-position tuned inline per-section to favor the building's
   upper third (spires + arches over the entrance). */
.latimer-section--campus {
    background-color: var(--latimer-bg);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

/* Tight section variant (L01.8 WU4) — reduced vertical padding so the
   YouTube teaser visually attaches to the manifesto above it rather than
   reading as a separate beat. */
.latimer-section--tight {
    padding-top: var(--latimer-sp-4);
    padding-bottom: var(--latimer-sp-7);
}

/* Year One YouTube teaser frame (L01.8 WU4). Width matches the manifesto's
   --narrow container; lite-youtube ships its own 16:9 aspect treatment but
   we force it explicitly to be safe. Rounded corners + subtle yellow edge
   on hover so the thumbnail reads as actionable. */
.latimer-video-frame {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    transition: box-shadow var(--latimer-transition);
}

.latimer-video-frame lite-youtube,
.latimer-video-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    background-color: var(--latimer-bg-deep);
}

.latimer-video-frame:hover {
    box-shadow: 0 16px 48px rgba(234, 255, 0, 0.18);
}

.latimer-video-caption {
    text-align: center;
    color: var(--latimer-muted-light);
    margin-top: var(--latimer-sp-4);
    margin-bottom: 0;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* ============================================================================
   Year One collage grid (L01.10 WU2) — 6-photo composition replicating slide 2
   of the deck. 3 columns desktop, 2 columns mobile. Photos cover 16:9 cells
   with object-fit so the varied source aspects (1.65:1 -- 1.96:1) crop into
   a consistent grid without distortion. Source photos are 280-490px wide so
   they render at native resolution at the 3-col 1280-container size (~400px
   per cell after gaps).
   ============================================================================ */

body.latimer-summit .latimer-year-one .latimer-eyebrow,
body.latimer-summit .latimer-year-one .latimer-display {
    margin-bottom: var(--latimer-sp-5);
}

body.latimer-summit .latimer-year-one-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--latimer-sp-4);
    margin-top: var(--latimer-sp-6);
}

@media (max-width: 720px) {
    body.latimer-summit .latimer-year-one-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--latimer-sp-3);
    }
}

body.latimer-summit .latimer-year-one-grid__cell {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: var(--latimer-bg);
    border: 1px solid var(--latimer-border);
}

body.latimer-summit .latimer-year-one-grid__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 600ms ease;
}

/* Subtle scale-on-hover so the grid feels alive without competing with the
   yellow accents elsewhere. Drops to no-transform under prefers-reduced-motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.latimer-summit .latimer-year-one-grid__cell:hover img {
        transform: scale(1.04);
    }
}

/* ============================================================================
   Registration tier cards (L01.8 WU6) — replaces the legacy inline styling
   that lived on template-register.php so we can target the 2-tier layout
   precisely and keep the prominent July 15 cutoff banner visible.
   ============================================================================ */

.latimer-register-cutoff {
    display: inline-block;
    background: var(--latimer-yellow);
    color: var(--latimer-bg) !important;
    padding: var(--latimer-sp-3) var(--latimer-sp-5);
    font-family: var(--latimer-font-display);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 var(--latimer-sp-7);
    border-radius: 2px;
}

.latimer-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--latimer-sp-5);
    max-width: 880px;
}

.latimer-tier-card {
    padding: var(--latimer-sp-6);
    background: var(--latimer-bg-card);
    border: 1px solid var(--latimer-border);
    border-radius: var(--latimer-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--latimer-sp-3);
}

.latimer-tier-card__badge {
    display: inline-block;
    align-self: flex-start;
    background: rgba(234, 255, 0, 0.12);
    color: var(--latimer-yellow);
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
    margin: 0;
}

.latimer-tier-card__name {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-h3);
    color: var(--latimer-yellow);
    margin: 0;
    line-height: 1.1;
}

.latimer-tier-card__price {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-h2);
    color: var(--latimer-text);
    margin: 0;
    line-height: 1;
}

.latimer-tier-card__price .woocommerce-Price-amount,
.latimer-tier-card__price bdi {
    color: inherit;
}

.latimer-tier-card__body {
    color: var(--latimer-text);
    font-size: 0.95rem;
    margin: 0;
    flex: 1;
}

/* Whisper variant — texture is barely perceptible, type reads on near-black */
.latimer-section--galaxy-whisper {
    background-color: var(--latimer-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Diffused variant — heavy blur + brightness pull-down for dense body copy.
   Used on founder-voice / long-form sections where ANY visible texture would
   fight the reading experience. The blur sits on a pseudo-element so it
   doesn't blur the foreground content. */
.latimer-section--galaxy-diffused {
    background-color: var(--latimer-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.latimer-section--galaxy-diffused::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(6px) brightness(0.5);
    -webkit-backdrop-filter: blur(6px) brightness(0.5);
    pointer-events: none;
    z-index: 0;
}

.latimer-section--galaxy-diffused > * {
    position: relative;
    z-index: 1;
}

/* End of brand-system layer. L01.3 will add page-specific overrides as needed. */
/* ============================================================================
   16. HEADER + FOOTER — wired across all pages
   Append to wp-theme/porto-child-latimer/style.css
   ============================================================================ */

/* ----------------------------------------------------------------------------
   HEADER — primary nav + register CTA
   ---------------------------------------------------------------------------- */

body.latimer-summit #header .header-main,
body.latimer-summit #header .header-wrapper,
body.latimer-summit #header .header-container {
    background-color: var(--latimer-bg) !important;
    border-bottom: 1px solid var(--latimer-border);
}

body.latimer-summit #header .logo,
body.latimer-summit #header .header-logo,
body.latimer-summit #header .logo-container {
    padding: 0.75rem 0;
}

/* Redundant size rule kept aligned with the canonical 240/160 block at
   line ~802. Selectors here also corrected from `.header-logo` (which
   isn't present in Porto's live DOM) to the actual `.logo` ancestor. */
body.latimer-summit #header .logo img {
    height: 240px !important;
    width: auto !important;
    max-height: 240px !important;
}
@media (max-width: 991px) {
    body.latimer-summit #header .logo img {
        height: 160px !important;
        max-height: 160px !important;
    }
}

/* Primary nav menu */
body.latimer-summit #header .main-menu,
body.latimer-summit #header .menu-primary-container ul,
body.latimer-summit #header ul.menu {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
body.latimer-summit #header .main-menu > li,
body.latimer-summit #header ul.menu > li {
    list-style: none;
    margin: 0;
}
body.latimer-summit #header .main-menu > li > a,
body.latimer-summit #header ul.menu > li > a {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem !important;
    color: var(--latimer-text) !important;
    background-color: transparent !important;
    font-family: var(--latimer-font-display) !important;
    font-size: var(--latimer-fs-body-sm) !important;
    font-weight: var(--latimer-fw-bold) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
}
body.latimer-summit #header .main-menu > li > a:hover,
body.latimer-summit #header .main-menu > li.current-menu-item > a,
body.latimer-summit #header .main-menu > li.current-menu-ancestor > a,
body.latimer-summit #header ul.menu > li > a:hover,
body.latimer-summit #header ul.menu > li.current-menu-item > a {
    color: var(--latimer-yellow) !important;
    background-color: rgba(234, 255, 0, 0.06) !important;
}

/* The "Register" / "Confirm your seat" menu item gets a yellow pill treatment.
   Marked in the menu via class="latimer-cta" (set in wp-cli during nav creation). */
body.latimer-summit #header .main-menu > li.latimer-cta > a,
body.latimer-summit #header ul.menu > li.latimer-cta > a {
    background-color: var(--latimer-yellow) !important;
    color: var(--latimer-bg) !important;
    margin-left: 0.5rem;
    border: 2px solid var(--latimer-yellow);
}
body.latimer-summit #header .main-menu > li.latimer-cta > a:hover,
body.latimer-summit #header ul.menu > li.latimer-cta > a:hover {
    background-color: transparent !important;
    color: var(--latimer-yellow) !important;
}

/* Mobile menu toggle */
body.latimer-summit #header .mobile-toggle,
body.latimer-summit #header .mobile-toggle i {
    color: var(--latimer-text) !important;
    background-color: transparent !important;
}
body.latimer-summit #header .mobile-toggle:hover,
body.latimer-summit #header .mobile-toggle:hover i {
    color: var(--latimer-yellow) !important;
}

/* ----------------------------------------------------------------------------
   FOOTER — Latimer-branded
   ---------------------------------------------------------------------------- */

body.latimer-summit .latimer-footer {
    background-color: var(--latimer-bg);
    color: var(--latimer-text);
    border-top: 1px solid var(--latimer-border);
    margin-top: clamp(4rem, 8vw, 6rem);
}

body.latimer-summit .latimer-footer__container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1.25rem, 5vw, 4rem);
}

/* Main footer block */
body.latimer-summit .latimer-footer__main {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

body.latimer-summit .latimer-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 720px) {
    body.latimer-summit .latimer-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 4rem;
    }
}

body.latimer-summit .latimer-footer__eyebrow {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-eyebrow);
    font-weight: var(--latimer-fw-bold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--latimer-yellow);
    margin: 0 0 1.25rem;
}

/* Column 1 — brand */
body.latimer-summit .latimer-footer__col--brand {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
}
body.latimer-summit .latimer-footer__logo {
    display: inline-block;
}
body.latimer-summit .latimer-footer__logo img {
    height: 120px;
    width: auto;
    max-width: 100%;
    display: block;
}
@media (max-width: 720px) {
    body.latimer-summit .latimer-footer__logo img {
        height: 80px;
    }
}
body.latimer-summit .latimer-footer__tagline {
    font-family: var(--latimer-font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-style: italic;
    font-weight: var(--latimer-fw-regular);
    color: var(--latimer-yellow);
    margin: 0;
    letter-spacing: -0.01em;
}
body.latimer-summit .latimer-footer__edition {
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body-sm);
    line-height: 1.6;
    color: var(--latimer-text);
    opacity: 0.7;
    margin: 0;
}

/* Column 2 — nav */
body.latimer-summit .latimer-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
body.latimer-summit .latimer-footer__nav a {
    font-family: var(--latimer-font-display);
    font-size: var(--latimer-fs-body-sm);
    font-weight: var(--latimer-fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--latimer-text) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
body.latimer-summit .latimer-footer__nav a:hover {
    color: var(--latimer-yellow) !important;
}

/* Column 3 — contact */
body.latimer-summit .latimer-footer__contact {
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body);
    line-height: 1.7;
    font-style: normal;
    color: var(--latimer-text);
    margin: 0 0 1.5rem;
}
body.latimer-summit .latimer-footer__contact-name {
    font-family: var(--latimer-font-display);
    font-weight: var(--latimer-fw-bold);
    letter-spacing: 0.02em;
}
body.latimer-summit .latimer-footer__contact a {
    color: var(--latimer-text) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--latimer-border);
    transition: color 0.2s ease, border-color 0.2s ease;
}
body.latimer-summit .latimer-footer__contact a:hover {
    color: var(--latimer-yellow) !important;
    border-bottom-color: var(--latimer-yellow);
}
body.latimer-summit .latimer-footer__access {
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-body-sm);
    color: var(--latimer-text);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0;
}

/* Yellow rule */
body.latimer-summit .latimer-footer__rule {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--latimer-yellow) 50%, transparent 100%);
    opacity: 0.5;
}

/* Bottom strip */
body.latimer-summit .latimer-footer__bottom {
    padding: 1.75rem 0;
    background-color: var(--latimer-bg);
}
body.latimer-summit .latimer-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
body.latimer-summit .latimer-footer__legal,
body.latimer-summit .latimer-footer__attribution {
    font-family: var(--latimer-font-body);
    font-size: var(--latimer-fs-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--latimer-text);
    opacity: 0.45;
    margin: 0;
}
@media (max-width: 600px) {
    body.latimer-summit .latimer-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* Hide Porto's default footer logo (the one with the wordpress wordmark) */
body.latimer-summit #footer .footer-logo:not(.latimer-footer__logo),
body.latimer-summit #footer img[src*="logo_footer"] {
    display: none !important;
}

/* ============================================================================
   L01.8 WU9 — Mobile-first defensive pass.
   Jon: "Assume most of the people seeing this will be viewing on mobile, so
   ensure it optimized for mobile use." Audit pass against iPhone widths
   (320, 375, 414) and Android (360, 412). Tap targets >= 44px. Speaker
   grid 2-column at narrow widths (was 1-col due to 280px minmax).
   ============================================================================ */

/* Speaker grid: force 2 columns on mobile so cards don't stretch full-width.
   Default desktop rule is repeat(auto-fill, minmax(280px, 1fr)) which
   collapses to a single column below ~600px container width — too wide
   per-card on mobile. */
@media (max-width: 767px) {
    .latimer-speaker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* L01.13 WU11 — mobile gap also bumped sp-4 -> sp-5 (16 -> 24px) to
           keep the rest state breathable when 4-speaker grids wrap to 2x2. */
        gap: var(--latimer-sp-5) var(--latimer-sp-4);
    }

    /* Speaker card body text scales down so 2-col fits at 320px */
    .latimer-speaker__name {
        font-size: clamp(1rem, 4.5vw, 1.25rem);
    }
    .latimer-speaker__roles {
        font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    }
}

/* Registration tier grid: at the narrowest widths the 300px minmax already
   stacks to 1 col, which is the right call (only 2 tiers, prominent cards).
   Just tighten the cutoff banner so it doesn't wrap awkwardly. */
@media (max-width: 480px) {
    .latimer-register-cutoff {
        font-size: 0.95rem;
        padding: var(--latimer-sp-3) var(--latimer-sp-4);
        text-align: center;
        display: block;
    }
    .latimer-tier-card {
        padding: var(--latimer-sp-5);
    }
}

/* Hero meta block: two lines (Harold Prince + Penn) shouldn't crowd the
   CTAs at 320px. */
@media (max-width: 480px) {
    .latimer-hero__meta {
        font-size: 0.95rem;
        margin-bottom: var(--latimer-sp-4);
    }
    .latimer-hero__meta + .latimer-hero__meta {
        margin-top: calc(-1 * var(--latimer-sp-3));
    }
}

/* Year One video frame: the lite-youtube embed already respects aspect ratio,
   but on the very narrowest widths the rounded corners can clip oddly when
   the section padding stacks with viewport padding. Drop the radius slightly
   on the smallest screens. */
@media (max-width: 480px) {
    .latimer-video-frame {
        border-radius: 4px;
    }
}

/* Footer brand-edition line gained two extra rows for the Harold Prince
   Theatre + 3680 Walnut Street venue addition (WU5). On narrow screens
   tighten the leading so it reads as one address block, not 5 paragraphs. */
@media (max-width: 480px) {
    body.latimer-summit .latimer-footer__edition {
        line-height: 1.5;
    }
}

/* Defensive: prevent horizontal overflow from any rogue image/element. */
body.latimer-summit img,
body.latimer-summit video,
body.latimer-summit iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent body horizontal scroll at any width — last-line-of-defense. */
html,
body.latimer-summit {
    overflow-x: hidden;
}

/* =========================================================================
   TESTIMONIAL SLIDER
   Rendered by [latimer_testimonials] (inc/testimonials.php) via Swiper.js.
   Brand treatment: dark cards with a yellow opening quotemark, white quote
   body, yellow attribution name, muted role line. Slider shows 1 card on
   mobile, 2 from 900px, 3 from 1200px.
   ========================================================================= */

body.latimer-summit .latimer-testimonials {
    background: var(--latimer-bg);
    padding: clamp(3rem, 7vw, 6rem) 0;
    position: relative;
}

body.latimer-summit .latimer-testimonials__header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
body.latimer-summit .latimer-testimonials__header .latimer-eyebrow {
    color: var(--latimer-accent);
    margin-bottom: 0.75rem;
}
body.latimer-summit .latimer-testimonials__header .latimer-display {
    color: var(--latimer-text);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    margin: 0;
}

body.latimer-summit .latimer-testimonials__swiper {
    position: relative;
    padding: 0 clamp(2rem, 6vw, 5rem) 4rem;
    overflow: hidden;
}

body.latimer-summit .latimer-testimonial-card {
    background: linear-gradient(180deg, rgba(234, 255, 0, 0.04) 0%, rgba(7, 14, 30, 0.6) 100%);
    border: 1px solid rgba(234, 255, 0, 0.18);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Rob 2026-05-26: fixed 300x300 cards. Long quotes scroll inside the
       quote body so the card never grows past 300px tall. */
    width: 300px !important;
    height: 300px !important;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
body.latimer-summit .latimer-testimonial-card:hover {
    border-color: rgba(234, 255, 0, 0.42);
    transform: translateY(-2px);
}

body.latimer-summit .latimer-testimonial-card__mark {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 0.7;
    color: var(--latimer-accent);
    display: block;
    margin: 0 0 0.25rem;
}

body.latimer-summit .latimer-testimonial-card__quote {
    color: var(--latimer-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0 0 0.75rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    quotes: none;
    /* Thin scrollbar styling for browsers that support it. */
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 255, 0, 0.35) transparent;
}
body.latimer-summit .latimer-testimonial-card__quote::-webkit-scrollbar {
    width: 4px;
}
body.latimer-summit .latimer-testimonial-card__quote::-webkit-scrollbar-thumb {
    background: rgba(234, 255, 0, 0.35);
    border-radius: 2px;
}
body.latimer-summit .latimer-testimonial-card__quote::-webkit-scrollbar-track {
    background: transparent;
}
body.latimer-summit .latimer-testimonial-card__quote::before,
body.latimer-summit .latimer-testimonial-card__quote::after {
    content: none;
}
body.latimer-summit .latimer-testimonial-card__quote strong {
    color: var(--latimer-accent);
    font-weight: 600;
}

body.latimer-summit .latimer-testimonial-card__attr {
    margin-top: auto;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
body.latimer-summit .latimer-testimonial-card__name {
    font-family: 'Inter', sans-serif;
    color: var(--latimer-accent);
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0 0 0.125rem;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
body.latimer-summit .latimer-testimonial-card__role {
    font-family: 'Inter', sans-serif;
    color: var(--latimer-muted-light);
    font-size: 0.75rem;
    line-height: 1.35;
    margin: 0;
}

/* Swiper navigation arrows — re-skin Swiper's defaults to brand. */
body.latimer-summit .latimer-testimonials__swiper .swiper-button-prev,
body.latimer-summit .latimer-testimonials__swiper .swiper-button-next {
    color: var(--latimer-accent);
    width: 44px;
    height: 44px;
    top: 50%;
    margin-top: -22px;
    border: 1px solid rgba(234, 255, 0, 0.4);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease, border-color 0.2s ease;
}
body.latimer-summit .latimer-testimonials__swiper .swiper-button-prev:hover,
body.latimer-summit .latimer-testimonials__swiper .swiper-button-next:hover {
    background: rgba(234, 255, 0, 0.12);
    border-color: var(--latimer-accent);
}
body.latimer-summit .latimer-testimonials__swiper .swiper-button-prev::after,
body.latimer-summit .latimer-testimonials__swiper .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}
body.latimer-summit .latimer-testimonials__swiper .swiper-button-prev { left: 0; }
body.latimer-summit .latimer-testimonials__swiper .swiper-button-next { right: 0; }

/* Pagination dots — yellow accent for active, muted for inactive. */
body.latimer-summit .latimer-testimonials__swiper .swiper-pagination {
    bottom: 0.5rem;
}
body.latimer-summit .latimer-testimonials__swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
    width: 9px;
    height: 9px;
    margin: 0 5px !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
body.latimer-summit .latimer-testimonials__swiper .swiper-pagination-bullet-active {
    background: var(--latimer-accent);
    transform: scale(1.25);
}

@media (max-width: 720px) {
    body.latimer-summit .latimer-testimonials__swiper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    body.latimer-summit .latimer-testimonials__swiper .swiper-button-prev,
    body.latimer-summit .latimer-testimonials__swiper .swiper-button-next {
        display: none;
    }
}

/* =========================================================================
   24. ELEMENTOR HOME-2 OVERRIDES
   Forces all speaker image-box thumbnails to render as perfect circles,
   regardless of source image aspect ratio. object-fit:cover keeps the
   face centered while clipping to a square.
   ========================================================================= */

/* Default (position=top): fixed 240x240 circle, centered above text.
   Rob 2026-05-25: "all circle headshots should be the same size, pick
   one and change." 240px fits comfortably inside a 4-per-row column
   (~320px each in a 1280px container) with breathing room, and reads
   at the right scale in 2-per-row and 1-per-row layouts too. Prior
   clamp(160px, 80%, 260px) was scaling each headshot to its column
   width, which produced visible size variation between sections. */
.elementor-page .elementor-widget-image-box .elementor-image-box-img {
    width: 240px !important;
    height: 240px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0;
    margin: 0 auto 16px auto !important;
}

/* Position=left layout (Reggie Barnes, Jonathan Cropper): image floats
   beside the text, so we need a fixed size and a right margin instead. */
.elementor-page .elementor-widget-image-box.elementor-position-left .elementor-image-box-img {
    width: 220px !important;
    height: 220px !important;
    aspect-ratio: auto !important;
    margin: 0 28px 0 0 !important;
}

@media (max-width: 900px) {
    .elementor-page .elementor-widget-image-box .elementor-image-box-img {
        width: 200px !important;
        height: 200px !important;
    }
    .elementor-page .elementor-widget-image-box.elementor-position-left .elementor-image-box-img {
        width: 180px !important;
        height: 180px !important;
    }
}

.elementor-page .elementor-widget-image-box .elementor-image-box-img a,
.elementor-page .elementor-widget-image-box .elementor-image-box-img figure {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.elementor-page .elementor-widget-image-box .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    /* Bias crop toward the top of the source image — faces usually sit in
       the upper third, so default center-crop on tall/portrait photos cuts
       the face out and shows the chest/body instead. */
    object-position: center 20% !important;
    border-radius: 50% !important;
    display: block;
}

/* Per-speaker headshot adjustments. WordPress auto-tags each rendered image
   with wp-image-{ID}, which lets us target specific portraits whose face
   geometry doesn't match the default center/top-20% bias. */
.elementor-page img.wp-image-131 {  /* Carmen Smith (TBC) — 169x256 portrait */
    object-position: center top !important;
}
.elementor-page img.wp-image-132 {  /* Lanny Smoot (TBC) — 1480x833 landscape, face slightly right of center */
    object-position: 52% 30% !important;
}

/* Standalone circle_image helper (Elementor "image" widget with lat-circle-img
   class) — used by the Intermission Artist cards and any other place that
   needs a circular thumbnail. The wrapper enforces a real 250x250 square
   with overflow:hidden so the inner img is geometrically clipped to a
   circle, no matter what the source aspect ratio is. */
.elementor-page .elementor-widget-image.lat-circle-img > .elementor-widget-container {
    width: 250px !important;
    height: 250px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: block !important;
}

.elementor-page .lat-circle-img a,
.elementor-page .lat-circle-img figure {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-page .lat-circle-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Year-One collage: force every image in the 3x2 grid to render at uniform
   size. Source files have wildly different native dimensions (year1-collage-02
   is 279x142 vs the rest at ~440-491 wide), which leaves image #2 visibly
   smaller without this rule. */
.elementor-page .elementor-widget-image .lat-collage-img,
.elementor-page .lat-collage-img.elementor-widget-image {
    width: 100%;
}

.elementor-page .lat-collage-img img,
.elementor-page .elementor-widget-image.lat-collage-img img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    display: block;
}

/* =========================================================================
   HEADER — responsive single-nav behavior
   Porto's header builder template renders BOTH the desktop main-menu
   (#main-menu) and the mobile slide-out drawer (#nav-panel) into the DOM
   on every page. Porto hides the .mobile-toggle hamburger above 991px but
   does NOT hide #main-menu below 992px — so on narrow viewports BOTH the
   wrapped desktop nav AND the hamburger render at the same time ("two
   navs"). Hiding #main-menu below the lg breakpoint flips Porto into a
   single-nav pattern: desktop list at >=992px, hamburger-only below.
   ========================================================================= */
@media (max-width: 991px) {
    #main-menu {
        display: none !important;
    }
}

/* ====================================================================
 * L01.13 post-sign-off hotfix (2026-05-20) — mobile #nav-panel drawer
 * --------------------------------------------------------------------
 * Jon flagged mobile: opens the hamburger and the panel renders with
 * Porto's default light skin (white background, dark gray text). Tap
 * doesn't appear to navigate. Root cause: child-theme had dark-theme
 * overrides for the desktop nav (#main-menu) and the .mobile-toggle
 * hamburger icon but NOT for the slide-out drawer markup
 * (#nav-panel > .mobile-nav-wrap > .menu-wrap > .mobile-menu). Porto's
 * compiled stylesheet then wins, painting light. The tap-doesn't-
 * navigate sensation came from a transparent ::before pseudo Porto puts
 * on the panel container that absorbs touches above the actual <a>
 * elements when the panel is closed mid-animation.
 *
 * Fix: dark-theme the whole drawer + force pointer-events:auto on the
 * <a> tags so taps always reach the link target.
 * ==================================================================== */

/* Drawer container + every nested wrap — dark bg, full bleed. */
body.latimer-summit #nav-panel,
body.latimer-summit #nav-panel .container,
body.latimer-summit #nav-panel .mobile-nav-wrap,
body.latimer-summit #nav-panel .menu-wrap {
    background-color: var(--latimer-bg) !important;
    color: var(--latimer-text) !important;
    border-color: var(--latimer-border) !important;
}

/* The menu list itself. */
body.latimer-summit #nav-panel .mobile-menu,
body.latimer-summit #nav-panel ul.mobile-menu,
body.latimer-summit #nav-panel ul.accordion-menu {
    background-color: var(--latimer-bg) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each menu item — divider line between rows uses --latimer-border. */
body.latimer-summit #nav-panel .mobile-menu > li,
body.latimer-summit #nav-panel ul.accordion-menu > li {
    background-color: var(--latimer-bg) !important;
    border-bottom: 1px solid var(--latimer-border) !important;
    list-style: none !important;
}

/* The <a> tags: yellow text, big tap target, pointer-events explicitly
   auto so any Porto-default `none` is canceled, and the link is the full
   row so the user can't miss it. */
body.latimer-summit #nav-panel .mobile-menu a,
body.latimer-summit #nav-panel ul.accordion-menu a {
    display: block !important;
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    color: var(--latimer-yellow) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-family: var(--latimer-font-display) !important;
    font-weight: var(--latimer-fw-semi) !important;
    font-size: 1.125rem !important;
    letter-spacing: 0.02em !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(234, 255, 0, 0.2) !important;
}

body.latimer-summit #nav-panel .mobile-menu a:hover,
body.latimer-summit #nav-panel .mobile-menu a:active,
body.latimer-summit #nav-panel .mobile-menu a:focus {
    background-color: rgba(234, 255, 0, 0.08) !important;
    color: var(--latimer-yellow) !important;
}

/* CTA-pill item ("Confirm Your Seat") — solid yellow background, black
   text, no underline. Mobile drawer renders it as a regular row so the
   styling pivots to invert from yellow-on-dark to black-on-yellow. */
body.latimer-summit #nav-panel .mobile-menu li.latimer-cta a,
body.latimer-summit #nav-panel .mobile-menu li[class*="latimer-cta"] a {
    background-color: var(--latimer-yellow) !important;
    color: #000000 !important;
}
body.latimer-summit #nav-panel .mobile-menu li.latimer-cta a:hover,
body.latimer-summit #nav-panel .mobile-menu li[class*="latimer-cta"] a:hover {
    background-color: var(--latimer-yellow-dim) !important;
    color: #000000 !important;
}

/* Defensive: any Porto-injected ::before overlay on the drawer would
   intercept taps before they reach the <a>. Disable it. */
body.latimer-summit #nav-panel::before,
body.latimer-summit #nav-panel .mobile-nav-wrap::before,
body.latimer-summit #nav-panel .menu-wrap::before {
    pointer-events: none !important;
}

/* Hide ONLY Porto's breadcrumb strip (`<nav class="breadcrumbs-wrap">`)
   site-wide. Rob 2026-05-25: "Do not remove the page title in white,
   only take off the breadcrumbs." Keeps `.page-title-wrap` and the
   yellow-underlined H2 ("Speakers", "Sessions", etc.) visible. */
body.latimer-summit .breadcrumbs-wrap {
    display: none !important;
}

/* Page-id-173 (homepage) still hides the whole `.page-top` because the
   Elementor hero IS the page intro — the auto-emitted H1 "Home" would
   double up with the Elementor hero. Same for the custom-template
   pages /about/ (79), /contact/ (81), /register/ (83) which render
   their own inline H1 inside the template. */
body.page-id-173 .page-top,
body.page-id-79  .page-top,
body.page-id-81  .page-top,
body.page-id-83  .page-top {
    display: none !important;
}

/* HEADER — sticky-logo size. The desktop logo is 240px tall, which at
   the LFS wordmark's 1.78:1 aspect ratio renders ~427px wide. Porto's
   sticky-state CSS clips the logo container to `--porto-sticky-logo-mw`
   (default 80px, prior bumps to 160px), which on scroll cut the wordmark
   off mid-word ("LATIMER FU..." visible, "TURES SUMMIT" clipped). The
   variable now fits the full rendered width with breathing room. Override
   lives in the child theme so it's immune to Porto's dynamic-CSS
   regeneration / theme_css_vars.css caching. */
#header .logo {
    --porto-sticky-logo-mw: 460px;
    max-width: none !important;
}
#header .logo a,
#header .logo a img {
    max-width: none !important;
    overflow: visible !important;
}

/* =========================================================================
   WOOCOMMERCE DARK THEME — applies to /my-account/ (login + dashboard +
   orders + addresses + edit-account + lost password), /cart/, /checkout/,
   and product pages. Porto's defaults render WC forms with white inputs
   and gray-on-gray text on our black ground, which is unreadable.
   ========================================================================= */

/* Form inputs — white fill, dark text. The earlier dark-tinted (4% white)
   treatment was invisible on the brand dark background; users couldn't tell
   the fields from the page. Light-fill fields stand out clearly while the
   page chrome stays dark. */
body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page input[type="number"],
body.woocommerce-page input[type="search"]:not(.search-field),
body.woocommerce-page input.input-text,
body.woocommerce-page select,
body.woocommerce-page textarea,
body.woocommerce input[type="text"],
body.woocommerce input[type="email"],
body.woocommerce input[type="password"],
body.woocommerce input.input-text,
body.woocommerce select,
body.woocommerce textarea,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-cart input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
}

body.woocommerce-page input::placeholder,
body.woocommerce-page textarea::placeholder,
body.woocommerce-checkout input::placeholder,
body.woocommerce-checkout textarea::placeholder,
.woocommerce form .form-row input::placeholder,
.woocommerce form .form-row textarea::placeholder {
    color: #777777 !important;
    opacity: 1;
}

body.woocommerce-page input:focus,
body.woocommerce-page select:focus,
body.woocommerce-page textarea:focus,
body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus,
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--latimer-yellow) !important;
    outline: 2px solid rgba(234, 255, 0, 0.25);
    outline-offset: 1px;
}

/* Select2 / dropdown widgets WC uses for country / state pickers — match
   the white-fill rule so they're not invisible. */
body.woocommerce-page .select2-container--default .select2-selection--single,
body.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce .select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #111111 !important;
    border-radius: 4px !important;
    height: auto !important;
    padding: 8px 6px !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111111 !important;
    line-height: 1.5 !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

/* WC buttons (Login, Update, Save changes, Place order, etc.) */
body.woocommerce-page button.woocommerce-Button,
body.woocommerce-page button.button,
body.woocommerce-page a.button,
body.woocommerce-page input[type="submit"].button,
body.woocommerce button.woocommerce-Button,
body.woocommerce a.button {
    background-color: var(--latimer-yellow) !important;
    color: var(--latimer-bg) !important;
    border: 1px solid var(--latimer-yellow) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

body.woocommerce-page button.woocommerce-Button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce a.button:hover {
    background-color: var(--latimer-yellow-dim) !important;
    border-color: var(--latimer-yellow-dim) !important;
    color: var(--latimer-bg) !important;
}

/* Headings + body text on WC pages */
body.woocommerce-page h1,
body.woocommerce-page h2,
body.woocommerce-page h3,
body.woocommerce-page h4,
body.woocommerce-page .entry-title {
    color: var(--latimer-text) !important;
}

body.woocommerce-page p,
body.woocommerce-page label,
body.woocommerce-page .woocommerce-form-login__rememberme,
body.woocommerce-page .woocommerce-form__label-for-checkbox {
    color: var(--latimer-text);
}

/* Links inside WC content area (Forgot Password?, etc) — yellow brand.
   !important required because Porto sprinkles utility classes like
   `.text-v-dark` (color: #222529) directly on the anchors. */
body.woocommerce-page .woocommerce a:not(.button):not(.elementor-button):not(.latimer-btn),
body.woocommerce-page .woocommerce-account a:not(.button):not(.elementor-button):not(.latimer-btn),
body.woocommerce-page .woocommerce-MyAccount-content a:not(.button) {
    color: var(--latimer-yellow) !important;
}

body.woocommerce-page .woocommerce a:not(.button):not(.elementor-button):not(.latimer-btn):hover,
body.woocommerce-page .woocommerce-account a:not(.button):not(.elementor-button):not(.latimer-btn):hover,
body.woocommerce-page .woocommerce-MyAccount-content a:not(.button):hover {
    color: var(--latimer-yellow-dim) !important;
}

/* Porto utility classes that hardcode dark text colors on WC anchors. */
body.woocommerce-page .woocommerce .text-v-dark,
body.woocommerce-page .woocommerce a.text-v-dark {
    color: var(--latimer-yellow) !important;
}

/* Porto wraps WC forms (lost-password, register, etc) in `.featured-box`
   which has a white background by default — invisible against our white
   form labels and yellow links. Re-skin to match the dark theme. */
body.woocommerce-page .featured-box,
body.woocommerce-page .featured-box.featured-box-primary {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--latimer-text) !important;
    box-shadow: none !important;
}

body.woocommerce-page .featured-box .box-content {
    background: transparent !important;
}

body.woocommerce-page .featured-box label {
    color: var(--latimer-text) !important;
}

/* My Account sidebar nav */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

/* My Account sidebar nav — rest = transparent bg + white text;
   active/hover = yellow bg + black text. The explicit `background:
   transparent` + `:link` + `:visited` selectors are required because
   Porto's stock theme paints WC nav links with a fill in the default
   state at higher specificity. The `> *` selector kills any inline
   bg Porto wraps the link text in. */
.woocommerce-MyAccount-navigation li a,
.woocommerce-MyAccount-navigation li a:link,
.woocommerce-MyAccount-navigation li a:visited,
body.woocommerce-page .woocommerce-MyAccount-navigation li a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 12px 16px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--latimer-text) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
}

.woocommerce-MyAccount-navigation li a > *,
.woocommerce-MyAccount-navigation li a span {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
    background: var(--latimer-yellow) !important;
    background-color: var(--latimer-yellow) !important;
    color: var(--latimer-bg) !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.is-active a:link,
.woocommerce-MyAccount-navigation li.is-active a:visited,
.woocommerce-MyAccount-navigation li.is-active a:hover,
.woocommerce-MyAccount-navigation li.is-active a:focus,
.woocommerce-MyAccount-navigation li.is-active a:active,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--latimer-yellow) !important;
    background-color: var(--latimer-yellow) !important;
    color: var(--latimer-bg) !important;
    font-weight: 700 !important;
}

/* WC notices (success, error, info) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--latimer-text) !important;
    border-left: 4px solid var(--latimer-yellow) !important;
    padding: 14px 16px !important;
}

.woocommerce-error {
    border-left-color: #ff5252 !important;
}

/* Account-area tables (orders list, addresses, downloads) */
body.woocommerce-page table.shop_table,
body.woocommerce-page table.account-orders-table,
body.woocommerce-page table.woocommerce-orders-table {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--latimer-text);
}

body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td,
body.woocommerce-page table.account-orders-table th,
body.woocommerce-page table.account-orders-table td {
    color: var(--latimer-text) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: transparent !important;
}

body.woocommerce-page table thead {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Address blocks on the addresses tab */
body.woocommerce-page .woocommerce-Address {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

body.woocommerce-page .woocommerce-Address-title h3 {
    margin-top: 0;
}

/* Breadcrumb links site-wide — Porto defaults to blue (#0088CC) which clashes
   with the brand. Yellow matches the rest of the site. */
.breadcrumb a,
.breadcrumbs-wrap a {
    color: var(--latimer-yellow) !important;
}

.breadcrumb a:hover,
.breadcrumbs-wrap a:hover {
    color: var(--latimer-yellow-dim) !important;
}

/* L01.13 — WC product / cart / checkout dark theme.
   Porto renders the WC tab panel, product meta, related products, cart,
   and checkout sections on a white background. Force the brand dark
   background so single-product, cart, checkout, and order-received pages
   stay consistent with the rest of the site. */
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-Tabs-panel,
body.single-product .panel.entry-content.wc-tab,
body.woocommerce div.product .woocommerce-tabs .panel,
body.woocommerce-page .woocommerce-tabs .panel,
body.single-product .product_meta,
body.woocommerce div.product .product_meta,
body.single-product .related.products,
body.single-product .upsells.products,
body.woocommerce-page .related.products,
body.woocommerce-page .upsells.products,
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .checkout,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table,
body.woocommerce-order-received .woocommerce,
body.woocommerce-order-received .woocommerce-order {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--latimer-text) !important;
    border-color: var(--latimer-border) !important;
    box-shadow: none !important;
}

/* Tab nav items + active-tab pill */
body.single-product .woocommerce-tabs ul.tabs.wc-tabs,
body.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--latimer-border) !important;
}
body.single-product .woocommerce-tabs ul.tabs li,
body.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border-color: var(--latimer-border) !important;
}
body.single-product .woocommerce-tabs ul.tabs li a,
body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--latimer-text) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--latimer-yellow) !important;
}

/* Porto's white-bg utility wrappers that bleed onto WC product pages */
body.woocommerce-page .featured-box-light,
body.woocommerce-page .text-color-light,
body.single-product .featured-box-light,
body.single-product .text-color-light,
body.single-product .bg-light,
body.woocommerce-page .bg-light {
    background: transparent !important;
    color: var(--latimer-text) !important;
}

/* ====================================================================
 * L01.13 WU9 — section divider color override
 * --------------------------------------------------------------------
 * Jon (post-launch walkthrough) reports a blue horizontal line under
 * sections. Source is Porto's compiled dynamic_style.css `--skin-color`
 * leaking into the cascade for <hr>, decorative title bars, and the
 * Elementor divider widget, none of which we have direct edit access
 * to from this child theme. Defensive override below remaps every
 * common Porto/Elementor divider surface to the brand yellow.
 *
 * Why `!important`: Porto emits these from a higher-priority compiled
 * stylesheet (`theme_css_vars.css` + `dynamic_style.css`) that bypasses
 * normal child-theme cascade order. Without `!important` the blue wins.
 * ==================================================================== */

/* Native <hr> in any context. */
body.latimer-summit hr,
body.latimer-summit .latimer-section hr,
body.latimer-summit main hr {
    border: 0 !important;
    border-top: 1px solid var(--latimer-yellow) !important;
    background-color: var(--latimer-yellow) !important;
    color: var(--latimer-yellow) !important;
    height: 1px !important;
}

/* Porto's decorative title underline + heading divider line.
   These render as a short colored bar under a section heading. */
body.latimer-summit .heading-divider,
body.latimer-summit .heading-divider::before,
body.latimer-summit .heading-divider::after,
body.latimer-summit .title-divider,
body.latimer-summit .title-divider::before,
body.latimer-summit .title-divider::after,
body.latimer-summit .section-title::after,
body.latimer-summit .section-title::before,
body.latimer-summit .divider,
body.latimer-summit .divider-line,
body.latimer-summit .heading-bar {
    background: var(--latimer-yellow) !important;
    background-color: var(--latimer-yellow) !important;
    border-color: var(--latimer-yellow) !important;
}

/* Porto skin-color custom property overrides (where Porto reads them) */
body.latimer-summit {
    --skin-color: var(--latimer-yellow) !important;
    --porto-color-1: var(--latimer-yellow) !important;
    --porto-primary-color: var(--latimer-yellow) !important;
}

/* Elementor divider widget — separator <hr>-like element. */
body.latimer-summit .elementor-divider-separator,
body.latimer-summit .elementor-widget-divider .elementor-divider-separator {
    border-top-color: var(--latimer-yellow) !important;
    background-color: var(--latimer-yellow) !important;
}

/* Single-product summary right-column (price + add-to-cart area) */
body.single-product .summary.entry-summary,
body.single-product .product .summary {
    background: transparent !important;
    color: var(--latimer-text) !important;
}

/* Cart / checkout table cells — Porto inverts these to white-on-dark on
   .text-v-dark. Restore brand text color on the cell text. */
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td,
body.woocommerce-checkout #order_review th,
body.woocommerce-checkout #order_review td {
    background-color: transparent !important;
    color: var(--latimer-text) !important;
    border-color: var(--latimer-border) !important;
}

/* Porto renders WC product tabs through its `resp-htabs` system rather than
   the stock WC `.panel.entry-content.wc-tab` markup. The white-bg leak in
   the screenshot was the `.resp-tabs-container > .tab-content` block. Cover
   Porto's specific class names. */
body.single-product .resp-tabs-container,
body.single-product .resp-tabs-container .tab-content,
body.single-product .resp-tabs-container .resp-tab-content,
body.single-product .description_tab,
body.single-product .reviews_tab,
body.single-product .resp-vtabs .resp-tabs-list,
body.single-product .resp-tab-content-active {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--latimer-text) !important;
    border-color: var(--latimer-border) !important;
    box-shadow: none !important;
}

/* Porto tab nav strip (the DESCRIPTION / REVIEWS row) */
body.single-product .resp-tabs-list,
body.single-product ul.resp-tabs-list {
    background: transparent !important;
    border-bottom: 1px solid var(--latimer-border) !important;
}
body.single-product .resp-tabs-list li,
body.single-product .resp-tab-item {
    background: transparent !important;
    color: var(--latimer-text) !important;
    border-color: var(--latimer-border) !important;
}
body.single-product .resp-tab-active,
body.single-product .resp-tabs-list li.resp-tab-active {
    background: transparent !important;
    color: var(--latimer-yellow) !important;
    border-bottom-color: var(--latimer-yellow) !important;
}

/* Related products section under the tabs */
body.single-product .related.products,
body.single-product section.related.products,
body.single-product .related-products,
body.single-product .product .related,
body.single-product .upsells {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--latimer-text) !important;
}
body.single-product .related.products h2,
body.single-product .related-products h2,
body.single-product .upsells h2 {
    color: var(--latimer-text) !important;
}