/*
Theme Name:   Northwest Bass (GeneratePress child)
Theme URI:    https://northwestbass.com
Description:  Child theme of GeneratePress that replicates the dt-the7 visual
              spec of the legacy staging site (typography, palette, header,
              footer, sidebar). Values are pulled from
              spec/staging/spec.json — keep this file in sync if the spec
              changes.
Author:       Wonderboy Creative
Template:     generatepress
Version:      0.1.0
Text Domain:  northwestbass
*/

/* ---------- Fonts ----------
 * Source spec lists Roboto + Helvetica + Arial fallback chains. We load Roboto
 * via Google Fonts (via functions.php) and use the spec's stacks verbatim.
 */

:root {
  /* Live-site tokens (see spec/DESIGN-TOKENS.md). Body and headings share
   * the Roboto stack — only the red intro tagline uses Helvetica. */
  --nwb-body-stack: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
  --nwb-heading-stack: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
  --nwb-tagline-stack: Helvetica, Arial, sans-serif;
  --nwb-body-color: #515151;
  --nwb-heading-color: #333333;
  --nwb-body-bg: #ffffff;
  --nwb-nav-color: #3a3a3a;
  --nwb-accent: #ec1c24;
  --nwb-accent-deep: #231f20;
  --nwb-muted: #777777;
  --nwb-divider: rgba(119, 119, 119, 0.15);
  --nwb-link: #1e73be;
  --nwb-link-hover: #000000;
}

/* ---------- Global typography ---------- */

body {
  background: var(--nwb-body-bg);
  color: var(--nwb-body-color);
  font-family: var(--nwb-body-stack);
  font-size: 16px;
  line-height: 27px;
  font-weight: 400;
}

p {
  font-family: var(--nwb-body-stack);
  font-size: 16px;
  line-height: 27px;
  color: var(--nwb-body-color);
}

/* Headings — Roboto 400 #333 matching the live site. Sizes per spec:
 *   h1 24/43.2  h2 26/30  h3 26/34  h4 18/27 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nwb-heading-stack);
  color: var(--nwb-heading-color);
  font-weight: 400;
  margin: 0 0 12px;
}
/* Heading sizes — captured from live. h2 is the "page title" style on
 * dt-the7 / WPBakery (.custom_head) — 36/42/700. h3 is the section
 * subhead — 26/34/400. h4 is body subhead — 18/27/400.
 *
 * NOTE: spec h2 at 36/700 applies inside .entry-content. Outside
 * .entry-content (e.g. footer widget titles), h2 keeps the GP defaults
 * so we don't accidentally enlarge widget titles. */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  color: var(--nwb-heading-color);
  font-family: var(--nwb-body-stack);
  /* Live h2/h3/h4 all carry a 10px margin-bottom — diff tool confirmed.
   * Override GP's 16px default. */
  margin-bottom: 10px;
}
.entry-content h1 { font-size: 24px; line-height: 43.2px; font-weight: 400; }
.entry-content h2 { font-size: 36px; line-height: 42px; font-weight: 700; }
.entry-content h3 { font-size: 26px; line-height: 34px; font-weight: 400; }
/* Live h4 is 20/28 weight 400 (NOT 18/27, NOT bold) — confirmed across
 * Tournaments hub + tournament details + Big Bass + Nixon's. */
.entry-content h4 { font-size: 20px; line-height: 28px; font-weight: 400; }
/* Body paragraph margin — live uses 10px between consecutive paragraphs
 * and 0px on the last paragraph in its container (the live `p:last-child`
 * behavior). Match both. Override GP's 24px default.
 * Same pattern applies to h2/h3/h4 when they're the last child of their
 * container — live emits 0px margin-bottom on the final heading. */
.entry-content p { margin-bottom: 10px; }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content h2:last-child,
.entry-content h3:last-child,
.entry-content h4:last-child { margin-bottom: 0; }

/* ---------- Content-rail width constraint (matches live) ----------
 * Live content rail is 759px (with sidebar) or 1056px (no sidebar).
 * Rebuild was 980/1360. Constrain .entry-content via max-width with
 * auto margins so it centers in GP's wider container. Apply EXCEPT on
 * (1) home page which has its own absolute layout, and (2) tournament
 * pages that use .nwb-tourn-page (its own 1056 wrapper).
 *
 * Selector specificity: `body.page .entry-content` beats `.entry-content`
 * everywhere except the home-layout rule which is `.home .entry-content`. */
body.page:not(.home) .entry-content {
  max-width: 1056px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* With-sidebar pages: live rail is 759px (smaller because of sidebar 275). */
body.page:not(.home).right-sidebar:not(.no-sidebar) .entry-content {
  max-width: 759px;
}
/* Outside-of-content fallback — keep h1-h4 cosmetically neutral so
 * widget titles, header titles, etc. don't pick up the entry-content
 * page-title h2 weight. */
h1, h2, h3, h4 {
  color: var(--nwb-heading-color);
}

/* `.custom_head` is the dt-the7/WPBakery class kept on the page-title
 * heading (e.g. "Northwest Bass Staff", "Northwest Bass Sponsors").
 * Live renders it at 36px / 700 weight. Override our global h2 rule. */
.entry-content .custom_head,
.entry-content h1.custom_head,
.entry-content h2.custom_head,
.entry-content h3.custom_head {
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 700 !important;
  color: var(--nwb-heading-color) !important;
  margin: 0 0 10px;       /* live = 10, not 16 */
}
@media (max-width: 768px) {
  .entry-content .custom_head,
  .entry-content h1.custom_head,
  .entry-content h2.custom_head,
  .entry-content h3.custom_head {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

/* Body links — blue, underlined; black on hover (live site). Scope
 * strictly to TEXT links inside the article body. Image-wrapper links
 * (figure > a > img, or any <a> whose first/only content is an <img>)
 * keep no decoration — matches the live site's image-card behaviour.
 * The migrated content uses `.rollover` on those wrappers, but we
 * detect them structurally with `:has(img)` so the rule covers any
 * image-anchor without depending on a class. */
.entry-content a:not(.nwb-button):not(:has(img)) {
  color: var(--nwb-link);
  text-decoration: underline;
}
.entry-content a:not(.nwb-button):not(:has(img)):hover {
  color: var(--nwb-link-hover);
}
.entry-content a:has(img) {
  color: inherit;
  text-decoration: none;
}
/* Sidebar / widget / footer / site-info links never get underline,
 * always muted. Boosted with `body` prefix so this beats the
 * `.entry-content a:not(...)` rule even when GP wraps the sidebar
 * inside #content. */
body .nwb-widget a,
body .widget-area a,
body .nwb-footer a,
body .site-info a {
  text-decoration: none !important;
}

/* The bold orange tagline on the homepage and similar callouts. */
.nwb-tagline {
  font-family: var(--nwb-heading-stack);
  font-size: 26px;
  line-height: 27px;
  font-weight: 900;
  color: var(--nwb-accent);
}

/* ---------- Header ----------
 * Spec values @ desktop:
 *   header.box: 1440 × 140.063, position (0, 0), bg #ffffff
 *   header.boxShadow: rgba(5, 38, 57, 0.05) 0px 1px 0px 0px
 *   header.border colors: #515151 (width 0 — color only)
 *   topBar inside header: 1440 × 40 @ (0, 0)
 *   logo: 300 × 48 @ (214, 66)
 *   nav[i] right-aligned: nav[0] HOME 49×21 @ (608.313, 79.563)
 *                          nav[4] CONTACT 76×21 @ (1125.438, 79.563)
 *   nav typography: Roboto 17/21 weight 500 #3a3a3a uppercase text-align: right
 */

.site-header {
  /* User direction: header is white at 80% opacity (rgba 1,1,1,0.8) so the
   * slider barely shows through, plus a faint inner shadow rising from
   * the bottom edge to lift the header off the hero. The outer 1px
   * shadow at the bottom stays — it carries the spec value. z-index 100
   * keeps the logo/nav painted above the slider. */
  background: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 100;
  box-shadow:
    inset 0 -16px 24px -8px rgba(0, 0, 0, 0.06),
    rgba(5, 38, 57, 0.05) 0px 1px 0px 0px;
  border-color: #515151;
}

.site-header .inside-header {
  /* Absolute-position the logo and nav so spec coordinates land exactly.
   * Flexbox + GP's grid-container CSS were producing an unexplained 31px
   * offset on each side. */
  position: relative !important;
  max-width: none !important;
  padding: 0 !important;
  min-height: 100px !important;
  display: block !important;
  width: 1440px !important;
  margin: 0 auto !important;
}

/* Logo: spec wants 300×48 at (214, 66). Header starts at y=40 (after top
 * bar), so logo is at y=26 relative to inside-header. */
.site-header .site-logo,
.site-header .site-branding,
.site-header .site-branding-container {
  position: absolute !important;
  top: 26px !important;
  left: 214px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 300px !important;
  height: 48px !important;
}
.site-header .site-logo a,
.site-header .site-logo a img,
.site-header .header-image {
  width: 300px !important;
  height: 48px !important;
  display: block;
}

/* Primary nav — Roboto 17/21 500 #3a3a3a uppercase, right-aligned, 21px tall items.
 * Absolutely positioned so the nav block's right edge lands at exactly x=1201
 * (CONTACT's box.right per spec). */
.main-navigation,
.site-header .main-navigation {
  position: absolute !important;
  top: 39.5px !important;             /* y=79.5 + 40.063 top bar = 79.563 */
  right: 238.578px !important;        /* tuned so CONTACT box.left = 1125.438 exactly (browser rounding) */
  left: auto !important;
  background: transparent !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 !important;
}
.main-navigation .inside-navigation {
  padding: 0 !important;
  min-height: 0 !important;
}
.main-navigation #site-navigation,
.main-navigation .main-nav {
  padding: 0;
}
.main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}
.main-navigation .main-nav > ul > li {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  background: transparent;
}
.main-navigation .menu li a,
.main-navigation .main-nav ul li a {
  font-family: var(--nwb-body-stack) !important;
  font-size: 17px !important;
  line-height: 21px !important;
  height: 21px !important;
  padding: 0 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  text-align: right !important;
  color: var(--nwb-nav-color) !important;
  background: transparent !important;
  display: inline-block;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
  color: var(--nwb-accent) !important;
}

/* Hide GeneratePress's dropdown-toggle span (it adds 30px padding via parent
 * CSS that we cannot reach without specificity hacks). Replace with our own
 * caret rendered as ::after so it contributes a known, spec-matched width.
 * Spec width for ABOUT (which has submenu): 80.563. Plain "About" text at
 * 17px Roboto 500 uppercase renders at ~55px → caret must contribute
 * ~25.5px. We size the ::after to match.
 */
.main-navigation .main-nav ul li.menu-item-has-children > a > .dropdown-menu-toggle {
  display: none !important;
}
.main-navigation .main-nav ul li.menu-item-has-children > a::after {
  content: '\25BE';                   /* small down triangle */
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  line-height: 21px;
  vertical-align: middle;
  /* Spec ABOUT width 80.563; text alone is ~55px; chevron width
   * 80.563 - 55 - 8 (margin) = 17.563. */
  width: 17.563px;
  text-align: left;
}

/* ---------- Dropdown submenu (staging's Groovy Menu look) ----------
 * Measured from staging:
 *   bg #ffffff, shadow rgba(0,0,0,0.1) 0 8px 15px 0
 *   width 230px, padding 0
 *   items: 14px Roboto 400 #6e6e6f uppercase, padding 12px 24px
 *   1px red accent border at top (the dt-the7 brand stripe)
 */
.main-navigation .main-nav ul ul,
.main-navigation .main-nav ul li:hover > ul,
.main-navigation .main-nav ul li.sfHover > ul {
  background: #ffffff !important;
  width: 230px !important;
  min-width: 230px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--nwb-accent) !important;
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1) !important;
  list-style: none;
  display: block;
  position: absolute;
  top: 100%;
  /* GP hides submenus with opacity:0/visibility:hidden by default — make
   * the hover/focus state pop them open the same way Groovy Menu does. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  transform: translateY(4px);
  pointer-events: none;
  z-index: 200;
}
.main-navigation .main-nav ul li:hover > ul,
.main-navigation .main-nav ul li:focus-within > ul,
.main-navigation .main-nav ul li.sfHover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.main-navigation .main-nav ul ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  background: transparent;
  width: 100%;
}
.main-navigation .main-nav ul ul li a,
.main-navigation .menu ul ul li a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  /* box-sizing border-box so width:100% + 24px L/R padding fits inside the
   * parent <ul>'s 230px width — without this, the hover background paints
   * 48px past the dropdown's right edge. */
  box-sizing: border-box !important;
  padding: 12px 24px !important;
  margin: 0 !important;
  font-family: var(--nwb-body-stack) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #6e6e6f !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.main-navigation .main-nav ul ul li:last-child a {
  border-bottom: 0 !important;
}
/* Hover effects only on devices that actually hover (mice/trackpads).
 * `@media (hover: hover)` keeps the gray hover bar off iOS Safari and
 * Android touchscreens, where :hover sticks after a tap and reads as a
 * weird stuck state. */
@media (hover: hover) {
  .main-navigation .main-nav ul ul li a:hover,
  .main-navigation .main-nav ul ul li a:focus {
    color: var(--nwb-accent) !important;
    background: #f8f8f8 !important;
  }
}
.main-navigation .main-nav ul ul li a:focus-visible {
  color: var(--nwb-accent) !important;
  background: #f8f8f8 !important;
}
/* Hide the caret on the parent <a> when the dropdown is open (purely
 * visual — keeps the hover indicator subtle). */
.main-navigation .main-nav ul li.menu-item-has-children:hover > a::after,
.main-navigation .main-nav ul li.menu-item-has-children.sfHover > a::after {
  color: var(--nwb-accent);
}

/* ---------- Footer ----------
 * 3-column stylish footer rendered into .site-footer before the existing
 * .site-info copyright bar:
 *   left   logo + mailing address + email + phone
 *   center stacked main menu
 *   right  about blurb + social-media icons
 *
 * Brand palette: dark base #2a2a2a, accent red #ec1c24, white text. The
 * bottom copyright row keeps the original 14px Roboto on a slightly
 * lighter dark.
 */

.site-footer {
  background: transparent;
}
.nwb-footer {
  background: #2a2a2a;
  color: #d8d8d8;
  font-family: var(--nwb-body-stack);
}
.nwb-footer__inner {
  max-width: 1248px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  align-items: flex-start;
}
.nwb-footer__col {
  min-width: 0;
}
.nwb-footer__heading {
  font-family: var(--nwb-heading-stack);
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ffffff;
  margin: 0 0 18px;
  padding-bottom: 12px;
  position: relative;
}
.nwb-footer__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--nwb-accent);
}

/* ----- Left column ----- */
.nwb-footer__logo {
  display: inline-block;
  margin-bottom: 22px;
  text-decoration: none;
}
.nwb-footer__logo img,
.nwb-footer__logo .nwb-footer__logo-img {
  display: block;
  width: 240px;
  height: auto;
  filter: brightness(0) invert(1);                  /* logo white on dark */
}
.nwb-footer__logo-text {
  font-family: var(--nwb-heading-stack);
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nwb-footer__address,
.nwb-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 22px;
  color: #d8d8d8;
  font-style: normal;
  text-decoration: none;
}
.nwb-footer__contact:hover,
.nwb-footer__contact:focus {
  color: #ffffff;
}
.nwb-footer__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  color: var(--nwb-accent);
}

/* ----- Center column (stacked menu) ----- */
.nwb-footer__nav .nwb-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nwb-footer__nav .nwb-footer__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nwb-footer__nav .nwb-footer__menu li a {
  display: inline-block;
  padding: 7px 0;
  font-family: var(--nwb-body-stack);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #d8d8d8;
  text-decoration: none;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.nwb-footer__nav .nwb-footer__menu li a::before {
  content: '\203A';                                  /* › */
  display: inline-block;
  width: 14px;
  color: var(--nwb-accent);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.nwb-footer__nav .nwb-footer__menu li a:hover,
.nwb-footer__nav .nwb-footer__menu li a:focus {
  color: #ffffff;
  padding-left: 4px;
}
.nwb-footer__nav .nwb-footer__menu li a:hover::before,
.nwb-footer__nav .nwb-footer__menu li a:focus::before {
  opacity: 1;
}
/* Hide sub-menus and dropdown carets in the footer menu. */
.nwb-footer__nav .nwb-footer__menu .sub-menu,
.nwb-footer__nav .nwb-footer__menu .dropdown-menu-toggle {
  display: none !important;
}
.nwb-footer__nav .nwb-footer__menu li.menu-item-has-children > a::after {
  display: none !important;
}

/* ----- Right column (blurb + social) ----- */
.nwb-footer__blurb {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 24px;
  color: #c0c0c0;
}
.nwb-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.nwb-footer__social li { margin: 0; padding: 0; list-style: none; }
.nwb-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #d8d8d8;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nwb-footer__social a:hover,
.nwb-footer__social a:focus {
  background: var(--nwb-accent);
  color: #ffffff;
  transform: translateY(-2px);
}
.nwb-footer__social a svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ---------- Copyright bar (replaces GP's default site-info) ---------- */
.site-info {
  background: #1d1d1d !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.site-info .inside-site-info {
  max-width: 1248px;
  margin: 0 auto;
  padding: 18px 24px !important;
}
.site-info .copyright-bar,
.site-info .nwb-footer__copyright {
  font-family: var(--nwb-body-stack);
  font-size: 13px;
  line-height: 20px;
  color: #8c8c8c;
  text-align: center;
}
.site-info a { color: #b0b0b0; }
.site-info a:hover { color: #ffffff; }

/* ----- Footer responsive ----- */
@media (max-width: 1024px) {
  .nwb-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 24px 40px;
  }
  .nwb-footer__col--right { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .nwb-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 20px 32px;
  }
  .nwb-footer__col--right { grid-column: auto; }
}

/* ---------- Sidebar (Recent News + Weather widgets) ----------
 * Spec sidebar at x=973.453 width=274.547 height=597, padding-left=44
 * padding-right=22, border-left 1px solid #77777726. Title 14px Roboto
 * 400 #777777 line-height 25 (spec says fontWeight:400 textTransform:none).
 * Items 16px 41px tall, padding-right 15, color #777777.
 */
/* GLOBAL sidebar visual styling — applies to EVERY page with a right
 * sidebar, not just Home. Matches live's `.sidebar-right .sidebar`
 * rule: 1px hairline divider between content and sidebar, padding
 * 0/22/0/44. The home page's absolute layout below pins position/width
 * separately so this rule sits side-by-side with the .home overrides
 * without conflicting. The `body` prefix bumps specificity over GP's
 * default `.widget-area` rule so we don't need !important on the
 * border-left. */
body .widget-area.sidebar.is-right-sidebar,
body .site-content .widget-area.is-right-sidebar,
body #right-sidebar.widget-area {
  border-left: 1px solid rgba(119, 119, 119, 0.15);
  padding: 0 22px 0 44px;
  box-sizing: border-box;
}
.widget-area .widget {
  margin: 0;
  padding: 0;
}
/* Sidebar widget title (Recent News, Weather) — live values:
 *   font Roboto 18/27 weight 400 #333, no text-transform, margin-bottom 15px.
 * Was missing entirely on rebuild because the PHP hook didn't emit an h3. */
.widget-area .widget-title,
.widget-area .nwb-widget .widget-title {
  font-family: var(--nwb-body-stack);
  font-weight: 400;
  color: var(--nwb-heading-color);
  text-transform: none;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: normal;
  margin: 0 0 15px;
  padding: 0;
}
.widget-area .widget a {
  color: var(--nwb-muted);
  text-decoration: none;
}
.widget-area .widget a:hover {
  color: var(--nwb-accent);
}

/* Recent News widget — 4 vertical link items with hairline dividers
 * between (rgba(119,119,119,0.15)). First item has no top border,
 * subsequent items get padding-top 10 + 1px gray divider, matching the
 * live dt-the7 .list-divider treatment. */
.nwb-widget--recent-news .nwb-recent-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Recent News list items — live shows padding-top: 10 only (no
 * padding-bottom) with a 1px rgba(119,119,119,0.15) divider above each
 * item, first-child suppressed. */
.nwb-widget--recent-news .nwb-recent-news__list li {
  margin: 0;
  padding: 10px 0 0 0;
  border-top: 1px solid rgba(119, 119, 119, 0.15);
  list-style: none;
}
.nwb-widget--recent-news .nwb-recent-news__list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.nwb-widget--recent-news .nwb-recent-news__list li a {
  display: block;
  font-family: var(--nwb-body-stack);
  font-size: 14px;
  line-height: 25px;
  color: var(--nwb-muted);
  text-decoration: none;
}
.nwb-widget--recent-news .nwb-recent-news__list li a:hover {
  color: var(--nwb-accent);
}

/* Weather widget — spec captures:
 *   image (50×50) at top centered
 *   "CLEAR SKY"   12px Roboto upper #b4b4b4 centered
 *   "13°C"        60px Helvetica bold #525b6e centered
 *   "30 MAY, 2026" 12px Roboto upper #b4b4b4 centered
 *   "Umatilla, US" 12px Roboto upper #b4b4b4 centered
 */
.nwb-widget--weather {
  text-align: center;
  margin-top: 24px;
}
.nwb-widget--weather .nwb-weather__icon {
  display: block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
}
.nwb-widget--weather > span {
  display: block;
  font-family: var(--nwb-body-stack);
  font-size: 12px;
  line-height: 25px;
  font-weight: 400;
  text-transform: uppercase;
  color: #b4b4b4;
  text-align: center;
}
.nwb-widget--weather .nwb-weather__temp {
  font-family: var(--nwb-heading-stack);
  font-size: 60px !important;
  line-height: 80px !important;
  font-weight: 700 !important;
  color: #525b6e !important;
  text-transform: none !important;
  margin: 4px 0;
}

/* Force the sidebar to the spec-measured position. The home-layout
 * widget-area rule above pins it at top: 510, left: 973.453, width
 * 274.547. Apply spec padding/border here too. */
.home .site-content .widget-area.is-right-sidebar {
  padding: 0 22px 0 44px !important;
  border-left: 1px solid #77777726 !important;
  box-sizing: content-box !important;
}

/* ---------- Content layout ----------
 * Spec on homepage:
 *   content sections at x=192, width=759.438, internal padding 22px
 *   sidebar at x=973, width=274.547
 *   first section at y=650.063 (510px below header's bottom-edge at y=140.063)
 * The container is 1248 wide centered at viewport, with 192 left + 274 sidebar
 * + 22 gap + 759 content fitting inside. We pin the .content-area and
 * .widget-area absolutely so spec coordinates land exactly.
 */
.home .site-content {
  position: relative;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: none !important;
  width: 1440px !important;
}
.home .site-content .content-area {
  position: relative;
  /* Spec: section box.left=192, but section.margin.left=-22 — meaning the
   * section escapes 22px out of its parent. Parent (.content-area /
   * .entry-content) must therefore be at x=214 width=715 so the section's
   * visible edge lands at 192. */
  width: 715.438px !important;
  margin-left: 214px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.home .site-content .widget-area.is-right-sidebar {
  position: absolute !important;
  /* Sidebar starts 630px below site-content. Slider now lives at
   * (140, 600) so its bottom edge is at y=740. site-content begins at
   * y=140 (just below header), so top: 630 → sidebar y=770, 30px below
   * the slider end. */
  top: 630px !important;
  left: 973.453px !important;
  width: 274.547px !important;
  margin: 0 !important;
  /* Spec sidebar box.width = 274.547 INCLUDING padding (the
   * getBoundingClientRect captures the visible width). So box-sizing
   * border-box: 274.547 contains the 44 left + 22 right padding,
   * leaving 208.547 of content. */
  padding: 0 22px 0 44px !important;
  border-left: 1px solid #77777726 !important;
  box-sizing: border-box !important;
  float: none !important;
}
/* Push the first content section down so it starts at y=770 — that's
 * 30px below the slider's bottom edge at y=740. Slider sits flush with
 * the header now (top: 140), so total push from site-content top is
 * 600 (slider) + 30 (gap) = 630. */
.home .entry-content {
  padding-top: 630px !important;
}
/* Section spec — sections escape their parent's 715-wide rail by 22px each
 * side via negative margins. Their direct children are content-width
 * (715.438 = 759.438 - 44) and have 22px outer margin to sit back inside
 * the parent's rail (at x=214 to x=929). */
.home .entry-content > * {
  max-width: 759.438px !important;
}
.home .entry-content .wf-container {
  margin: 0 -22px !important;
  width: 759.438px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative;
}
.home .entry-content .wf-container > * {
  margin-left: 22px !important;
  margin-right: 22px !important;
  width: 715.438px !important;
  max-width: 715.438px !important;
  box-sizing: border-box !important;
}
/* Paragraph margins — spec has 10px between paragraphs in section[0],
 * 0 below the last paragraph ("Tight lines!"). GP defaults paragraphs
 * to 24px. Keep text-align unset so it stays at the browser default
 * `start` — matches spec for body paragraphs. */
.home .entry-content .wf-container p {
  margin-bottom: 10px !important;
  margin-top: 0 !important;
  width: 715.438px !important;
  max-width: 715.438px !important;
}
.home .entry-content .wf-container p:last-of-type {
  margin-bottom: 0 !important;
}
.home .entry-content .wf-container > *:last-child {
  margin-bottom: 0 !important;
}
/* Image cards in section[1] have text-align: left (spec). */
.home .entry-content > .wf-container:nth-of-type(2) figure a {
  text-align: left;
}

/* GP defaults <hr> to margin: 40px 0; spec hr is 2px tall (border 0 +
 * height 2 via border-top: 2px). */
.home .entry-content .wf-container hr {
  margin: 0 !important;
  border: 0 !important;
  border-top: 2px solid #cccccc !important;
  height: 0;
}

/* Section[1] (the 2nd .wf-container in source — 3rd div sibling because
 * .nwb-slider precedes them): 2-column row, each column 209.141 wide,
 * separated by a 44px gap. The .wf-container itself is the flex
 * container; its 2 direct children are the columns. */
.home .entry-content > .wf-container:nth-of-type(2) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 44px !important;
  width: 759.438px !important;
  padding: 0 !important;
  margin: 0 -22px !important;
  box-sizing: border-box !important;
}
.home .entry-content > .wf-container:nth-of-type(2) > * {
  flex: 0 0 253px !important;
  width: 253px !important;
  max-width: 253px !important;
  margin: 0 !important;
}
/* Push the first column 22px inside section.left so col1 lands at x=214
 * (spec). */
.home .entry-content > .wf-container:nth-of-type(2) > *:first-child {
  margin-left: 22px !important;
}
/* Image cards inside the cards row — 209×156 box, rounded 4px,
 * dark border/text. The inner wrapper that was vc_column-inner becomes
 * a normal block in the column. */
.home .entry-content > .wf-container:nth-of-type(2) figure {
  margin: 0 !important;
  width: 253px !important;
  height: 156.844px !important;
  border-radius: 4px;
  overflow: hidden;
}
.home .entry-content > .wf-container:nth-of-type(2) figure a {
  display: block;
  width: 100%;
  height: 100%;
  border: 0 !important;          /* spec border.width = 0, color #231f20 */
  border-color: #231f20 !important;
  border-radius: 4px;
  color: #231f20 !important;
  line-height: 0;
  overflow: hidden;
}
.home .entry-content > .wf-container:nth-of-type(2) figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home .entry-content > .wf-container:nth-of-type(2) p {
  width: 253px !important;
  max-width: 253px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------- Slider ----------
 * Replaces revslider. Two-slide crossfade, 1440×600 desktop (per spec).
 * Positioned absolutely above the content so it doesn't push the body
 * down. Spec captures the slider at y=70.063 width=1440 height=600.
 */

.nwb-slider {
  position: absolute;
  /* User direction: slider top sits at the bottom of the header — was
   * 70.063 (overlapping the header). Header bottom = 140.063, so slider
   * starts there and extends 600px down. */
  top: 140.063px;
  left: 0;
  /* Stretch edge-to-edge of the viewport regardless of viewport width. */
  width: 100vw;
  height: 600px;
  overflow: hidden;
  background: #000;
  z-index: 0;
  margin: 0;
  padding: 0;
}
.nwb-slider__slide,
.nwb-slider__slide img {
  margin: 0;
  padding: 0;
}

.nwb-slider__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.nwb-slider__slide--active { opacity: 1; }

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

@media (max-width: 1023px) {
  .nwb-slider { height: 494px; }
}

@media (max-width: 767px) {
  .nwb-slider { height: 313px; }
}

/* ---------- Cards (homepage Tournament/Registration) ---------- */

.nwb-card {
  display: block;
  width: 100%;
  height: auto;
}

.nwb-card--rounded {
  border-radius: 4px;
}

/* ---------- Tagline span override ----------
 * Replicates staging's inline-styled <span style="font-family: Helvetica..."> on
 * the homepage's "Northwest Bass is the premier..." text.
 */

.nwb-tagline {
  font-family: var(--nwb-heading-stack);
  color: var(--nwb-accent);
  font-weight: 900;
  font-size: 26px;
  line-height: 27px;
}

.nwb-tagline-wrap em {
  font-style: italic;
}

/* ---------- Top contact bar ----------
 * Spec: full viewport width, 40px tall, #3f3f3f bg; three items (email,
 * phone, address) centered horizontally, Roboto 13px white.
 */

.nwb-top-bar {
  background: #3f3f3f;
  color: #ffffff;
  font-family: var(--nwb-body-stack);
  font-size: 13px;
  line-height: 24px;
  width: 100%;
  /* Spec measures staging's top bar at 40.063px — 0.063 fractional pixel
   * comes from font-baseline rendering. Lock our height to match. */
  height: 40.063px;
}

.nwb-top-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 8px 20px;
  flex-wrap: wrap;
}

.nwb-top-bar__item {
  /* !important needed to override GeneratePress's `.site-header a` dynamic
   * rule which sets #3a3a3a for every link inside <header>. */
  color: #ffffff !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nwb-body-stack);
  font-size: 13px;
  line-height: 24px;
}

.nwb-top-bar__item:hover { color: #ffffff !important; opacity: 0.85; }

.nwb-top-bar__icon {
  display: inline-flex;
  align-items: center;
  color: var(--nwb-accent);
}

.nwb-top-bar__text {
  font-family: var(--nwb-body-stack);
  font-size: 13px;
  line-height: 24px;
  color: #ffffff;
}

/* Spec measures staging's top bar at 40px @ desktop and 54px @ tablet — the
 * items wrap to a second line at narrower viewports. We match by giving
 * .nwb-top-bar__inner generous gap so the row breaks before the viewport
 * truncates. Font size stays 13px at every breakpoint per the spec.
 */
@media (max-width: 900px) {
  .nwb-top-bar__inner { gap: 16px; padding: 6px 16px; }
}
@media (max-width: 767px) {
  .nwb-top-bar__inner { gap: 14px; padding: 6px 12px; }
}

/* ---------- Resets / overrides ----------
 * GeneratePress's defaults need to be quieted in a few places so the
 * dt-the7 spec values win.
 */

.entry-title { margin-top: 0; }

/* =====================================================================
 * Arrow-bullet list — replicates dt-the7's
 * .standard-arrow.list-divider.bullet-top treatment used on About,
 * History, etc. Apply this class on the <ul> (and optionally
 * .list-divider for the hairline between items).
 * ===================================================================== */
/* Two equivalent selectors:
 *   .nwb-arrow-list — what we author by hand on new pages
 *   .standard-arrow.list-divider.bullet-top — the wrapper class that
 *     survived dt-the7's WPBakery-render and is already present on
 *     migrated About/History/Tournaments pages.
 */
.nwb-arrow-list,
.entry-content .nwb-arrow-list,
.entry-content ul.nwb-arrow-list,
.entry-content .standard-arrow.list-divider.bullet-top ul,
.entry-content .standard-arrow ul,
.standard-arrow.list-divider.bullet-top ul {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
}
/* Bare .standard-arrow li — no divider lines, just padding-left for the
 * arrow + 10px bottom margin between items. Live tournament-page details
 * use this version (padding-top/bottom both 0). */
.entry-content .standard-arrow ul li {
  position: relative;
  padding: 0 0 0 24px;
  margin: 0 0 10px;
  list-style: none;
  border-top: 0;
}
/* `.list-divider.bullet-top` variant — adds the hairline divider + extra
 * vertical padding. Used on About "Things to know" list. */
.nwb-arrow-list li,
.entry-content .standard-arrow.list-divider.bullet-top ul li,
.standard-arrow.list-divider.bullet-top ul li {
  position: relative;
  padding: 9px 0 10px 24px;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--nwb-divider);
}
.nwb-arrow-list li:first-child,
.entry-content .standard-arrow.list-divider.bullet-top ul li:first-child,
.standard-arrow.list-divider.bullet-top ul li:first-child {
  padding-top: 0;
  border-top: 0;
}
.nwb-arrow-list li::before,
.entry-content .standard-arrow.list-divider.bullet-top ul li::before,
.entry-content .standard-arrow ul li::before,
.standard-arrow.list-divider.bullet-top ul li::before {
  position: absolute;
  top: 14.5px;
  left: 0;
  width: 13px;
  height: 13px;
  content: '';
  background: linear-gradient(30deg, var(--nwb-accent-deep) 0%, var(--nwb-accent) 100%);
}
.nwb-arrow-list li:first-child::before,
.entry-content .standard-arrow.list-divider.bullet-top ul li:first-child::before,
.standard-arrow.list-divider.bullet-top ul li:first-child::before {
  top: 6.5px;
}
.nwb-arrow-list li::after,
.entry-content .standard-arrow.list-divider.bullet-top ul li::after,
.entry-content .standard-arrow ul li::after,
.standard-arrow.list-divider.bullet-top ul li::after {
  position: absolute;
  top: 14.5px;
  left: 0;
  width: 13px;
  height: 13px;
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="white"><polygon points="5.159,2.802 8.841,6.57 5.314,10.291 4.237,9.254 6.897,6.51 4.159,3.833"/></svg>');
  background-repeat: no-repeat;
  background-size: 13px 13px;
}
.nwb-arrow-list li:first-child::after,
.entry-content .standard-arrow.list-divider.bullet-top ul li:first-child::after,
.standard-arrow.list-divider.bullet-top ul li:first-child::after {
  top: 6.5px;
}

/* =====================================================================
 * About page (page-id-19) — top section is a 2-column grid:
 *   LEFT: "About Northwest Bass" heading + description
 *   RIGHT: "Northwest Bass, LLC" heading + address + hours
 * The "Things to know" wf-container below stays full-width.
 * ===================================================================== */
.page-id-19 .entry-content > .wf-container:first-of-type {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* match live 704/352 cols */
  gap: 0;
  align-items: start;
  margin-bottom: 32px;
}
.page-id-19 .entry-content > .wf-container:first-of-type > * {
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .page-id-19 .entry-content > .wf-container:first-of-type {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =====================================================================
 * Staff page (page-id-358) — 3-column grid with circular thumbnails.
 * The staff cards live inside the SECOND .wf-container in entry-content
 * (the first holds the heading + intro paragraph). The inner wrapper
 * becomes the flex row; its direct children are the 3 staff columns.
 * Each card has a 220×165 circular photo + name + title centered.
 * ===================================================================== */
.page-id-358 .entry-content .wf-container:has(figure) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;   /* live = 4 cols (3 staff + 1 empty) */
  gap: 0 !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}
.page-id-358 .entry-content .wf-container:has(figure) > * {
  margin: 0 !important;
  padding: 0 22px;
  box-sizing: border-box;
  text-align: center;
}

/* =====================================================================
 * Sponsors page (page-id-383) — Nixon's full-width on top, then
 * 3-across grids underneath. wf-containers with 1 direct child stay
 * single-column (Nixon's, the heading); wf-containers with 2+ direct
 * children become 3-column flex rows.
 * ===================================================================== */
.page-id-383 .entry-content .wf-container:has(> *:nth-child(2)) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;  /* live = 3 cols @ 352px each */
  gap: 0 !important;
  align-items: flex-start !important;
  margin-bottom: 32px !important;
}
.page-id-383 .entry-content .wf-container:has(> *:nth-child(2)) > * {
  margin: 0 !important;
  padding: 0 22px;
  box-sizing: border-box;
  text-align: center;
}

/* Sponsor logo + description treatment. Center logos, cap their width so
 * each sponsor card reads consistently. */
.page-id-383 .entry-content figure {
  margin: 0 auto 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.page-id-383 .entry-content figure img {
  max-width: 100% !important;
  width: auto !important;
  max-height: 110px !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}
.page-id-383 .entry-content p {
  text-align: left;
  font-size: 16px;        /* live = 16/27, not 15/24 */
  line-height: 27px;
  margin: 0 0 10px;
}
/* Nixon's wf-container — keep full width, bigger logo. */
.page-id-383 .entry-content .wf-container:nth-of-type(2) {
  margin-bottom: 40px;
}
.page-id-383 .entry-content .wf-container:nth-of-type(2) figure img {
  max-width: 480px !important;
  max-height: 180px !important;
}
.page-id-383 .entry-content .wf-container:nth-of-type(2) p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* =====================================================================
 * Tournaments hub (page-id-5337) — 3 visible columns at desktop matching
 * the live layout. See spec/TOURNAMENTS-LAYOUT.md.
 *
 *   ┌ TEXT-COL-1 ─┬ TEXT-COL-2 ─┬ RIGHT ──────┐
 *   │ Team Circuit│ 2026 Format │ Qualifiers  │
 *   │ Closed Wtrs │ Registration│ ┌──┬──┐     │
 *   │ AIS         │ Driver's    │ │BL│PH│     │
 *   │             │ Polygraph   │ ├──┼──┤     │
 *   │             │             │ │LR│UM│     │
 *   │             │             │ └──┴──┘     │
 *   │             │             │ Championship│
 *   │             │             │ hero        │
 *   └─────────────┴─────────────┴─────────────┘
 *
 * The migrated content gives us the structure for free: the top
 * .wf-container has TWO direct child divs — the first contains the 7
 * text sections, the second contains the qualifier + championship
 * subtree. Outer 2-column grid lays them side by side; the LEFT child
 * then uses CSS multi-column to render its 7 text sections as 2 visible
 * text columns.
 * ===================================================================== */

/* Override the global homepage-content max-width so the tournaments page
 * gets the full content rail. */
.page-id-5337 .entry-content {
  padding-top: 0 !important;
}
.page-id-5337 .entry-content > * {
  max-width: 100% !important;
}
.page-id-5337 .entry-content .wf-container {
  margin: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}

/* TOP SECTION — outer 2-column grid (LEFT text-pair + RIGHT image pane) */
.page-id-5337 .entry-content > .wf-container:first-of-type {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;   /* match live 506/253 cols edge-to-edge */
  align-items: start;
  margin-bottom: 30px !important;
}
/* Internal padding on each outer column so the visible gutter between
 * the LEFT (two text columns) and RIGHT (qualifiers grid) matches live. */
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1),
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) {
  padding-right: 15px;
  box-sizing: border-box;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) {
  padding-right: 0;
  padding-left: 15px;
}

/* LEFT child of the top section — split into 2 visible text columns via
 * CSS multi-column. The migrated LEFT content nests 5 wrapper divs deep
 * (an outer .wf-container at L>0>0 holds two big content blocks at
 * L>0>0>0 and L>0>0>1 each containing ~10 children: h4 + image + para +
 * h4 + para …). The default `break-inside: avoid` on .wf-container
 * blocks the column flow, so we explicitly allow breaks at every wrapper
 * level and only protect h4 + its immediately-following content from
 * splitting. */
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) {
  column-count: 2;
  column-gap: 30px;
  /* `balance` distributes the 7 text sections evenly across both columns
   * (4 in col 1, 3 in col 2). Live's split is 3/4; ours ends up 4/3 due
   * to slight content-length differences in the rebuild. The 3-column
   * visible shape (TEXT-COL-1 + TEXT-COL-2 + RIGHT) matches. */
  column-fill: balance;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1),
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) * {
  break-inside: auto;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) h3,
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) h4 {
  break-after: avoid-column;
  break-inside: avoid;
  margin-top: 0;
  margin-bottom: 10px;     /* live = 10, not 6 */
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) p {
  break-inside: avoid-column;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) .wf-container {
  margin-bottom: 14px !important;
}

/* The Vexus thumbnail inside Team Circuit Info — cap so it doesn't
 * blow out the narrow text column. */
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) figure {
  margin: 8px 0 12px;
  max-width: 200px;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) figure img {
  max-width: 200px !important;
  height: auto !important;
  border-radius: 2px;
}

/* RIGHT child of the top section — qualifier 2×2 sub-grid + championship
 * hero stacked beneath. The qualifier wf-containers live inside an
 * .ult-content-box wrapper that survived migration. */
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) h3 {
  margin: 12px 0 10px;
  font-size: 20px;
  line-height: 26px;
}
.page-id-5337 .entry-content .ult-content-box > .wf-container {
  margin-bottom: 14px !important;
}

/* Qualifier wf-containers — those with ≥2 direct child divs become a
 * 2-column grid. The first child of a 3-child container is the heading
 * row; span it across both columns. */
.page-id-5337 .entry-content .ult-content-box > .wf-container:has(> div:nth-child(2)) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 14px !important;
  align-items: start;
}
.page-id-5337 .entry-content .ult-content-box > .wf-container:has(> div:nth-child(2)) > div:first-child:not(:has(figure)) {
  grid-column: 1 / -1;
  margin: 0;
}

/* Figure sizing inside the RIGHT column.
 * Live values (measured 2026-06-04):
 *   qualifier thumbnails 43×32 (4:3 aspect, tiny)
 *   championship hero    159×119 (4:3 aspect)
 * Earlier rebuild rendered qualifier thumbs at 141×106 — way oversized.
 * Cap to live's actual dimensions. */
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) figure {
  margin: 0 0 6px !important;
  max-width: 43px !important;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) figure img {
  width: 43px !important;
  max-width: 43px !important;
  height: 32px !important;
  aspect-ratio: 43 / 32;
  object-fit: cover !important;
  border-radius: 4px;
}
.page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) p {
  font-size: 13px;
  line-height: 18px;
  margin: 0 0 4px;
  text-align: left;
}
/* Championship section (single-child wf-container in the RIGHT) — keep
 * its hero centred within the column and limit its size. */
.page-id-5337 .entry-content .ult-content-box > .wf-container:not(:has(> div:nth-child(2))) figure {
  max-width: 159px !important;
  margin: 0 auto 8px !important;
}
.page-id-5337 .entry-content .ult-content-box > .wf-container:not(:has(> div:nth-child(2))) figure img {
  max-width: 159px !important;
  width: 159px !important;
  height: 119px !important;
  aspect-ratio: 159 / 119;
  object-fit: cover !important;
  border-radius: 4px;
}

/* Any tail content below the top section (the wf-container after the
 * first one — e.g. bottom-row text). Keep single column flow there. */
.page-id-5337 .entry-content > .wf-container:not(:first-of-type) {
  margin-top: 32px !important;
}

/* ----- Responsive collapse -----
 * ≤1024: outer grid collapses to single column; LEFT also collapses to
 *        one column of text. Qualifier sub-grid stays 2-across.
 * ≤480:  qualifier sub-grid collapses to 1-across.
 */
@media (max-width: 1024px) {
  .page-id-5337 .entry-content > .wf-container:first-of-type {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(1) {
    column-count: 1;
  }
  .page-id-5337 .entry-content > .wf-container:first-of-type > div:nth-child(2) figure img {
    max-width: 280px !important;
  }
}
@media (max-width: 480px) {
  /* Qualifier sub-grid collapses from 2-across to 1-across. */
  .page-id-5337 .entry-content .ult-content-box > .wf-container:has(> div:nth-child(2)) {
    grid-template-columns: 1fr !important;
  }
  .page-id-5337 .entry-content .ult-content-box > .wf-container:has(> div:nth-child(2)) > div:first-child:not(:has(figure)) {
    grid-column: auto !important;
  }
}
/* Card photo: 220×165 circle. We force the rendered img to that frame
 * with object-fit cover, then round the frame to 50% (the live site
 * uses 50% — visually an oval since it's wider than tall). */
.page-id-358 .entry-content .wf-container:nth-of-type(2) figure {
  width: 220px;
  height: 165px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  background: #eaeaea;
}
.page-id-358 .entry-content .wf-container:nth-of-type(2) figure a,
.page-id-358 .entry-content .wf-container:nth-of-type(2) .rollover {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.page-id-358 .entry-content .wf-container:nth-of-type(2) figure img,
.page-id-358 .entry-content .wf-container:nth-of-type(2) .rollover img {
  width: 220px !important;
  height: 165px !important;
  max-width: 220px !important;
  object-fit: cover !important;
  border-radius: 50%;
  display: block;
}
/* Name + title beneath the photo. */
.page-id-358 .entry-content .wf-container:nth-of-type(2) p {
  text-align: center !important;
  font-size: 15px;
  line-height: 22px;
  color: var(--nwb-heading-color);
  margin: 6px 0 0 !important;
  width: 220px !important;
  max-width: 220px !important;
}
.page-id-358 .entry-content .wf-container:nth-of-type(2) p strong {
  font-weight: 700;
}

/* =====================================================================
 * Share-page / Facebook block — dt-the7's .project-share-overlay
 * appears at the bottom of every imported page (and on the live site
 * too). Per spec it gets removed everywhere on the rebuild.
 * ===================================================================== */
.project-share-overlay,
.share-overlay,
.entry-content .project-share-overlay,
.entry-content .share-overlay,
.entry-content > .wf-container:has(.project-share-overlay) {
  display: none !important;
}

/* =====================================================================
 * Mobile responsive layer
 *
 * Breakpoints match dt-the7's media.less:
 *   ≤ 1024  tablet landscape
 *   ≤ 768   tablet portrait
 *   ≤ 480   phone
 *   ≤ 400   small phone
 *
 * The desktop rules above use absolute positioning for the header logo +
 * nav and a 1440-wide layout assumption. Below 1024 we drop back to flex
 * layouts and stack the sidebar under the content.
 * ===================================================================== */

@media (max-width: 1024px) {
  /* Header switches off absolute positioning — flex row, equal padding. */
  .site-header .inside-header {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: static !important;
  }
  .site-header .site-logo,
  .site-header .site-branding,
  .site-header .site-branding-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
  }
  .site-header .site-logo a img,
  .site-header .header-image {
    width: 200px !important;
    height: 32px !important;
  }
  .main-navigation,
  .site-header .main-navigation {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
  }
  /* Slider — capture its responsive height from the spec. Top sits flush
   * with the tablet header bottom (80px tall on tablet, per .inside-header
   * min-height rule above). */
  .nwb-slider { top: 80px; height: 494px; }
  /* Homepage content goes full-width below the slider. */
  .home .site-content {
    width: 100% !important;
    padding: 0 !important;
  }
  .home .entry-content {
    padding-top: 520px !important;     /* 494 slider + 26 gap */
  }
  .home .site-content .content-area {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important;
  }
  .home .entry-content > * {
    max-width: 100% !important;
  }
  .home .entry-content .wf-container {
    margin: 0 !important;
    width: 100% !important;
  }
  .home .entry-content .wf-container > * {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .home .entry-content .wf-container p {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Sidebar stacks below content. */
  .home .site-content .widget-area.is-right-sidebar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    padding: 32px 24px !important;
    border-left: 0 !important;
    border-top: 1px solid #77777726 !important;
    margin-top: 32px !important;
  }
}

@media (max-width: 768px) {
  /* ---------- Mobile header + hamburger nav ----------
   * Goal: visible hamburger icon top-right that opens a full-width
   * drawer below the header — same UX shape as live's Groovy Menu.
   * GP injects `<button class="menu-toggle">` and toggles
   * `.main-navigation.toggled` on click; we own the visual + drawer. */
  .site-header .inside-header { padding: 0 16px !important; }
  .site-header .site-logo a img,
  .site-header .header-image {
    width: 180px !important;
    height: 28px !important;
  }
  /* Hamburger toggle — 3-line icon drawn with linear-gradient,
   * proper tap target, accent color so users can find it. */
  .main-navigation .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 8px 0 0;
    position: relative;
    font-size: 0 !important;        /* hide the GP "Menu" text */
    line-height: 0 !important;
    color: var(--nwb-accent) !important;
    cursor: pointer;
  }
  .main-navigation .menu-toggle .mobile-menu { display: none !important; }
  .main-navigation .menu-toggle::before {
    content: '';
    display: block;
    width: 26px;
    height: 18px;
    background-image:
      linear-gradient(to bottom,
        var(--nwb-nav-color) 0, var(--nwb-nav-color) 2px,
        transparent 2px, transparent 8px,
        var(--nwb-nav-color) 8px, var(--nwb-nav-color) 10px,
        transparent 10px, transparent 16px,
        var(--nwb-nav-color) 16px, var(--nwb-nav-color) 18px);
    transition: opacity 0.18s ease;
  }
  /* When the menu is open, swap the burger for an X close icon. */
  .main-navigation.toggled .menu-toggle::before {
    background-image: none;
    background-color: transparent;
    border-top: 2px solid var(--nwb-accent);
    transform: rotate(45deg);
    height: 2px;
    width: 26px;
  }
  .main-navigation.toggled .menu-toggle::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 2px;
    background: var(--nwb-accent);
    transform: rotate(-45deg);
  }
  /* Hide the nav UL until toggled. */
  .main-navigation .main-nav > ul,
  .main-navigation .menu {
    display: none;
  }
  /* When toggled — drop the drawer as a fixed-position overlay so it
   * spans the full viewport width regardless of the toggle button's
   * narrow .main-navigation container. */
  .main-navigation.toggled .main-nav > ul,
  .main-navigation.toggled .menu {
    display: block;
    position: fixed;
    top: var(--nwb-mobile-menu-top, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0 8px 15px rgba(0,0,0,0.12);
    margin: 0;
    padding: 8px 0 32px;
    overflow-y: auto;
    z-index: 95;
    width: 100vw;
    max-width: 100vw;
  }
  /* Top-level items — full-width tap targets with hairline dividers. */
  .main-navigation.toggled .main-nav > ul > li,
  .main-navigation.toggled .menu > li {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .main-navigation.toggled .main-nav > ul > li > a,
  .main-navigation.toggled .menu > li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    color: var(--nwb-nav-color) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  /* Parent items with a submenu — show a chevron indicator on the
   * right side so users see there's something to expand. */
  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a,
  .main-navigation.toggled .menu > li.menu-item-has-children > a {
    position: relative;
    padding-right: 56px !important;
  }
  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a::after,
  .main-navigation.toggled .menu > li.menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--nwb-nav-color);
    border-bottom: 2px solid var(--nwb-nav-color);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.18s ease;
  }
  /* When the parent is tagged .nwb-expanded by mobile-nav.js, rotate
   * the chevron up and reveal the submenu. */
  .main-navigation.toggled .main-nav > ul > li.nwb-expanded > a::after,
  .main-navigation.toggled .menu > li.nwb-expanded > a::after {
    transform: translateY(-25%) rotate(225deg);
  }
  /* Hide submenus by default in the mobile drawer; reveal only when
   * the user taps the parent. GP's default rule sets `height: 1px;
   * overflow: hidden` to hide submenus — we must explicitly reset both
   * on the expanded state or the items render at 46px but the parent
   * clips to 1px. */
  .main-navigation.toggled .main-nav ul ul,
  .main-navigation.toggled .menu ul {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #f5f5f5 !important;
    box-shadow: none !important;
    border-top: 0 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }
  .main-navigation.toggled .main-nav > ul > li.nwb-expanded > ul,
  .main-navigation.toggled .menu > li.nwb-expanded > ul {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .main-navigation.toggled .main-nav ul ul li,
  .main-navigation.toggled .menu ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-top: 0 !important;
  }
  .main-navigation.toggled .main-nav ul ul li:last-child,
  .main-navigation.toggled .menu ul li:last-child {
    border-bottom: 0;
  }
  .main-navigation.toggled .main-nav ul ul li a,
  .main-navigation.toggled .menu ul li a {
    padding: 12px 24px 12px 40px !important;
    font-size: 14px !important;
    color: #6e6e6f !important;
    text-transform: uppercase !important;
  }
  /* Suppress any :hover styling on touch screens — `@media (hover: hover)`
   * keeps the desktop hover bar from sticking after a tap on mobile. */
  .main-navigation.toggled .main-nav a:hover,
  .main-navigation.toggled .menu a:hover {
    background: transparent !important;
    color: inherit !important;
  }
  /* Lock page scroll while the drawer is open. */
  body.nwb-nav-open {
    overflow: hidden;
  }
  /* Keep the toggle visually on top of the drawer so its close-X
   * remains tappable. */
  .main-navigation { z-index: 100; }
  /* Top bar wraps on phones. */
  .nwb-top-bar { height: auto; min-height: 40px; }
  .nwb-top-bar__inner {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
  }
  /* Slider 313 tall on phones; sits flush with phone header bottom
   * (top bar wraps to 3 lines + ~52px header row, so the slider top
   * needs to track the actual header height — easier to push the
   * slider into the document flow at this width, so absolute positioning
   * gives way to a regular block). */
  .nwb-slider {
    position: static !important;
    top: auto !important;
    height: 313px;
    width: 100%;
    margin: 0;
  }
  .home .entry-content { padding-top: 0 !important; }
  /* Cards row: stack vertically. */
  .home .entry-content > .wf-container:nth-of-type(2) {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .home .entry-content > .wf-container:nth-of-type(2) > *:first-child {
    margin-left: 0 !important;
  }
  .home .entry-content > .wf-container:nth-of-type(2) figure,
  .home .entry-content > .wf-container:nth-of-type(2) p {
    width: 100% !important;
    max-width: 320px !important;
  }
  /* Sidebar widget content centered, narrower. */
  .home .site-content .widget-area.is-right-sidebar {
    padding: 24px 16px !important;
  }
}

@media (max-width: 480px) {
  .site-header .site-logo a img,
  .site-header .header-image {
    width: 160px !important;
    height: 26px !important;
  }
  .nwb-top-bar__text { font-size: 12px; }
  .nwb-top-bar__item { font-size: 12px; }
}

@media (max-width: 400px) {
  .home .entry-content .wf-container p {
    font-size: 15px !important;
  }
}

/* =====================================================================
 * Qualifier-page register CTA — used on Banks Lake, Potholes,
 * Lake Roosevelt, Umatilla, Championship pages. No embedded form;
 * a single big red button pointing at /registration/.
 * ===================================================================== */
.nwb-register-cta {
  text-align: center;
  margin: 32px 0;
}
/* Red tournament/registration buttons — matches the live `.dt-btn`
 * (the7's "Material design" gradient button). Captured values from
 * live: linear-gradient(30deg, #231f20 0%, #ed1c24 100%) over a
 * transparent base, color #fff, font 14px/500, padding 0 14.33px 2px,
 * border-radius 4px, height ~33px (line-height 31 + 2px bottom pad).
 * Hover dims slightly with a filter shift — keeps the gradient origin
 * intact. Note: .dt-btn-m is the chevron "Online Reservations" link,
 * NOT a red button — it stays styled by its own rule (text + chevron
 * SVG, no gradient). */
.nwb-register-cta .nwb-button,
a.nwb-button,
.entry-content a.dt-btn,
.entry-content a.dt-btn-s {
  display: inline-block;
  background-color: transparent;
  background-image: linear-gradient(30deg, #231f20 0%, #ed1c24 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 0 14.33px 2px 14.33px;
  border-radius: 4px;
  border: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 31px;
  letter-spacing: normal;
  text-transform: none;
  margin: 2px 10px 10px 0;
  height: 33px;
  box-sizing: border-box;
  transition: filter 0.18s ease, transform 0.18s ease;
  vertical-align: middle;
}
.nwb-register-cta .nwb-button:hover,
a.nwb-button:hover,
.entry-content a.dt-btn:hover,
.entry-content a.dt-btn-s:hover {
  color: #ffffff !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* Chevron link "Online Reservations" (live .dt-btn-m) — text + arrow
 * icon, NOT a red button. Match live's transparent bg + 23px left
 * padding for the chevron. */
.entry-content a.dt-btn-m {
  display: inline-block;
  background: transparent;
  color: #333 !important;
  text-decoration: none !important;
  padding: 0 0 0 23px;
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  position: relative;
}
.entry-content a.dt-btn-m::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background-image: linear-gradient(30deg, #231f20 0%, #ed1c24 100%);
  border-radius: 1px;
}
.nwb-register-cta__sub {
  color: var(--nwb-muted);
  font-size: 13px;
  margin-top: 8px;
}

/* =====================================================================
 * Contact page (page-id-89) — live structure:
 *   - Title row
 *   - 2-col row: form left, image+address right (each col ~528px)
 *   - Map row full-width
 * Live cols are 528+528 = 1056 (no gap, dt-the7 padded columns).
 * We use grid with a 0 gap and explicit 528-wide columns inside the
 * 1056 rail so widths line up exactly.
 * ===================================================================== */
.nwb-contact-page {
  max-width: 1056px;
  margin: 0 auto;
  box-sizing: border-box;
}
.nwb-contact-page > .custom_head {
  margin: 0 0 10px;
}
.nwb-contact-page__row {
  display: grid;
  grid-template-columns: 528px 528px;
  gap: 0;
  align-items: start;
  margin: 0 0 32px;
}
.nwb-contact-page__col {
  padding: 0 22px;
  box-sizing: border-box;
}
.nwb-contact-page__hero {
  margin: 0 0 24px;
}
.nwb-contact-page__hero img {
  display: block;
  width: 100%;
  max-width: 484px;
  height: auto;
  border-radius: 4px;
}
.nwb-contact-page__address p {
  margin: 0 0 10px;
}
.nwb-contact-page__map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 4px;
}
/* Override the global content-width constraint on Contact so our
 * explicit 1056-wide row gets the full inner rail. */
body.page-id-89 .entry-content {
  max-width: 1056px;
}

/* =====================================================================
 * Registration page (page-id-496) — live structure:
 *   - Title row
 *   - 2-col row: questions text left | mail-in instructions + buttons right
 *   - 2-col row: W-9 instructions left | release/W-9/invasive buttons right
 *   - Full-width Cognito form (id=3)
 * ===================================================================== */
.nwb-registration-page {
  max-width: 1056px;
  margin: 0 auto;
  box-sizing: border-box;
}
.nwb-registration-page > .custom_head {
  margin: 0 0 10px;
}
.nwb-registration-page__row {
  display: grid;
  grid-template-columns: 528px 528px;
  gap: 0;
  align-items: start;
  margin: 0 0 32px;
}
.nwb-registration-page__col {
  padding: 0 22px;
  box-sizing: border-box;
}
.nwb-registration-page__col p {
  margin: 0 0 10px;
}
.nwb-registration-page__btnrow {
  margin: 16px 0 0;
}
.nwb-registration-page__btnrow .nwb-button {
  margin-right: 8px;
  margin-bottom: 8px;
}
.nwb-registration-page__form {
  margin-top: 24px;
  padding: 0 22px;
}
.nwb-registration-page__form .cognito {
  width: 100%;
  max-width: 1012px;
}
body.page-id-496 .entry-content {
  max-width: 1056px;
}

/* =====================================================================
 * Tournament page layout (Banks Lake, Potholes, Lake Roosevelt,
 * Umatilla, Championship). Matches live structure:
 *   - Title (h2) full width
 *   - Top row: 2 outer cols (2fr | 1fr). Left col contains nested row
 *     (image | details) + map below. Right col has the weather widget.
 *   - Full-width explainer below
 *   - 3-column lodging row below
 *
 * Container is centered at max-width 1056px (matches live) — overrides
 * the full-width no-sidebar layout that Banks/Potholes/Championship use.
 * ===================================================================== */
.nwb-tourn-page {
  max-width: 1056px;
  margin: 0 auto;
  padding: 0;             /* live has 0 outer padding on .vc_row */
  box-sizing: border-box;
}
.nwb-tourn-page > .nwb-tourn-page__title h2 {
  margin: 0 0 10px;   /* live = 10px, was 32 */
}
/* Gaps measured from live (Banks Lake, 1440 desktop):
 *   - Between outer LEFT col (image+details+map) and outer RIGHT col
 *     (weather): 44px visible — dt-the7 columns each carry 22px L/R
 *     padding, so adjacent content edges are 22+22 = 44px apart.
 *   - Inside left col, between image col and details col: same 44px.
 *   - Between the nested image+details row and the map below: 32px
 *     (measured from details col bottom y=503 to map top y=535).
 * We use grid `gap` directly since our columns don't carry the dt-the7
 * padding-22 chrome. */
/* Live measurements (Banks Lake @ 1440):
 *   - Outer LEFT col = 704px, RIGHT col = 352px (sum = 1056, 0 gap).
 *     dt-the7 columns sit edge-to-edge; the visible gap comes from
 *     per-column padding (22px L/R inside each .wpb_column).
 *   - Inside the left col, the nested image+details row is 2 cols of
 *     352px each (sum = 704, also 0 gap).
 *   - Between the nested image+details row and the map below: 32px.
 * Apply the same model — 0 grid gap, per-column padding handles the
 * visual gutter so column WIDTHS match live exactly. */
.nwb-tourn-page__top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  align-items: start;     /* weather widget stays at its own height */
}
.nwb-tourn-page__left {
  display: grid;
  gap: 32px;
}
.nwb-tourn-page__left-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.nwb-tourn-page__left-top > * {
  padding: 0 22px;
  box-sizing: border-box;
}
.nwb-tourn-page__hero {
  margin: 0;
}
.nwb-tourn-page__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.nwb-tourn-page__details h4 {
  /* live h4 = 20/28 weight 400 with 10px bottom margin — inherit from
   * the global .entry-content h4 rule, only override the bottom margin
   * if needed. Do not redeclare font-size/weight/line-height here. */
  margin: 0 0 10px;
  color: var(--nwb-heading-color);
}
.nwb-tourn-page__details ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
/* Tournament details list — always wrapped in .standard-arrow on render,
 * so the bare .standard-arrow ul li rule (padding-left 24, margin-bottom
 * 10, no border) is the canonical styling. No fallback needed; if the
 * wrapper is somehow missing, the bare li styles below give a sane shape
 * but DON'T add a border so it doesn't conflict with .standard-arrow. */
.nwb-tourn-page__details > ul > li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 27px;
  color: var(--nwb-body);
}
.nwb-tourn-page__details ul li:first-child { border-top: 0; }
.nwb-tourn-page__details ul li::before {
  position: absolute;
  content: "";
  width: 13px; height: 13px;
  top: 13px; left: 0;
  background-image: linear-gradient(30deg, #231f20 0%, #ed1c24 100%);
  border-radius: 1px;
}
.nwb-tourn-page__details ul li::after {
  position: absolute;
  content: "";
  width: 13px; height: 13px;
  top: 13px; left: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="white"><polygon points="5.159,2.802 8.841,6.57 5.314,10.291 4.237,9.254 6.897,6.51 4.159,3.833"/></svg>');
  background-repeat: no-repeat;
}
.nwb-tourn-page__map {
  position: relative;
}
.nwb-tourn-page__map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 4px;
}
/* Weather widget — ~50% taller than the compact sidebar version. Target
 * height ~400px (rebuild was 266px). Achieved by (a) larger padding,
 * (b) larger icon + temp, (c) flex column + min-height. The right
 * column also stretches via `align-items: stretch` on the parent
 * top-grid so the widget can grow to match the left column. */
/* Pad the right column so the weather widget doesn't kiss the map's
 * right edge. ~24px breathing room between the 704-wide map and the
 * weather panel. */
.nwb-tourn-page__right {
  padding-left: 24px;
  box-sizing: border-box;
}
.nwb-tourn-page__right .nwb-widget--weather {
  margin: 0;
  padding: 40px 24px;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
  min-height: 400px;          /* ~50% taller than the prior 266px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}
.nwb-tourn-page__right .nwb-widget--weather .nwb-weather__icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 8px;
}
.nwb-tourn-page__right .nwb-widget--weather .nwb-weather__temp {
  font-family: var(--nwb-heading-stack);
  font-size: 64px !important;
  line-height: 72px !important;
  font-weight: 700 !important;
  color: #525b6e !important;
  display: block;
  margin: 6px 0;
}
.nwb-tourn-page__right .nwb-widget--weather > span {
  display: block;
  font-family: var(--nwb-body-stack);
  font-size: 13px;
  line-height: 24px;
  text-transform: uppercase;
  color: #b4b4b4;
}

.nwb-tourn-page__explainer {
  margin: 32px 0;
}
.nwb-tourn-page__explainer p {
  font-size: 16px;
  line-height: 27px;
  color: var(--nwb-body);
  margin: 0 0 10px;
}
/* :last-child inherits the global rule (margin-bottom: 0) — matches the
 * live single-paragraph explainer pages where the first p is also the
 * last (Banks Lake, Lake Roosevelt). Multi-paragraph pages get 10px
 * between paragraphs naturally. */
.nwb-tourn-page__lodging {
  margin: 32px 0 0;
}
/* Lodging section heading — live uses h4 (20/28/400, vc_custom_heading
 * style). Inherit from global .entry-content h4; only override margin. */
.nwb-tourn-page__lodging > h4 {
  margin: 0 0 20px;
}
.nwb-tourn-page__lodging-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;        /* live cols edge-to-edge — visual gutter from internal padding */
}
.nwb-tourn-page__lodge {
  padding: 0 22px;
  box-sizing: border-box;
}
.nwb-tourn-page__lodge h4 {
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  color: var(--nwb-heading-color);
  margin: 0 0 8px;
}
.nwb-tourn-page__lodge address {
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  color: var(--nwb-body);
  margin: 0 0 8px;
}
.nwb-tourn-page__lodge p {
  /* Inherit body 16/27 from .entry-content p (matches live) — no
   * font-size or line-height override. */
  color: var(--nwb-body);
  margin: 0 0 10px;
}
.nwb-tourn-page__lodge a[href^="http"] {
  font-size: 13px;
  color: var(--nwb-link);
  text-decoration: underline;
  word-break: break-word;
}

/* Roosevelt + Umatilla now use the no-sidebar layout (same as Banks Lake,
 * Potholes, Championship) — `_generate-sidebar-layout-meta=no-sidebar`.
 * Content rail is 1056px, weather widget stays in the in-content right
 * column. No per-page max-width or map-height override needed. */

/* Tablet + mobile collapse — top row stacks, lodging stacks. */
@media (max-width: 900px) {
  .nwb-tourn-page__top { grid-template-columns: 1fr; }
  .nwb-tourn-page__left-top { grid-template-columns: 1fr 1fr; }
  .nwb-tourn-page__lodging-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nwb-tourn-page__left-top { grid-template-columns: 1fr; }
}