/* ======================================================= */
/**
 * Theme-level CSS for cases that theme.json + block attributes can't cover.
 *
 * Two legitimate uses:
 *   1. Workarounds for blocks that ignore theme.json (documented per-rule).
 *   2. Structural article layout primitives that FSE doesn't offer
 *      (multi-column templates with responsive reflow, sticky/docked UI).
 *
 * Keep this file focused. Each section should be justified with a comment
 * explaining why theme.json or a block attribute can't do the job.
 */


/* ============================================================
   Navigation block — link hover colors
   theme.json's styles.blocks.core/navigation.elements.link doesn't
   reliably apply in WP 7, so we force it here.
   ============================================================ */
.wp-block-navigation .wp-block-navigation-item__content {
    color: var(--wp--preset--color--text);
    transition: color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--accent-hover);
    text-decoration: underline;
}

/* ============================================================
   Mobile navigation overlay
   ------------------------------------------------------------
   Colors handled by overlayBackgroundColor + overlayTextColor
   attributes on the navigation block in header.html.
   This handles typography, spacing, layout, and touch targets
   — none of which theme.json or block attributes reach.
   Same limitation category as gotcha #16 (nav link hover).
   ============================================================ */

/* Overlay open state: full viewport, centered contents */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--60);
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Every descendant flex container inside the open overlay:
   stack vertically, center, gap between items */
.wp-block-navigation__responsive-container.is-menu-open ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Menu item text: x-large, weight 600, generous tap padding */
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--x-large) !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  color: var(--wp--preset--color--text) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}

/* Hover state: mint accent */
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent) !important;
}

/* Hamburger open button — closed state (in header) */
.wp-block-navigation__responsive-container-open {
  width: 48px !important;
  height: 48px !important;
  padding: 12px !important;
  color: var(--wp--preset--color--text) !important;
}

.wp-block-navigation__responsive-container-open svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}

/* Close button (X) — open state (top-right of overlay) */
.wp-block-navigation__responsive-container-close {
  width: 48px !important;
  height: 48px !important;
  padding: 12px !important;
  color: var(--wp--preset--color--text) !important;
  top: 1rem !important;
  right: 1rem !important;
}

.wp-block-navigation__responsive-container-close svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}


/* ============================================================
   Article layout — two-column grid on desktop, single column on mobile
   FSE has no native primitive for "sidebar with responsive reflow to
   single column below a breakpoint." core/columns always stacks; it
   can't hide a column outright at a breakpoint. Custom grid it is.

   Breakpoint: 1024px (large tablet / small desktop threshold).
   Below that, sidebar is hidden entirely — related-posts content-end
   instance inside the article body provides equivalent content on mobile.

   Sidebar width: 300px. Gutter: 48px. Article stays at 720px
   (matches theme.json contentSize). Total: 720 + 48 + 300 = 1068px,
   fits within the 1240px wideSize with margin.
   ============================================================ */
.epicc-article-layout {
    display: block;
}

.epicc-article-layout > .epicc-article-content {
    /* Constrained to 720px by the inner group's layout; no width rule here. */
    min-width: 0; /* Prevents grid blowout from long code blocks / URLs */
}

.epicc-article-layout > .epicc-article-sidebar {
    display: none; /* Hidden on mobile; grid rules below re-enable on desktop */
}

@media (min-width: 1024px) {
    .epicc-article-layout {
        display: grid;
        grid-template-columns: minmax(0, 720px) 300px;
        gap: 48px;
        align-items: start;
    }

    .epicc-article-layout > .epicc-article-sidebar {
        display: block;
        /* Sticky sidebar — sticks to viewport top on scroll.
           top offset accounts for a small breathing gap; if the header
           becomes sticky later, set --epicc-header-offset on <body>
           and this will adapt automatically. */
        position: sticky;
        top: calc(var(--epicc-header-offset, 0px) + 24px);
        /* Constrain height so long sidebars can scroll independently. */
        max-height: calc(100vh - var(--epicc-header-offset, 0px) - 48px);
        overflow-y: auto;
        /* Subtle scrollbar; hide the ugly default while allowing scroll. */
        scrollbar-width: thin;
        scrollbar-color: var(--wp--preset--color--border) transparent;
    }

    .epicc-article-layout > .epicc-article-sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .epicc-article-layout > .epicc-article-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    .epicc-article-layout > .epicc-article-sidebar::-webkit-scrollbar-thumb {
        background: var(--wp--preset--color--border);
        border-radius: 3px;
    }
}
/* ============================================================
   Page template — post-content alignment fix
   FSE's core/post-content block in a page template renders at 
   contentSize even when children have alignwide/alignfull classes 
   and the auto-generated CSS rules would allow them to expand.
   
   Root cause: the post-content wrapper carries max-width: contentSize
   inline, and its aligned children can't visually exceed the parent's 
   width regardless of their own max-width.
   
   Fix: let post-content grow to wideSize by default, constrain 
   unaligned children back to contentSize, and let alignfull children 
   break out to viewport width via standard FSE negative-margin pattern.
   ============================================================ */
.wp-block-post-content.is-layout-constrained {
    max-width: var(--wp--style--global--wide-size);
}
.wp-block-post-content.is-layout-constrained > *:not(.alignwide):not(.alignfull) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}
.wp-block-post-content.is-layout-constrained > .alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================================
   RankMath TOC — in-content styling
   Restyles the default output (.wp-block-rank-math-toc-block) to match
   the site aesthetic. Desktop only — mobile relies on the docked button
   (the in-content TOC is redundant with the docked panel).

   Why here instead of a custom block: RankMath's block emits the
   ItemList JSON-LD schema in <head>, which is the whole reason we're
   using it. Building our own TOC block would forfeit that. Styling
   third-party block output is exactly what this file is for.

   Collapse state: managed by toc-behavior.js which adds .is-collapsed
   to the block on load (default state) and toggles it on kicker click.
   ============================================================ */

/* Hide the in-content TOC on mobile — the docked button handles nav
   there. Prevents two competing TOC UIs on the same viewport. */
@media (max-width: 1023.98px) {
    .wp-block-rank-math-toc-block {
        display: none;
    }
}

.wp-block-rank-math-toc-block {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    padding: var(--wp--preset--spacing--60);
    margin: var(--wp--preset--spacing--60) 0;
}

/* Kicker h2 — becomes the toggle button host. Reset default h2 spacing
   because the button inside handles its own layout. */
.wp-block-rank-math-toc-block > h2 {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1;
    /* Reset font sizing — the button inside sets its own type. */
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
}

/* The toggle button — inline-flex with label and chevron. */
.epicc-toc-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--accent);
    line-height: 1.2;
    transition: color 0.15s ease;
}

.epicc-toc-toggle:hover,
.epicc-toc-toggle:focus-visible {
    color: var(--wp--preset--color--accent-hover);
    outline: none;
}

.epicc-toc-toggle:focus-visible {
    /* Focus ring — mint outline around the button. */
    box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
    border-radius: 4px;
}

/* Chevron rotates when TOC is expanded. Default: pointing right
   (collapsed state). Expanded state: pointing down (rotated 90°).
   Actually — chevron is drawn as pointing down in the SVG (indicating
   "click to reveal below"), so we rotate -90° when collapsed. */
.epicc-toc-toggle__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.wp-block-rank-math-toc-block.is-collapsed .epicc-toc-toggle__chevron {
    transform: rotate(-90deg);
}

/* Respect prefers-reduced-motion — no chevron rotation animation. */
.epicc-reduced-motion .epicc-toc-toggle__chevron {
    transition: none;
}

/* Collapsed state hides the nav. */
.wp-block-rank-math-toc-block.is-collapsed nav {
    display: none;
}

/* Add breathing space above the nav when expanded. */
.wp-block-rank-math-toc-block:not(.is-collapsed) nav {
    margin-top: var(--wp--preset--spacing--40);
}

.wp-block-rank-math-toc-block nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wp-block-rank-math-toc-block nav > ul > li {
    margin: 0.375rem 0;
}

.wp-block-rank-math-toc-block nav ul ul {
    /* Nested list: left border visually anchors the hierarchy. */
    margin: 0.25rem 0 0.5rem 0;
    padding-left: var(--wp--preset--spacing--50);
    border-left: 1px solid var(--wp--preset--color--border);
}

.wp-block-rank-math-toc-block nav ul ul li {
    margin: 0.25rem 0;
}

.wp-block-rank-math-toc-block nav a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    transition: color 0.15s ease;
    display: inline-block;
}

.wp-block-rank-math-toc-block nav a:hover,
.wp-block-rank-math-toc-block nav a:focus-visible {
    color: var(--wp--preset--color--accent-hover);
    text-decoration: underline;
}

/* Scroll-spy: current section is highlighted mint + weight-500.
   Class is toggled by assets/public/toc-behavior.js. */
.wp-block-rank-math-toc-block nav a.is-current {
    color: var(--wp--preset--color--accent);
    font-weight: 500;
}


/* ============================================================
   TOC Dock — mobile/tablet only (<1024px)
   Compact button pinned to bottom-right corner. Click expands a panel
   upward. Above 1024px, the sidebar TOC carries navigation load, so
   the dock is hidden entirely.

   The .epicc-toc-dock element is created by toc-behavior.js and appended
   to <body>. If JS doesn't run (or is disabled), nothing appears —
   readers get just the in-content TOC, which is fully functional.
   ============================================================ */
.epicc-toc-dock {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: block;
}

@media (min-width: 1024px) {
    /* Hidden on desktop — sidebar TOC carries reading-nav on desktop. */
    .epicc-toc-dock {
        display: none;
    }
}

.epicc-toc-dock__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--wp--preset--color--surface-elevated);
    color: var(--wp--preset--color--text);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 9999px;
    padding: 0.625rem 1rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}

.epicc-toc-dock__button:hover,
.epicc-toc-dock__button:focus-visible {
    background: var(--wp--preset--color--surface);
    transform: translateY(-1px);
    outline: none;
}

.epicc-toc-dock__button:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--accent), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.epicc-toc-dock__icon {
    font-size: 1.1em;
    line-height: 1;
    color: var(--wp--preset--color--accent);
}

.epicc-toc-dock__panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: min(90vw, 360px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: var(--wp--preset--spacing--50);
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--border) transparent;
    animation: epicc-toc-panel-in 0.15s ease-out;
}

.epicc-toc-dock[data-open="true"] .epicc-toc-dock__panel {
    display: block;
}

.epicc-reduced-motion .epicc-toc-dock__panel {
    animation: none;
}

@keyframes epicc-toc-panel-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.epicc-toc-dock__panel::-webkit-scrollbar {
    width: 6px;
}
.epicc-toc-dock__panel::-webkit-scrollbar-track {
    background: transparent;
}
.epicc-toc-dock__panel::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--border);
    border-radius: 3px;
}

.epicc-toc-dock__panel-heading {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--accent);
    margin: 0 0 var(--wp--preset--spacing--40) 0;
    line-height: 1.2;
}

.epicc-toc-dock__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.epicc-toc-dock__panel > .epicc-toc-dock__panel-inner > nav > ul > li {
    margin: 0.375rem 0;
}

.epicc-toc-dock__panel ul ul {
    margin: 0.25rem 0 0.5rem 0;
    padding-left: var(--wp--preset--spacing--50);
    border-left: 1px solid var(--wp--preset--color--border);
}

.epicc-toc-dock__panel ul ul li {
    margin: 0.25rem 0;
}

.epicc-toc-dock__panel a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    transition: color 0.15s ease;
    display: inline-block;
}

.epicc-toc-dock__panel a:hover,
.epicc-toc-dock__panel a:focus-visible {
    color: var(--wp--preset--color--accent-hover);
    text-decoration: underline;
}

.epicc-toc-dock__panel a.is-current {
    color: var(--wp--preset--color--accent);
    font-weight: 500;
}


/* ============================================================
   Sidebar TOC — desktop clone of the RankMath TOC
   Populated by toc-behavior.js into the .epicc-toc-sidebar-mount
   container in single.html's sidebar aside. Present on all viewports
   where a TOC exists; the sidebar itself is hidden below 1024px, so
   this only renders visibly on desktop.

   Styling: plain content, no outer card. The sidebar column is itself
   the visual container. A card treatment here would nest boxes inside
   boxes.
   ============================================================ */
.epicc-toc-sidebar-mount:empty {
    /* Mount container renders nothing until populated. Zero visual weight
       on TOC-less articles. */
    display: none;
}

.epicc-toc-sidebar__heading {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--accent);
    margin: 0 0 var(--wp--preset--spacing--40) 0;
    line-height: 1.2;
}

.epicc-toc-sidebar__inner nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.epicc-toc-sidebar__inner nav > ul > li {
    margin: 0.375rem 0;
}

.epicc-toc-sidebar__inner nav ul ul {
    /* Nested list: left border visually anchors the hierarchy —
       same convention as the in-content and mobile TOCs. */
    margin: 0.25rem 0 0.5rem 0;
    padding-left: var(--wp--preset--spacing--50);
    border-left: 1px solid var(--wp--preset--color--border);
}

.epicc-toc-sidebar__inner nav ul ul li {
    margin: 0.25rem 0;
}

.epicc-toc-sidebar__inner nav a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    transition: color 0.15s ease;
    display: inline-block;
}

.epicc-toc-sidebar__inner nav a:hover,
.epicc-toc-sidebar__inner nav a:focus-visible {
    color: var(--wp--preset--color--accent-hover);
    text-decoration: underline;
}

.epicc-toc-sidebar__inner nav a.is-current {
    color: var(--wp--preset--color--accent);
    font-weight: 500;
}
/* ============================================================
   Content callouts — block style variations on core/group
   Two treatments for author-inserted content callouts:

   1. Key Takeaway (is-style-key-takeaway) — top mint stripe on
      surface-elevated background. First heading inside is styled
      as a UI kicker label.
   2. Accented (is-style-accented) — left gray stripe on surface
      background. Headings and body render as normal article prose.

   Both use the same 12px radius as cards, both live within the
   720px article reading column, both break up prose visually
   without competing with Deal Card's left-mint-stripe idiom.

   Registered via register_block_style() in functions.php.
   ============================================================ */

.wp-block-group.is-style-key-takeaway,
.wp-block-group.is-style-accented {
    border-radius: 12px;
    padding: var(--wp--preset--spacing--60);
    margin-top: var(--wp--preset--spacing--60);
    margin-bottom: var(--wp--preset--spacing--60);
}

/* --- Key Takeaway --------------------------------------------- */

.wp-block-group.is-style-key-takeaway {
    background: var(--wp--preset--color--surface-elevated);
    border: 1px solid var(--wp--preset--color--border);
    /* Top stripe: 3px mint band above the 1px border.
       Compensate other-side borders by using border-top separately. */
    border-top: 3px solid var(--wp--preset--color--accent);
}

/* First heading inside the box becomes a kicker label.
   Targets any heading level so authors aren't locked to one choice. */
.wp-block-group.is-style-key-takeaway > :first-child:is(h2, h3, h4, h5, h6),
.wp-block-group.is-style-key-takeaway > :first-child .wp-block-heading {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--accent);
    line-height: 1.2;
    margin: 0 0 var(--wp--preset--spacing--40) 0;
    padding: 0;
    border: 0;
}

/* --- Accented ------------------------------------------------- */

.wp-block-group.is-style-accented {
    background: var(--wp--preset--color--surface);
    border-left: 3px solid var(--wp--preset--color--text-tertiary);
    /* No other borders — the left stripe alone does the visual work,
       consistent with subtler "supporting content" feel. */
}

/* Headings inside Accented render as normal article headings —
   no kicker treatment, no override. Author's chosen heading level
   and text carry full semantic weight. */

/* --- Shared: last child margin cleanup ------------------------ */

/* Both callouts: prevent the last inner block's bottom margin from
   stacking with the callout's own padding-bottom. Standard pattern
   for containers with padding. */
.wp-block-group.is-style-key-takeaway > :last-child,
.wp-block-group.is-style-accented > :last-child {
    margin-bottom: 0;
}
/* ============================================================
   Styled Table — block style variation on core/table
   Applies to .wp-block-table.is-style-styled-table.

   Handles what core/table doesn't provide out of the box:
   - Visual differentiation of header row (3px mint underline)
   - Header column (first cell) styling
   - Row striping + hover state for scannability
   - Column borders: 1px in text-tertiary (dim, non-competitive)
   - Mobile: horizontal scroll with sticky first column
   - Scroll indicator: gradient fade at right edge of sticky column
   - Rounded outer corners via corner-cell radius (point 6-C approach)

   Notes:
   - border-collapse: separate is required for position: sticky to
     work on cells. Enforced with !important to defeat both UA
     defaults and WordPress's style.min.css rule.
   - Header row underline is declared AFTER general cell borders so
     it wins at the same specificity level (correct cascade order).
   - The gradient scroll indicator is a pseudo-element on each
     first-column cell — sits inside the cell so it moves with the
     row and doesn't need positioning gymnastics.

   Registered via register_block_style() in functions.php.
   ============================================================ */

/* Outer wrapper (block wrapper) — horizontal scroll container. */
.wp-block-table.is-style-styled-table {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--border) transparent;
    background: transparent;
    margin-top: var(--wp--preset--spacing--60);
    margin-bottom: var(--wp--preset--spacing--60);
    /* No border-radius here — we round the corner CELLS instead
       so overflow-x: auto isn't fighting overflow: hidden. */
}

.wp-block-table.is-style-styled-table::-webkit-scrollbar {
    height: 6px;
}
.wp-block-table.is-style-styled-table::-webkit-scrollbar-track {
    background: transparent;
}
.wp-block-table.is-style-styled-table::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--border);
    border-radius: 3px;
}

/* Inner table — the actual <table> element. */
.wp-block-table.is-style-styled-table table {
    /* border-collapse: separate is required for sticky cells to
       work. !important defeats both style.min.css (which sets
       border-collapse: collapse) and the UA default of separate
       with 2px spacing. */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
    /* Min-width prevents column smushing; triggers horizontal
       scroll on the wrapper when the table exceeds available width. */
    table-layout: auto;       /* Forces cells to adjust to content size */
    min-width: 100%;
}

/* --- Base cell styling ---------------------------------------
   Declared FIRST so subsequent header-specific rules can override.
   All borders explicit (color + width + style) to defeat WordPress's
   generic `.wp-block-table td { border: 1px solid }` which uses
   currentColor and appears bright against the dark theme. */

.wp-block-table.is-style-styled-table th,
.wp-block-table.is-style-styled-table td {
    padding: var(--wp--preset--spacing--40);
    text-align: center;
    vertical-align: top;
    word-wrap: normal;        /* Keeps words whole */
    overflow-wrap: normal;    /* Keeps words whole (modern standard) */
    word-break: normal;        /* Prevents arbitrary mid-word breaking */
    hyphens: none;             /* Disables automatic hyphenation */
    white-space: normal;       /* Allows normal line wrapping at spaces */
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    /* Explicit border color in text-tertiary (dim gray). Sets all
       four sides; specific rules below override as needed. */
    border: 1px solid var(--wp--preset--color--text-tertiary);
    /* Opaque background required for sticky cells to work. */
    background: var(--wp--preset--color--surface);
}

/* Prevent double-borders where cells meet — border on right + left
   would render as 2px. Kill the left border on all cells except
   the first in each row. */
.wp-block-table.is-style-styled-table th + th,
.wp-block-table.is-style-styled-table td + td {
    border-left: 0;
}

/* Similarly, kill top borders on all rows except the first. */
.wp-block-table.is-style-styled-table tbody tr + tr th,
.wp-block-table.is-style-styled-table tbody tr + tr td,
.wp-block-table.is-style-styled-table tfoot tr th,
.wp-block-table.is-style-styled-table tfoot tr td {
    border-top: 0;
}

/* --- Header row (thead) --------------------------------------
   Declared AFTER base cell rules so it wins on cascade. Mint accent
   line under the header. */

.wp-block-table.is-style-styled-table thead th,
.wp-block-table.is-style-styled-table thead td {
    font-weight: 600;
    color: var(--wp--preset--color--text);
    background: var(--wp--preset--color--surface);
    font-size: var(--wp--preset--font-size--small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Mint underline. 3px overrides the 1px text-tertiary bottom. */
    border-bottom: 3px solid var(--wp--preset--color--accent);
}

/* --- Row striping — subtle mint tint on even rows ------------
   Very low opacity so the tint reads as "highlighted" without
   competing with the header underline or the sticky column. */

.wp-block-table.is-style-styled-table tbody tr:nth-child(even) td,
.wp-block-table.is-style-styled-table tbody tr:nth-child(even) th {
    background: color-mix(
        in srgb,
        var(--wp--preset--color--accent) 3%,
        var(--wp--preset--color--surface)
    );
}

/* --- Row hover (tbody only) -----------------------------------
   15% mint tint. Overrides both surface and striped backgrounds. */

.wp-block-table.is-style-styled-table tbody tr:hover td,
.wp-block-table.is-style-styled-table tbody tr:hover th {
    background: color-mix(
        in srgb,
        var(--wp--preset--color--accent) 15%,
        var(--wp--preset--color--surface)
    );
    transition: background 0.15s ease;
}

/* Respect prefers-reduced-motion — no hover transition. */
.epicc-reduced-motion .wp-block-table.is-style-styled-table tbody tr:hover td,
.epicc-reduced-motion .wp-block-table.is-style-styled-table tbody tr:hover th {
    transition: none;
}

/* --- Header column (first cell of each body row) --------------
   Bold text signals "this row is about X". */

.wp-block-table.is-style-styled-table tbody tr > *:first-child {
    font-weight: 600;
    color: var(--wp--preset--color--text);
}

/* --- Sticky first column --------------------------------------
   Applies to both header row's first cell and each body row's
   first cell. Mint right border replaces the previous shadow
   (more visible in dark mode + signals scroll boundary clearly).
   Gradient scroll indicator sits inside the cell via ::after. */

.wp-block-table.is-style-styled-table thead th:first-child,
.wp-block-table.is-style-styled-table tbody tr > *:first-child,
.wp-block-table.is-style-styled-table tfoot tr > *:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    /* Mint right border — visible boundary between sticky and
       scrolling columns. Overrides the general text-tertiary
       border-right from base cell styling. */
    border-right: 2px solid var(--wp--preset--color--accent);
}

/* Top-left corner cell needs higher z-index so it sits above both
   the sticky row and sticky column when scrolling. */
.wp-block-table.is-style-styled-table thead th:first-child {
    z-index: 2;
}

/* Gradient scroll indicator — a fading strip on the right edge
   of every sticky first-column cell. Signals "content continues
   past this line" without decorative triangles. Positioned
   absolutely inside the cell (which is position: sticky, which
   creates a positioning context). */
.wp-block-table.is-style-styled-table tbody tr > *:first-child::after,
.wp-block-table.is-style-styled-table thead th:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 10px;
    /* Left-to-right fade from dark to transparent. The dark side
       hugs the mint border; the transparent side fades into the
       scrolling content behind. */
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent),
        transparent
    );
    pointer-events: none;
}

/* --- Rounded outer corners (point 6-C approach) ---------------
   Round the corner CELLS to match a 12px outer radius, without
   fighting overflow-x: auto on the wrapper. Four corner cells:
   top-left (first thead cell), top-right (last thead cell),
   bottom-left (first tfoot or last tbody cell), bottom-right
   (last tfoot or last tbody cell). */

.wp-block-table.is-style-styled-table thead tr:first-child th:first-child,
.wp-block-table.is-style-styled-table thead tr:first-child td:first-child {
    border-top-left-radius: 12px;
}
.wp-block-table.is-style-styled-table thead tr:first-child th:last-child,
.wp-block-table.is-style-styled-table thead tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

/* Bottom corners: apply to tfoot last row if present, else tbody last row. */
.wp-block-table.is-style-styled-table tfoot tr:last-child th:first-child,
.wp-block-table.is-style-styled-table tfoot tr:last-child td:first-child,
.wp-block-table.is-style-styled-table:not(:has(tfoot)) tbody tr:last-child th:first-child,
.wp-block-table.is-style-styled-table:not(:has(tfoot)) tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.wp-block-table.is-style-styled-table tfoot tr:last-child th:last-child,
.wp-block-table.is-style-styled-table tfoot tr:last-child td:last-child,
.wp-block-table.is-style-styled-table:not(:has(tfoot)) tbody tr:last-child th:last-child,
.wp-block-table.is-style-styled-table:not(:has(tfoot)) tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Clean the bottom of the last row — no border-bottom on the
   corner (radius will handle the visual edge). */
.wp-block-table.is-style-styled-table tbody tr:last-child td,
.wp-block-table.is-style-styled-table tbody tr:last-child th,
.wp-block-table.is-style-styled-table tfoot tr:last-child td,
.wp-block-table.is-style-styled-table tfoot tr:last-child th {
    border-bottom: 0;
}

/* ============================================================
   Mobile header compaction + hamburger far-right
   ------------------------------------------------------------
   Below 782px, the inner header group's flexWrap: nowrap
   (set as block attribute in header.html) keeps brand + CTA +
   hamburger on one row. Two things theme.json and block
   attributes can't do:
   1. Compact the CTA button on mobile only (theme.json can't
      target viewport-conditional element sizing)
   2. Visually reorder nav (hamburger) to far-right (DOM order
      is nav-then-CTA, which is correct for desktop menu links;
      mobile order swaps visually without DOM change)
   Same limitation category as gotcha #16 (nav link hover).
   ============================================================ */
@media (max-width: 781px) {
  /* Move nav (containing hamburger below 782px) after the CTA button */
  header.wp-block-template-part
    .wp-block-group.is-content-justification-right
    > .wp-block-navigation {
    order: 2;
  }

  /* Compact the CTA button on mobile: smaller font, tighter padding */
  header.wp-block-template-part .wp-block-button__link {
    font-size: var(--wp--preset--font-size--x-small);
    padding: 0.5rem 0.875rem;
  }
}