/* =========================
   PNFOA Design System
   ========================= */

:root {
  --pn-black: #000000;
  --pn-grey-dark: #222222;
  --pn-grey-mid: #555555;
  --pn-grey-border: #dddddd;
  --pn-grey-light: #f4f4f5;
  --pn-gold: #c9a23f;
  --pn-red: #c62828;
  --pn-white: #ffffff;

  --pn-font-heading: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --pn-font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --pn-radius-sm: 4px;
  --pn-radius-md: 8px;
  --pn-radius-lg: 12px;
  --pn-radius-pill: 999px;

  --pn-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
  --pn-shadow-subtle: 0 2px 6px rgba(0, 0, 0, 0.06);

  --pn-spacing-xs: 0.35rem;
  --pn-spacing-sm: 0.75rem;
  --pn-spacing-md: 1.25rem;
  --pn-spacing-lg: 2rem;
  --pn-spacing-xl: 3rem;
}

/* =========================
   FULL-WIDTH BREAKOUT (Kadence "boxed" content style)
   Kadence's content-style-boxed wraps page content in nested containers
   (.content-area, .content-container, .site-main, .content-wrap,
   .entry-content-wrap, .entry-content) each of which may constrain width
   and/or add vertical padding above full-bleed sections. We neutralize
   the chain directly rather than relying on a single margin-trick.
   ========================= */

.content-area,
.content-container,
.site-main,
.content-wrap,
.entry-content-wrap,
.entry-content {
  max-width: none;
}

.entry-content-wrap:has(.pn-hero),
.entry-content:has(.pn-hero) {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  max-width: none;
}

.content-wrap:has(.pn-hero),
.site-main:has(.pn-hero),
.content-container:has(.pn-hero),
.content-area:has(.pn-hero) {
  padding-top: 0;
  margin-top: 0;
}

article:has(.pn-hero) {
  margin-top: 0;
  padding-top: 0;
}

/* Pages containing .pn-section (full-bleed colored sections) need the same
   left/right padding removed so the section backgrounds run edge to edge,
   plus zero bottom padding so the last section's background doesn't get
   trailed by a constrained grey strip before the footer. */
.entry-content-wrap:has(.pn-section),
.entry-content:has(.pn-section) {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  max-width: none;
}

/* #primary carries an inline bottom margin (Kadence "vertical padding"
   feature, ~5rem/80px) regardless of content type. Zero it so full-bleed
   sections/hero sit flush against the footer with no leftover gap. */
#primary {
  margin-bottom: 0 !important;
}

/* =========================
   GREY CONTENT BACKGROUND — one grey site-wide
   ========================= */

/* Kadence paints its own "Content Background" setting (a grey gradient on
   desktop, --global-palette7 on tablet/mobile) onto `.content-bg`, the
   wrapper it puts around the post/page content loop — a different, slightly
   darker grey than --pn-grey-light (the shade behind the homepage hero's 3
   cards, .pn-section--light). Repaint it to match so every "normal" page
   (Officials Dashboard, etc.) uses the one grey. !important because
   Kadence's own generated stylesheet uses the same single-class specificity
   and isn't reliably guaranteed to load before ours. */
.content-bg,
body.content-style-unboxed .site {
  background: var(--pn-grey-light) !important;
}

/* Pages rendered by one of this plugin's own page templates (Coach's Card
   / Penalty Card generators, Document Library + Management, Member
   Management, login, etc.) call get_header()/get_footer() directly and
   skip Kadence's normal page.php content loop entirely, so they never get
   the .content-bg wrapper above. The original design here isn't a
   full-bleed grey — normal pages show a width-capped grey COLUMN (Kadence's
   own .content-container, ~1280px, centered) with the black page
   background showing as gutters on either side. `.pnfoa-page-wrap`
   (emitted by pnfoa_theme_open_page_wrap()/pnfoa_theme_close_page_wrap()
   in pnfoa-theme.php, hooked to Kadence's kadence_before_content /
   kadence_after_content — the one place common to every page regardless of
   template) reproduces that same boxed column for these pages instead of
   painting grey edge-to-edge. */
.pnfoa-page-wrap {
  max-width: var(--global-content-width, 1280px);
  margin: 3rem auto;
  padding: var(--pn-spacing-lg);
  background-color: var(--pn-grey-light);
  border-radius: var(--pn-radius-md);
  /* The "faded border" read comes from a soft shadow, not a hard line —
     echoes Kadence's own subtle drop shadow on .content-bg pages. */
  box-shadow: var(--pn-shadow-soft);
  color: var(--pn-grey-dark);
}

.pnfoa-page-wrap h1,
.pnfoa-page-wrap h2,
.pnfoa-page-wrap h3,
.pnfoa-page-wrap h4,
.pnfoa-page-wrap h5,
.pnfoa-page-wrap h6 {
  color: var(--pn-black);
}

@media (max-width: 480px) {
  .pnfoa-page-wrap {
    margin: 1.5rem auto;
    padding: var(--pn-spacing-md);
  }
}

/* Login / Forgot Password / Reset Password intentionally render their own
   full-bleed dark section (.pn-login-wrap — same 100vw-breakout treatment
   as .pn-hero/.pn-section elsewhere) instead of normal boxed content, so
   opt them back out of the grey box here rather than nesting one full-bleed
   section inside another. */
.pnfoa-page-wrap:has(> .pn-login-wrap) {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Typography */

/* Kadence's Global Colors feature injects an inline background-color
   (var(--global-palette8)) directly on <body>. Inline styles beat
   external stylesheets regardless of source order, so !important is
   required here to keep our black background and grey body text. */
body {
  font-family: var(--pn-font-body);
  background-color: var(--pn-black) !important;
  color: var(--pn-grey-mid) !important;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pn-font-heading);
  color: var(--pn-white);
  letter-spacing: 0.02em;
}

h1 {
  font-size: 2.6rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Heading accent — applied within content areas (entry-content) per design feedback */
.entry-content h1,
.entry-content h2 {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--pn-gold);
  display: inline-block;
}

/* Links */

a {
  color: var(--pn-red);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--pn-gold);
  text-decoration: underline;
}

/* Buttons (Kadence + generic) */

.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.kadence-button,
a.pn-btn-primary {
  font-family: var(--pn-font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--pn-radius-pill) !important;
  padding: 0.75rem 1.75rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

/* Anchor tags styled as buttons (e.g. hero/card CTAs) need display:inline-block
   for the padding/pill shape to render correctly, and an explicit
   text-decoration override since the global `a` rule below would otherwise
   underline them on hover. */
a.pn-btn-primary {
  display: inline-block;
  text-decoration: none;
}

/* Primary (gold) */

/* Deliberately NOT a bare `.pn-btn-primary` selector: the Gutenberg button
   block puts className on its *wrapper* <div class="wp-block-button">, not
   the inner <a>, so a bare-class rule here was painting that wrapper div
   gold-and-padded (no radius, since the radius rule above doesn't match it
   either) behind the actual anchor — a gold square peeking out from behind
   the real button. Scoping to `a.pn-btn-primary`/`button.pn-btn-primary`
   only styles real PHP-template buttons, which is every other usage on the
   site (see login/dashboard/document-library templates). The block button's
   own anchor is still covered by `.wp-block-button__link` below. */
a.pn-btn-primary,
button.pn-btn-primary,
.wp-block-button__link,
.kadence-button.pn-btn-primary {
  /* !important: Kadence's own frontend CSS styles .wp-block-button__link
     with the same specificity (single class), using its global palette's
     accent color (a blue) for background/text — whichever stylesheet loads
     second wins on a tie, which isn't reliable enough to depend on. */
  background-color: var(--pn-gold) !important;
  color: var(--pn-black) !important;
  box-shadow: var(--pn-shadow-subtle);
  /* ~20% smaller than the shared button base (0.75rem/1.75rem padding) */
  font-size: 0.8em;
  padding: 0.48rem 1.4rem;
  /* Buttons otherwise inherit the body's 1.6 line-height, which was
     inflating button height well beyond what the padding alone controls. */
  line-height: 1.1;
}

a.pn-btn-primary:hover,
button.pn-btn-primary:hover,
.wp-block-button__link:hover,
.kadence-button.pn-btn-primary:hover {
  background-color: #e0b84a !important;
  color: var(--pn-black) !important;
  box-shadow: var(--pn-shadow-soft);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Compact modifier — stacks on top of .pn-btn-primary (source order after
   it below), e.g. the Coach's Card / Penalty Card buttons in the My
   Upcoming Games card, where each game already has its own action row and
   full-size buttons made every game entry too tall. */
.pn-btn-sm {
  padding: 0.3rem 0.9rem;
  font-size: 0.7em;
}

/* No white/outline button variant on purpose — every button on the site
   defaults to gold (.pn-btn-primary) unless it's specifically a
   destructive/strong action (.pn-btn-danger below). A .pn-btn-secondary
   white-outline class used to live here; removed along with its last
   live usages (Meeting Management, Coach Feedback, Membership
   Applications) since it silently rendered invisible-white-on-white the
   one time it landed on a light card background. */

/* Danger / red (for destructive or strong CTAs) */

.pn-btn-danger {
  background-color: var(--pn-red);
  color: var(--pn-white);
}

.pn-btn-danger:hover {
  background-color: #b71c1c;
}

/* =========================
   LAYOUT HELPERS — full-bleed sections
   ========================= */

.pn-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  box-sizing: border-box;
  padding: 70px var(--pn-spacing-lg);
}

@media (max-width: 480px) {
  .pn-section {
    padding: 40px var(--pn-spacing-md);
  }
}

/* Inner content within a full-bleed section stays readable width, centered */
.pn-section > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.pn-section--dark {
  background: radial-gradient(circle at top left, #333333 0, #000000 55%);
  color: var(--pn-white);
}

.pn-section--light {
  background-color: var(--pn-grey-light);
  color: var(--pn-grey-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pn-section--light h1,
.pn-section--light h2,
.pn-section--light h3,
.pn-section--light h4,
.pn-section--light h5,
.pn-section--light h6 {
  color: var(--pn-black);
}

.pn-section--white {
  background-color: var(--pn-white);
  color: var(--pn-grey-dark);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) inset;
}

.pn-section--white h1,
.pn-section--white h2,
.pn-section--white h3,
.pn-section--white h4,
.pn-section--white h5,
.pn-section--white h6 {
  color: var(--pn-black);
}

/* Cards */

/* Black by default — same "card" language as the generator forms
   (pnfoa-document-forms.css) and .pnfoa-admin-section: a deliberate,
   consistently dark treatment for every content block on the site, with
   tables/lists (.pn-table, .pnfoa-doc-folder-card-wrap) staying white
   islands inside it for scannability. This used to be .pn-card--dark, a
   separate opt-in modifier — folded into the base rule since every card on
   the site uses it now; nothing referenced plain white .pn-card. */
.pn-card {
  background: linear-gradient(135deg, #1b1b1b, #000000);
  border-radius: var(--pn-radius-md);
  box-shadow: var(--pn-shadow-soft);
  padding: var(--pn-spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--pn-white);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 600px;
}

.pn-card__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pn-gold);
  margin-bottom: 0;
}

.pn-card__title {
  font-family: var(--pn-font-heading);
  font-size: 1.25rem;
  margin-bottom: 0;
  color: var(--pn-white);
}

.pn-card__meta {
  font-size: 0.85rem;
  color: var(--pn-grey-mid);
}

/* Row of side-by-side action buttons inside a single .pn-card (e.g. the
   Coach's Card / Penalty Card generator links) — a direct child of
   .pn-card picks up its column gap for free, this just lays the buttons
   themselves out horizontally and wraps them on narrow screens instead
   of overflowing. */
.pnfoa-card-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Card row layout (replaces inline flex styles on homepage sections).
   Cards grow to fill the row on narrow/medium screens, but stop growing
   past a comfortable width so they don't turn into wide, shallow slabs
   on very wide monitors; the row centers itself once that cap is hit. */

.pn-card-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.pn-card-flex {
  flex: 1 1 260px;
  max-width: 420px;
}

@media (max-width: 480px) {
  .pn-card-row {
    gap: 1rem;
  }

  .pn-card-flex {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* =========================
   PNFOA HEADER
   ========================= */

.pn-header {
  background: var(--pn-black);
  padding: 10px 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  border-bottom: 0; /* accent bar handles separation */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.pn-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pn-header-logo-link {
  display: inline-flex;
}

.pn-header-logo {
  height: 48px;
  max-height: 48px;
  width: auto;
}

.pn-header-titleblock {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.pn-header-title {
  font-family: var(--pn-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pn-white);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}

.pn-header-subtitle {
  font-size: 0.75rem;
  color: var(--pn-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.1rem;
  line-height: 1.15;
}

/* Header nav: <nav class="pn-header-nav"> wraps a WP-rendered
   <ul class="pn-header-nav-list"> (see pnfoa_theme_render_nav_menu()).
   .pn-header-nav itself is just the <nav> landmark — flex layout lives
   on the <ul> so submenus (also <ul>, nested by WP core) don't inherit
   horizontal flex spacing and lay out sideways. */

.pn-header-nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pn-header-nav .menu-item,
.pn-header-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pn-header-nav a {
  font-family: var(--pn-font-heading) !important;
  font-weight: 700 !important;
  color: var(--pn-white) !important;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pn-header-nav a:hover {
  color: var(--pn-gold) !important;
}

/* Dropdown submenus — hover (desktop) + tap (touch, via JS .touch-open
   class) + keyboard focus. WP core nests a <ul class="sub-menu"> inside
   any <li class="menu-item-has-children">; hidden by default here. */

.pn-header-nav .menu-item-has-children {
  position: relative;
}

.pn-header-nav .menu-item-has-children > .sub-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--pn-black);
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column; /* safety net if flex ever inherits */
  box-shadow: var(--pn-shadow-soft);
}

.pn-header-nav .menu-item-has-children:hover > .sub-menu,
.pn-header-nav .menu-item-has-children:focus-within > .sub-menu,
.pn-header-nav .menu-item-has-children.touch-open > .sub-menu {
  display: flex !important;
}

.pn-header-nav .sub-menu a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
}

/* Accent bar under header */
.pn-header-accent {
  height: 5px;
  background: linear-gradient(to right, var(--pn-red), var(--pn-gold));
}

/* =========================
   PAGE TITLE BAR (non-home pages)
   ========================= */

.pn-page-title-bar {
  background-color: var(--pn-black);
  padding: 1.1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pn-page-title-breadcrumb {
  align-self: flex-end;
  font-family: var(--pn-font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.pn-page-title-breadcrumb a {
  color: var(--pn-red);
}

.pn-page-title-breadcrumb a:hover {
  color: var(--pn-gold);
}

.pn-page-title-breadcrumb-sep {
  margin: 0 0.5rem;
  color: var(--pn-grey-mid);
}

.pn-page-title-breadcrumb-current {
  color: var(--pn-gold);
}

.pn-page-title-heading {
  font-size: 1.4rem;
  margin: 0;
  color: var(--pn-white);
  text-align: center;
}

/* =========================
   HERO
   ========================= */

.pn-hero {
  position: relative;
  overflow: hidden; /* keeps watermark logo from spilling out */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 30px 1.5rem 25px;
}

.pn-hero--home {
  background: radial-gradient(circle at top left, #2a2a2a 0%, #000 60%);
  color: var(--pn-white);
}

.pn-hero__eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pn-gold);
  margin-bottom: 0.15rem;
}

.pn-hero__title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-top: 0.25rem;
  margin-bottom: var(--pn-spacing-sm);
  color: var(--pn-white);
  text-shadow: 0 0 12px rgba(201, 162, 63, 0.25);
}

.pn-hero__subtitle {
  font-size: 1.05rem;
  max-width: 80rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--pn-spacing-md);
}

/* Hero watermark logo, floating bottom-right */
.pn-hero-logo-wrap {
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
  opacity: 0.25;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 70%);
  padding: 1rem;
  border-radius: 50%;
}

.pn-hero-logo {
  height: 260px;
  width: auto;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .pn-hero-logo {
    height: 160px;
  }
}

@media (min-width: 768px) {
  .pn-hero {
    padding: 40px 3rem 30px;
  }

  .pn-hero__title {
    font-size: 3rem;
  }
}

/* Hero CTA buttons need spacing between them */
.pn-hero .pn-btn-primary {
  margin-right: 1rem;
}

/* Page title bar uses the same full-width breakout */
.pn-page-title-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Tag pills (e.g., level, role) */

.pn-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--pn-white);
}

/* Alerts / status blocks */

.pn-alert {
  border-radius: var(--pn-radius-md);
  padding: var(--pn-spacing-sm) var(--pn-spacing-md);
  border-left: 4px solid var(--pn-gold);
  background-color: #fffdf5;
  color: var(--pn-grey-dark);
  font-size: 0.95rem;
}

.pn-alert--info {
  border-left-color: var(--pn-red);
  background-color: #fff5f5;
}

.pn-alert--success {
  border-left-color: #2e7d32;
  background-color: #f3fbf3;
}

/* Tables (for officials, assignments, etc.) */

.pn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--pn-grey-dark);
}

.pn-table th,
.pn-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--pn-grey-border);
}

.pn-table th {
  text-align: left;
  font-weight: 600;
  background-color: #f8f8f9;
}

/* Jumped-to row — e.g. season-requirements-template.php's ?member_id= deep
   link from a member's "Season Requirements" button in Member Management.
   Same gold-on-cream language as .pn-alert, just as a row instead of a box. */
.pnfoa-row-highlight td {
  background-color: #fffdf5;
  box-shadow: inset 3px 0 0 0 var(--pn-gold);
}

/* My Upcoming Games card ([pnfoa_officials_schedule]) — each game is a
   compact two-row block instead of a table row, since a table forced a
   separate tall row per game (long team/location names wrapping the whole
   row, plus the Coach's/Penalty Card buttons stacked vertically in the
   last cell). Row 1 is the game's details as a wrapping label/value grid;
   row 2 is the assigned position plus both card buttons, kept short via
   .pn-btn-sm. */
.pnfoa-schedule-games {
  display: flex;
  flex-direction: column;
}

.pnfoa-schedule-game {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pn-grey-border);
}

.pnfoa-schedule-game:first-child {
  padding-top: 0;
}

.pnfoa-schedule-game:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pnfoa-schedule-game__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.3rem 1rem;
  margin-bottom: 0.5rem;
}

.pnfoa-schedule-game__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pn-grey-mid);
}

.pnfoa-schedule-game__value {
  display: block;
  font-size: 0.9rem;
  color: var(--pn-white);
  /* Truncate instead of wrapping — a long team or venue name (e.g.
     "Vancouver School of Arts and Academics") was the main thing keeping
     row 1 multi-line. Full text is still reachable via the title
     attribute the JS sets, shown as a native tooltip on hover/focus. 36ch
     assumes the card's now full-width (see .pnfoa-dashboard-section--wide
     below) — tighten this back down if the card ever goes back to sharing
     a row. */
  max-width: 36ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnfoa-schedule-game__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Bold white text in an outline pill — stands out as the one thing on this
   row that isn't an action button, rather than blending in as another line
   of grey text. Outline (not filled) so it doesn't read as a third,
   disabled-looking button. Shared shape for both badges a schedule row can
   show; only the border color tells a game's position (gold) apart from a
   meeting's type (red) at a glance. */
.pnfoa-schedule-game__position,
.pnfoa-schedule-game__meeting-type {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pn-white);
  border-radius: var(--pn-radius-pill);
  padding: 0.2rem 0.75rem;
  margin-right: auto;
}

.pnfoa-schedule-game__position {
  border: 2px solid var(--pn-gold);
}

.pnfoa-schedule-game__meeting-type {
  border: 2px solid var(--pn-red);
}

/* Role-based card styling hooks */

.pn-role-board .pn-card {
  border-top: 3px solid var(--pn-gold);
}

.pn-role-official .pn-card {
  border-top: 3px solid var(--pn-red);
}

/* =========================
   WPFORMS REFINEMENTS
   ========================= */

.wpforms-container,
.wpforms-form {
  max-width: 680px;
  margin: 0 auto;
}

.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
  padding: 9px 10px;
  border-radius: 5px;
  font-size: 0.95rem;
}

.wpforms-field-label {
  margin-bottom: 5px;
}

.wpforms-submit-container {
  margin-top: 0;
  padding-top: 0;
}

.wpforms-submit {
  margin-top: 0 !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: var(--pn-radius-pill) !important;
}

/* =========================
   FOOTER
   ========================= */

/* admin-bar.min.css sets a 32px height on the footer; override directly */
#colophon {
  height: auto !important;
  min-height: auto !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
}

#colophon * {
  font-size: 0.75rem !important;
}

.site-footer .footer-container,
.site-footer .site-info {
  padding: 0.3rem 0 !important;
}

/* Kadence sets inline top/bottom padding (30px) on the bottom footer row */
.site-bottom-footer-inner-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================
   LOGIN PAGE
   ========================= */

.pn-login-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  box-sizing: border-box;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--pn-spacing-lg);
  background: radial-gradient(circle at top left, #2a2a2a 0%, #000 60%);
}

.pn-login-card {
  width: 100%;
  max-width: 380px;
  background-color: var(--pn-white);
  border-radius: var(--pn-radius-lg);
  box-shadow: var(--pn-shadow-soft);
  padding: var(--pn-spacing-xl) var(--pn-spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pn-login-logo {
  height: 64px;
  width: auto;
  margin-bottom: var(--pn-spacing-sm);
}

.pn-login-heading {
  color: var(--pn-black);
  font-size: 1.4rem;
  margin: 0 0 var(--pn-spacing-md);
}

.pn-login-error {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--pn-spacing-md);
  text-align: left;
}

.pn-login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pn-login-label {
  font-family: var(--pn-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pn-grey-dark);
  margin-top: var(--pn-spacing-sm);
  margin-bottom: 0.3rem;
}

.pn-login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--pn-grey-border);
  border-radius: var(--pn-radius-sm);
  font-size: 0.95rem;
  font-family: var(--pn-font-body);
}

.pn-login-input:focus {
  outline: none;
  border-color: var(--pn-gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 63, 0.25);
}

.pn-login-remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--pn-spacing-sm);
  font-size: 0.85rem;
  color: var(--pn-grey-mid);
  cursor: pointer;
}

.pn-login-remember input {
  margin: 0;
}

.pn-login-submit {
  width: 100%;
  margin-top: var(--pn-spacing-md);
}

.pn-login-lost-password {
  display: block;
  text-align: center;
  margin-top: var(--pn-spacing-sm);
  font-size: 0.85rem;
}

/* =========================
   ACCOUNT BOX (logged-in user info + logout)
   ========================= */

/* Black, same "card" language as .pn-card/.pnfoa-admin-section — see the
   comment on .pn-card for why. .pn-account-box--logged-out used to be a
   separate lighter/flatter modifier for the "you're not logged in" prompt
   state; retired since every other "not logged in" card on the dashboard
   (see the other shortcodes in pnfoa-theme.php) already just uses a plain
   .pn-card with no special-casing, and this one should look the same. */
.pn-account-box {
  background: linear-gradient(135deg, #1b1b1b, #000000);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--pn-radius-md);
  box-shadow: var(--pn-shadow-soft);
  padding: var(--pn-spacing-lg);
  max-width: 420px;
}

.pn-account-box__name {
  color: var(--pn-white);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.pn-account-box__details {
  margin-bottom: var(--pn-spacing-md);
}

.pn-account-box__role {
  font-family: var(--pn-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pn-gold);
  margin: 0 0 0.25rem;
}

.pn-account-box__email {
  font-size: 0.9rem;
  color: var(--pn-grey-mid);
  margin: 0;
}

.pn-account-box__logout {
  display: inline-block;
  background-color: var(--pn-red);
  color: var(--pn-white) !important;
  border: none;
  text-decoration: none;
  font-family: var(--pn-font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-radius: var(--pn-radius-pill);
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.pn-account-box__logout:hover {
  background-color: #b71c1c;
  color: var(--pn-white) !important;
  text-decoration: none;
  box-shadow: var(--pn-shadow-soft);
  transform: translateY(-1px);
}

/* Self-service Arbiter Official ID field inside [pnfoa_account_box] —
   hidden by default (see pnfoa-theme.php), shown once the account's own
   Member row loads. Its own dedicated row layout rather than reusing
   .pnfoa-form-row/.pnfoa-form-field (pnfoa-document-forms.css) — those are
   built for the dark, full-width document-generator forms and fight this
   card's narrower white-background context. */
.pn-account-box__field {
  margin-bottom: var(--pn-spacing-md);
}

.pn-account-box__field label {
  display: block;
  font-family: var(--pn-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pn-gold);
  margin: 0 0 0.35rem;
}

/* View mode for a self-service ID field — plain value + pencil icon,
   shown instead of a live input until the pencil is clicked. Keeps
   editing a deliberate two-step action instead of a field that's always
   hot. */
.pn-account-box__id-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.pn-account-box__id-value {
  font-size: 0.95rem;
  color: var(--pn-white);
}

.pn-account-box__id-value--empty {
  color: var(--pn-grey-mid);
  font-style: italic;
}

/* Small round icon-only button — the pencil that opens edit mode.
   Transparent by default so it reads as secondary to the value it sits
   next to; gold on hover/focus to match the rest of the site's accent. */
.pn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--pn-grey-mid);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pn-icon-btn:hover,
.pn-icon-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--pn-gold);
}

/* Plain-text "Cancel" next to a field's Save button — deliberately not
   another pill button, so it doesn't compete with Save for attention. */
.pn-text-btn {
  background: none;
  border: none;
  padding: 0.48rem 0.5rem;
  font-family: var(--pn-font-heading);
  font-weight: 600;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pn-grey-mid);
  cursor: pointer;
}

.pn-text-btn:hover,
.pn-text-btn:focus-visible {
  color: var(--pn-white);
  text-decoration: underline;
}

.pn-account-box__id-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pn-account-box__id-row input {
  flex: 1;
  min-width: 0; /* lets the input actually shrink inside the flex row instead of overflowing */
  padding: 0.5rem 0.65rem;
  border-radius: var(--pn-radius-sm);
  border: 1px solid var(--pn-grey-border);
  background-color: var(--pn-grey-light);
  color: var(--pn-grey-dark);
  font-size: 0.95rem;
}

.pn-account-box__id-row input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pn-gold);
}

.pn-account-box__id-row .pn-btn-primary,
.pn-account-box__id-row .pn-text-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* .pn-card's own rule (base look, including max-width: 600px) lives with
   the rest of the Cards section above — this used to be a second,
   partially-overlapping .pn-card block; merged there to stop the two from
   silently fighting over padding/radius/color via cascade order. */

.pn-card h3 {
  margin-top: 0;
}

.pn-card code {
  display: block;
  word-break: break-all;
  background-color: var(--pn-grey-light);
  color: var(--pn-grey-dark);
  padding: 0.5rem 0.75rem;
  border-radius: var(--pn-radius-sm);
  font-size: 0.85rem;
}

/* Extra-small text utility — e.g. the Meetings Calendar card's "copy this
   link" URL, which is already inside a .pn-card code block (0.85rem) but
   reads better even smaller given how long a raw ICS URL is. Opt-in via
   class rather than shrinking .pn-card code itself, since that rule is
   shared by anything else that ever puts a <code> block in a .pn-card. */
.pnfoa-text-xs {
  font-size: 0.7rem !important;
}

/* Officials Dashboard stacks the account box, the meeting calendar card,
   and the schedule card vertically — this both spaces them apart AND caps
   them to a shared width (matching .pn-card's own max-width: 600px) so
   .pn-account-box's narrower 420px default doesn't leave it looking
   out of place next to the other two. Apply to the outermost element of
   anything stacked on that page. This is also the solo-card default:
   full width up to 600px, centered by its parent's own text-align/flow —
   what a page with just one .pnfoa-dashboard-section card (e.g.
   [pnfoa_account_box] placed on its own somewhere) still looks like. The
   2-up grid rules below only kick in once there are two or more cards in
   the same content flow, and override max-width/margin-top there. */
.pnfoa-dashboard-section {
  margin-top: var(--pn-spacing-lg);
  max-width: 600px;
}

/* Dashboard-style pages with 2+ .pnfoa-dashboard-section cards in a row —
   Officials Dashboard's account box, meetings calendar, document library
   link, upcoming games, etc. — lay them out 2-up on wide screens instead
   of always stacking one per row.

   Scoped with :has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section)
   rather than a dedicated wrapper class so no page content edit is needed
   to opt in — any page whose block editor content happens to contain two
   or more of these cards as direct children of the entry content picks
   this up automatically, and a page with only one keeps the plain
   full-width solo look above untouched (that :has() selector requires a
   *second* sibling .pnfoa-dashboard-section to match at all). Already
   the established pattern in this file for content-shape-driven layout —
   see the FULL-WIDTH BREAKOUT rules up top keying off :has(.pn-hero). */
.entry-content:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section),
.entry-content-wrap:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pn-spacing-lg);
}

/* The block editor leaves a stray empty <p></p> between blocks fairly
   often — as its own flex item that would otherwise force a line break
   right between two cards that should sit side by side, so drop it
   entirely rather than just visually hiding it. */
.entry-content:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > p:empty,
.entry-content-wrap:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > p:empty {
  display: none;
}

/* Any other stray non-card content (a heading, an instructional
   paragraph) gets its own full-width row instead of squeezing in next to
   a card. */
.entry-content:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > :not(.pnfoa-dashboard-section),
.entry-content-wrap:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > :not(.pnfoa-dashboard-section) {
  flex-basis: 100%;
}

.entry-content:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > .pnfoa-dashboard-section,
.entry-content-wrap:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > .pnfoa-dashboard-section {
  flex: 1 1 100%;
  max-width: none; /* the solo 600px cap above no longer applies once a card is grid-sized */
  margin-top: 0; /* the flex gap above replaces the solo card's own top margin */
}

@media (min-width: 900px) {
  .entry-content:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > .pnfoa-dashboard-section,
  .entry-content-wrap:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > .pnfoa-dashboard-section {
    flex: 1 1 calc(50% - var(--pn-spacing-lg) / 2);
    max-width: calc(50% - var(--pn-spacing-lg) / 2);
  }

  /* Opt-out for a card that should keep the full row to itself instead of
     pairing up 2-up — e.g. My Upcoming Games, the most personal/actionable
     card on the Officials Dashboard. Same specificity as the 50% rule
     above (one class each), so source order is what makes this win;
     keep it after that rule. */
  .entry-content:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > .pnfoa-dashboard-section--wide,
  .entry-content-wrap:has(> .pnfoa-dashboard-section ~ .pnfoa-dashboard-section) > .pnfoa-dashboard-section--wide {
    flex-basis: 100%;
    max-width: none;
  }
}