/* ============================================================================
   U Talk — Divi adapter v6 (2026-07-25, pixel-perfect pass)
   Model: dissolve Divi's structural boxes so the ORIGINAL static-site DOM
   classes (carried on sections/rows/columns via module_class and on inner
   markup inside native Text modules) are laid out by the ORIGINAL, verbatim
   styles.css — which loads immediately AFTER this file.
   Load order: after all Divi head styles, before styles.css.
   ========================================================================= */

/* ---- 1. Revert Divi's element-level styling to UA defaults (the original
        site ships no reset — UA defaults ARE the reference rendering) ---- */
/* real specificity needed: Divi sets body{font-size:14px;line-height:1.7;font-weight:500} */
body{font-family:var(--gvid-font-body),system-ui,sans-serif;font-size:16px;line-height:normal;font-weight:400;color:var(--gcid-text-primary);background:var(--gcid-bg-light)}
:where(body) h1,:where(body) h2,:where(body) h3,:where(body) h4,:where(body) h5,:where(body) h6,
:where(body) p,:where(body) ul,:where(body) ol,:where(body) li,
:where(body) blockquote,:where(body) figure,:where(body) figcaption,
:where(body) form,:where(body) label,:where(body) fieldset,:where(body) legend,
:where(body) address,:where(body) cite,:where(body) code,:where(body) pre,
:where(body) dl,:where(body) dt,:where(body) dd{
  font:revert;margin:revert;padding:revert;border:revert;color:inherit;list-style:revert;outline:revert
}
:where(body) a{color:inherit;text-decoration:none}
:where(body) a:hover{opacity:.82}
:where(body) button{font:revert;margin:revert;padding:revert;border:revert;color:inherit}
body input,body select,body textarea{all:revert;box-sizing:border-box} /* keep border-box: all:revert would undo the design's *{box-sizing:border-box} */

/* Divi styles text-module content via contextual selectors (.et_pb_text_inner h3 { } etc.)
   that outrank the original's single-class rules — neutralize at matching specificity.
   The design stylesheet loads after this file and is body-prefixed (+1 specificity),
   so its rules win every remaining tie by order. */
.et_pb_text_inner h1,.et_pb_text_inner h2,.et_pb_text_inner h3,.et_pb_text_inner h4,.et_pb_text_inner h5,.et_pb_text_inner h6{font:revert;margin:revert;padding:revert;color:inherit;letter-spacing:revert;text-transform:revert}
.et_pb_text_inner p{font:revert;margin:revert;padding:revert;line-height:inherit}
.et_pb_text_inner a{color:inherit;text-decoration:none;font:inherit}
.et_pb_text_inner ul,.et_pb_text_inner ol,.et_pb_text_inner li{font:revert;margin:revert;padding:revert;list-style:revert;line-height:inherit}
.et_pb_text_inner button{font:revert;font-family:inherit;margin:revert;padding:revert;border:revert;color:inherit;background:none;cursor:pointer;line-height:normal}
.et_pb_text_inner form,.et_pb_text_inner label,.et_pb_text_inner figure,.et_pb_text_inner figcaption{font:revert;margin:revert;padding:revert}

/* ---- 2. Watermark (original: .page > .watermark overlay div) ---- */
body{position:relative}
body::before{content:"";position:absolute;inset:0;background-image:url('watermark-tile.png'),url('watermark-tile.png');background-size:400px 260px,400px 260px;background-position:0 0,200px 130px;mix-blend-mode:multiply;opacity:.45;animation:utalkScroll 30s linear infinite;pointer-events:none;z-index:0}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
#et-boc,.et-l,.et_builder_inner_content{position:relative;z-index:1}

/* ---- 3. Dissolve Divi structural boxes into plain, unstyled blocks.
        styles.css loads after this file, so original layout classes
        (.wrap .header .hero-grid .cards-grid etc.) win every tie. ---- */
#page-container{overflow:visible;background:transparent}
.et_pb_section{padding:0;margin:0;background:transparent}
.et_pb_row,.et_pb_row_inner{display:block;width:100%;max-width:none;margin:0;padding:0;float:none}
.et_pb_row::after,.et_pb_row_inner::after{content:none}
.et_pb_column,.et_pb_column_inner{display:block;width:auto;max-width:none;margin:0;padding:0;float:none;min-height:0}
.et_pb_module{margin:0;padding:0}

/* ★ v7 (2026-08-05, Vela regression fix): Divi's dynamic-CSS cache
   (et-divi-dynamic-4.css, regenerated automatically from the theme's
   gutter-width setting) emits compound selectors like
   ".et_pb_gutters3.et_block_row.et_pb_row>.et_pb_column_1_3{width:29.6667%}"
   and "...et_pb_column_1_3.et_block_column .et_pb_module{margin-bottom:9.27%}"
   — specificity (0,4,0)/(0,3,0) — which beat the plain single-class resets
   above regardless of load order, and can reappear any time Divi rebuilds
   that cache file (theme update, cache clear, gutter-setting touch). This
   silently broke every multi-column grid row (grid tracks pinned to <30%
   of the intended CSS-grid width via Divi's own fraction-column %, columns
   picking up Divi's 5.5%-scaled gutter margin) while text/image modules
   picked up Divi's per-column margin-bottom percentage — all while the DOM
   stayed correctly native/editable (pure cascade regression, not a
   content/module-tree issue).
   Fix is !important, scoped NARROWLY to avoid clobbering the (working)
   generic rules above:
   - Rows: excludes .wrap (the header/footer row that legitimately needs
     .wrap's own margin:0 auto + side padding — forcing row margin globally
     would kill that centering).
   - Columns: scoped to the fraction-size classes actually used in
     multi-column CSS-grid layouts (1_2 hero, 1_3 cards, 1_5 crew, 2_5/3_5
     bash-stack) — deliberately EXCLUDES column_4_4, which carries .wrap /
     .merch-img / other full-width columns that need their own non-zero
     margin/padding and were never actually being clobbered (Divi's 4_4
     default of width:100% already matches the design intent).
   - Modules: margin-bottom only (the exact property Divi's per-column
     percentage rule sets); crew-ring below re-asserts its own !important
     margin at higher (2-class) specificity to win back centering. */
/* ★ 2026-08-17 (Vela, UTALK-9): .ticker-track (marquee row) needs width:max-content — excluded here so
   styles.css can size it without a competing !important. */
.et_pb_row:not(.wrap):not(.ticker-track),.et_pb_row_inner:not(.wrap){width:100% !important;max-width:none !important;margin:0 !important}
/* ★ 2026-08-17 (Vela, UTALK-9): below 980px Divi's core responsive CSS forces every column to
   width:100% !important (stacking) — for the marquee's inline-flex columns that inflates each
   item to the whole track width. Same !important-vs-!important counter as the row rule above,
   scoped to the ticker track only. */
@media (max-width:980px){.ticker .ticker-track>.et_pb_column{width:auto !important;margin:0 !important}}
.et_pb_column_1_2,.et_pb_column_1_3,.et_pb_column_1_4,.et_pb_column_1_5,.et_pb_column_1_6,.et_pb_column_2_5,.et_pb_column_3_5,
.et_pb_column_inner_1_2,.et_pb_column_inner_1_3,.et_pb_column_inner_1_4,.et_pb_column_inner_1_5,.et_pb_column_inner_1_6,.et_pb_column_inner_2_5,.et_pb_column_inner_3_5{
  width:auto !important;max-width:none !important;margin:0 !important
}
.et_pb_module{margin-bottom:0 !important}

/* ★ v7.1 (2026-08-06, Vela): Divi's core CSS carries an always-on (no media
   query), non-!important rule ".et_block_row .et_pb_column{float:left}"
   (0,2,0 specificity) that beats this file's plain "float:none" (0,1,0)
   above. For columns whose own child content is CSS grid/flex (cards-grid,
   crew-grid, hero-grid, side-stack...) the browser ignores float on
   grid/flex ITEMS per spec, so it was invisible — but a column like
   ".community-hero" or ".header" sits inside a plain display:block ROW
   (the row itself isn't grid/flex, only the column's own children are), so
   the column itself DOES get floated. Combined with this file's own
   ".et_pb_row::after{content:none}" (which deliberately voids Divi's row
   clearfix a few lines up), the floated column escapes its row's height
   calculation entirely — the row/section collapses to 0 height, and the
   NEXT section (e.g. the ticker bar) rises up to occupy the vacated space,
   sharing the line with the float and getting squeezed into whatever
   horizontal sliver is left beside it (reproduced on /community/: the
   ticker rendered at 80px wide, pinned to the far right, overlapping the
   hero). No design class in this build relies on float, so this is safe
   to force unconditionally on every column. */
.et_pb_column,.et_pb_column_inner{float:none !important}
/* Divi adds stacking margin-bottom:30px below 980px via a high-specificity
   selector. Countering it broadly with !important would also kill design
   margins carried on columns (.section-head, .green-banner ...), so the
   !important zero is scoped to IMAGE modules only — the one module type that
   renders a real box in this build and never carries a design margin. Text
   modules are display:contents (margins moot); columns keep design margins. */
@media (max-width:980px){
  .et_pb_module.et_pb_image{margin-bottom:0 !important}
}

/* Text modules dissolve completely: their inner markup (carrying the original
   classes) becomes the direct flex/grid children, exactly like the static DOM */
.et_pb_text,.et_pb_text_inner{display:contents}
/* display:contents still passes INHERITED props down — don't let Divi's
   per-module text-align override the container's (e.g. .crew-grid centering) */
.et_pb_text,.et_pb_text_inner,.et_pb_text.et_pb_text_align_left{text-align:inherit}

/* Image modules become neutral fill-boxes; the original container class
   (card-thumb / video-thumb / fan-tile ...) supplies size + aspect-ratio */
.et_pb_image{margin:0;padding:0;line-height:0;font-size:0;text-align:left}
.et_pb_module.et_pb_image a,.et_pb_module.et_pb_image .et_pb_image_wrap{display:block;width:100%;height:100%}
/* high specificity: Divi's responsive image rules re-assert width:auto below 980px */
.et_pb_module.et_pb_image .et_pb_image_wrap img,.et_pb_module.et_pb_image a img,.et_pb_module.et_pb_image img{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}

/* ---- 4. Reproductions of original rules whose selectors can't match the
        Divi DOM (element selectors / inline styles / wrapper hops) ---- */

/* footer.dark-band{padding:26px 0} — our footer section is a div */
.et_pb_section.footer-band{padding:26px 0}
/* episodes footer carried inline style border-top */
.et_pb_section.footer-border{border-top:1px solid var(--gcid-border-rule)}

/* crew ring: .crew-ring/.crew-ring-inner wrappers are reproduced on the
   native Image module carrying module_class crew-ring */
.crew-ring.et_pb_image{width:170px;height:170px;margin:0 auto;border-radius:50%;padding:5px;background:linear-gradient(135deg,var(--gcid-accent-2),var(--gcid-accent-1))}
.crew-ring.et_pb_image .et_pb_image_wrap{border-radius:50%;border:4px solid #fff;box-sizing:border-box;overflow:hidden}

/* photo-tile columns: native Image module fills the aspect-ratio box */
.fan-tile .et_pb_image,.bash-photo-tile .et_pb_image,.bash-photo .et_pb_image{width:100%;height:100%}

/* home bash-photos inline rotations (were inline styles on a.bash-photo) */
.bash-photos>.et_pb_column:nth-child(1){transform:rotate(-2deg)}
.bash-photos>.et_pb_column:nth-child(2){transform:rotate(1.5deg) translateY(8px)}
.bash-photos>.et_pb_column:nth-child(3){transform:rotate(-1deg)}

/* chunked grids: >4-column grids are split into stacked native rows;
   re-create the grid's row-gap between the chunks */
.cards-grid+.cards-grid{margin-top:22px}
.bash-photos-grid+.bash-photos-grid{margin-top:16px}
.fan-grid+.fan-grid{margin-top:14px}

/* ★ v7 (2026-08-05, Vela): .merch-card is a FLEX row_inner (not a grid), so
   unlike cards-grid/hero-grid/crew-grid its two column_4_4 children do NOT
   get isolated into implicit tracks — Divi's default column_4_4 rule
   (width:100%, specificity 0,3,0/0,4,0, non-!important but still beats the
   body-prefixed 0,1,1 ".body .merch-img{width:92px}" design rule) makes
   BOTH children claim 100% of the flex row's main axis, so the text
   overflows outside the green box. Neutralize to auto so flex's normal
   content-based sizing (image fixed at 92px via styles.css, text shrinks to
   fit) takes over — mirrors the grid-child fix above, applied to the one
   flex-with-column-children case in this build. */
.merch-card>.et_pb_column,.merch-card>.et_pb_column_inner{width:auto !important}
.merch-card>.merch-img{width:92px !important}

/* shop email input (Divi/WP form styles reverted above; re-assert design) */
body .email-input{flex:1;min-width:180px;background:var(--gcid-fill-dark);border:1px solid var(--gcid-border-emphasis);border-radius:var(--gvid-radius-input);padding:14px 16px;color:var(--gcid-text-inverse);font-size:var(--gvid-text-ui-lg);font-family:var(--gvid-font-body),system-ui,sans-serif;outline:none}
body .email-input::placeholder{color:var(--gcid-text-placeholder-input)}

/* ★ 2026-08-28 (Vela, UTALK centering): the header and footer carry .wrap on the
   COLUMN (column_4_4 inside a plain full-width row), not on the row. Divi's gutter
   CSS (.et_pb_gutters3...>.et_pb_column_4_4 last-child, specificity ≥0,4,0) zeroes
   the column's margin-right, which splits body .wrap's "margin:0 auto" shorthand:
   margin-left stays auto, margin-right becomes 0 — so on viewports wider than
   1360px the whole 1360px header/footer column rendered flush-RIGHT (confirmed
   computed ml=560px/mr=0px at 1920). Result: nav + footer read right-of-center at
   1920/2560. Row-level .wrap already had its exemption in the row reset above;
   this is the column-level counterpart, same !important-vs-Divi-cache counter. */
.et_pb_column.wrap{width:100% !important;max-width:var(--gvid-size-container) !important;margin-left:auto !important;margin-right:auto !important}
/* et-divi-dynamic carries ".et_pb_row .et_pb_column:last-child{margin-right:0!important}"
   at (0,3,0) — outranks the (0,2,0) rule above in the !important tier, so the
   margin-right half needs (0,4,0): */
.et_pb_row .et_pb_column.et_pb_column_4_4.wrap{margin-right:auto !important}

/* ★ 2026-08-28 (Vela, UTALK E1): hero rows were capped at Divi 5's default 1080px
   row max-width (.et-l .et_pb_row, specificity 0,2,0, beats the design's
   body .wrap 0,1,1), shrinking the featured player; and the .video-card inner
   row kept Divi's ~30px vertical padding, leaving dead bands above/below the
   video. Let the hero rows use the full 1360px .wrap width and strip the card
   padding so the player fills its column edge-to-edge, 16:9. */
.et_pb_row.hero-grid,.et_pb_row.ep-hero-grid{width:100% !important;max-width:var(--gvid-size-container) !important;margin:0 auto !important}
.et_pb_row_inner.video-card{padding:0 !important}
.video-card .et_pb_module,.video-card .et_pb_text_inner{margin:0 !important;padding:0 !important}