/* ============================================================
   Eurohockey Watch — shared site styles (nav, background, reveal, footer)
   Used by index.html, players.html, about.html
   ============================================================ */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

:root{
  --blue:#021F94;
  --white:#F5F2F3;
  --white-muted:rgba(245,242,243,0.72);
  --blue-muted:rgba(2,31,148,0.70);
  --blue-hair:rgba(2,31,148,0.16);
  --font-display:'Anton',sans-serif;
  /* Montserrat is the readable "information" font -- paragraphs, table
     data, anything that's actual content. --font-ui stays the decorative
     serif on purpose: menu items, section titles, and other secondary/
     label text keep that voice, they're just not what someone is meant
     to sit and read. */
  --font-body:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-ui:'Playfair Display',Georgia,'Times New Roman',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--blue);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}

/* NAV — logo fixed top-left, menu toggle fixed top-right, always, on every page.
   No chip/background: the mark and hamburger bars are colored directly, and
   flip blue<->white to match whatever's behind them (see .nav-on-dark, set
   by site.js when a [data-nav-invert] section covers the top ~66px). */
.nav-logo{
  position:fixed;
  top:22px;left:22px;
  z-index:300;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  opacity:0.92;
  transition:opacity .18s ease;
}
.nav-logo:hover{opacity:1}
.nav-logo-imgs{position:relative;width:60%;height:60%}
.nav-logo-imgs img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity .2s ease;
}
.nav-logo-imgs .logo-white{opacity:0}
body.nav-on-dark .nav-logo-imgs .logo-blue{opacity:0}
body.nav-on-dark .nav-logo-imgs .logo-white{opacity:1}

.nav-toggle{
  position:fixed;
  top:22px;right:22px;
  z-index:300;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;background:transparent;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";display:block;width:22px;height:2px;background:var(--blue);
  position:relative;transition:transform .2s ease,opacity .2s ease,background .2s ease;
}
body.nav-on-dark .nav-toggle span,
body.nav-on-dark .nav-toggle span::before,
body.nav-on-dark .nav-toggle span::after{background:var(--white)}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}
.nav-toggle.open span,
body.nav-on-dark .nav-toggle.open span{background:transparent}
.nav-toggle.open span::before{top:0;transform:rotate(45deg)}
.nav-toggle.open span::after{top:0;transform:rotate(-45deg)}

.nav-links{
  position:fixed;top:0;right:0;bottom:0;
  z-index:290;
  width:min(78vw,320px);
  background:var(--blue);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:104px 32px 32px;
  transform:translateX(100%);
  transition:transform .28s ease;
  box-shadow:-24px 0 60px rgba(0,0,0,0.25);
}
.nav-links.open{transform:translateX(0)}
.nav-links a{
  font-family:var(--font-ui);
  font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--white-muted);
  padding:12px 0;width:100%;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white)}
.nav-links .nav-ig{
  margin-top:12px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.14);
  width:100%;
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-ui);
  font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--white-muted);
}
.nav-links .nav-ig:hover{color:var(--white)}
.nav-links .nav-ig img,
.nav-links .nav-ig svg{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.nav-lang{
  margin-top:12px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.14);
  width:100%;
  display:flex;align-items:center;gap:16px;
}
.nav-lang a{
  width:auto;padding:0;
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-ui);
  font-size:13px;font-weight:600;letter-spacing:0.08em;
  color:var(--white-muted);
  opacity:0.6;
}
.nav-lang a.active{color:var(--white);opacity:1}
.nav-lang a:hover{opacity:1}
.nav-lang .flag{width:20px;height:14px;object-fit:cover;border-radius:2px;display:block;flex-shrink:0}
body.nav-open{overflow:hidden}
.nav-scrim{
  position:fixed;inset:0;z-index:280;
  background:rgba(3,15,45,0.35);
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
}
.nav-scrim.open{opacity:1;pointer-events:auto}

/* SECTION SHELL */
.section{padding:88px 0 20px}
.sectiontitle{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(32px,5vw,48px);font-weight:400;letter-spacing:0.01em;
  margin-top:12px;line-height:1.05;
  color:var(--blue);
}
.lede{
  font-size:14px;color:var(--blue-muted);margin-top:14px;max-width:620px;
}

/* reveal */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(0.16,1,0.3,1) var(--d,0s),
             transform .7s cubic-bezier(0.16,1,0.3,1) var(--d,0s);
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* FOOTER */
.footer{
  padding:64px 0 40px;
  text-align:center;
  position:relative;
}
.footer-logo{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:17px;letter-spacing:0.5px;color:var(--blue-muted);
}
.footer-links{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:14px;
}
.footer-links a{
  font-family:var(--font-ui);
  font-size:12px;color:var(--blue-muted);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
}
.footer-links a:hover{color:var(--blue)}
.footer-copy{
  font-family:var(--font-ui);
  font-style:normal;
  font-size:12px;color:var(--blue);margin-top:18px;
  letter-spacing:0.02em;
}
.footer-credit{
  position:absolute;
  right:24px;bottom:16px;
  font-family:var(--font-ui);
  font-size:11px;color:var(--blue-muted);
  letter-spacing:0.02em;
}
.footer-credit:hover{color:var(--blue)}
@media (max-width:640px){
  .footer-credit{position:static;display:block;margin-top:14px}
}

/* STANDINGS TABLE — sits directly on the page, hairlines only. Shared
   (not page-specific) since both index.html and simulate.html render a
   live/static standings table with this exact look. */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* table-layout:fixed makes the explicit column widths below actually
   binding -- without it (the default 'auto'), the browser resizes columns
   to fit their content/header text, so "PROJECTED PTS" (the longest
   header) was stealing width from the other three data columns instead
   of them all matching the same declared width.
   width:auto (not 100%) + min-width:100% matters once those four columns
   got widened to 200px each (800px total): on a wide screen the
   .forecast-box reading column is narrower than that (the section has
   generous side padding), so width:100% was forcing the table back down
   to container width -- table-layout:fixed has nowhere else to take that
   space from except the one column with no explicit width (TEAM),
   collapsing it to near-zero and running team names into the numbers
   next to them. Letting the table size to its natural (wider) content
   width instead means it can exceed the container -- .table-scroll's
   overflow-x:auto (below) just scrolls it, same mechanism already used
   for the playoffs bracket. */
.standings-table{width:auto;min-width:100%;border-collapse:collapse;margin-top:18px;font-family:var(--font-body);table-layout:fixed}
.standings-table th{
  text-align:left;font-size:12.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--blue-muted);padding:0 10px 12px;
  border-bottom:1px solid rgba(2,31,148,0.22);
  white-space:nowrap;
}
.standings-table th:first-child,.standings-table td:first-child{width:30px}
/* TEAM column gets an explicit width too, now that the table can exceed
   its container -- table-layout:fixed needs every column's width spelled
   out, otherwise the one unspecified column absorbs whatever space is
   left over (which, per above, can go negative). */
.standings-table th:nth-child(2),.standings-table td:nth-child(2){width:180px}
/* Numeric columns narrowed from 118px -- their content (short digits/
   percentages) doesn't need that much room, and the freed-up width goes
   to the team-name column so the bigger font below still fits without
   forcing the table wider than the page. table-layout:fixed makes this
   width binding, which means the header label has to fit it too -- so
   these headers get white-space:normal (wraps "PROJECTED PTS" onto two
   lines) instead of the base rule's nowrap, which would otherwise spill
   into the neighboring column. */
.standings-table th:not(:first-child):not(:nth-child(2)),
.standings-table td:not(:first-child):not(:nth-child(2)){text-align:center;width:200px}
/* overflow-wrap so a single long word ("RELEGATION") can itself break
   across lines when the column is too narrow to fit it whole -- plain
   white-space:normal only wraps at spaces, so on a narrow phone that
   word alone (wider than the 32px mobile column) was overflowing past
   the column edge instead of wrapping. */
.standings-table th:not(:first-child):not(:nth-child(2)){white-space:normal;line-height:1.3;overflow-wrap:break-word}
.standings-table td{padding:13px 10px;font-size:16px}
.standings-table tbody tr{border-top:1px solid rgba(2,31,148,0.09)}
.standings-table .rk{color:var(--blue-muted);font-weight:600}
.standings-table .tm{color:var(--blue-muted);font-weight:600;display:flex;align-items:center;gap:9px;white-space:nowrap}
.standings-table .tm img{height:20px;width:20px;object-fit:contain;display:block;flex-shrink:0}
.standings-table .dash{color:var(--blue-muted);opacity:0.5}
.standings-table .pts{color:var(--blue);font-weight:700}

@media (max-width:640px){
  .lede{font-size:12.5px}
  .standings-table th{font-size:9.5px;padding:0 3px 10px}
  .standings-table td{padding:10px 3px;font-size:16.5px}
  .standings-table th:first-child,.standings-table td:first-child{width:14px}
  /* Numeric columns narrowed further (46px -> 40px), and side padding on
     every cell trimmed (5px -> 3px) to claw back enough width for the
     bigger row font -- otherwise "<0.1%"/"78.7%" wrap or the table forces
     horizontal scroll on a narrow phone. */
  .standings-table th:not(:first-child):not(:nth-child(2)),
  .standings-table td:not(:first-child):not(:nth-child(2)){width:80px}
  /* Overrides the base rule's 180px -- that width assumes the extra
     room a wide desktop table can spend on it, but on a phone the team
     names are rendered much smaller, so the desktop figure would just
     add unnecessary horizontal scroll here. */
  .standings-table th:nth-child(2),.standings-table td:nth-child(2){width:90px}
  .standings-table .tm{gap:4px}
  .standings-table .tm img{height:15px;width:15px}
}

@media (max-width:640px){
  .section{padding:64px 0 16px}
}

/* FAN VOTE — "favourite team" poll. Grid of logo buttons that swaps for a
   ranked results list (bar per team) once the visitor has voted. */
.fanvote-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;
  margin-top:28px;
}
.fanvote-btn{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 8px;
  border:1px solid rgba(2,31,148,0.14);border-radius:0;
  background:none;cursor:pointer;
  font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:var(--blue);
  text-align:center;
  transition:border-color .15s ease,background .15s ease;
}
.fanvote-btn:hover:not(:disabled){border-color:var(--blue);background:rgba(2,31,148,0.06)}
.fanvote-btn:disabled{cursor:default;opacity:0.5}
.fanvote-btn img{height:34px;width:34px;object-fit:contain}

/* #fanvote-root height is animated inline (JS) when swapping between the
   voting grid and the results list -- .fanvote-anim is the fade-in layer
   for whichever content just got swapped in. */
#fanvote-root{will-change:height}
.fanvote-anim{opacity:0}

.fanvote-results-title{
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--blue-muted);margin-top:28px;margin-bottom:12px;
}
.fanvote-results{display:flex;flex-direction:column;gap:9px;max-width:620px}
.fanvote-row{display:flex;align-items:center;gap:12px}
.fanvote-row img{height:20px;width:20px;object-fit:contain;flex-shrink:0}
.fanvote-row-name{
  font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--blue);
  width:78px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fanvote-row-bar-track{flex:1;height:18px;background:rgba(2,31,148,0.08)}
/* Fill color/gradient is set per-team inline (JS, real club colors); this
   just gives every bar the same glossy sheen and grow animation. */
.fanvote-row-bar-fill{
  display:block;height:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.18);
  transition:width .5s cubic-bezier(0.16,1,0.3,1);
}
.fanvote-row.is-you .fanvote-row-name{text-decoration:underline;text-underline-offset:3px}
.fanvote-row.is-you .fanvote-row-bar-track{box-shadow:0 0 0 2px var(--blue)}
.fanvote-row-pct{
  font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--blue-muted);
  width:44px;text-align:right;flex-shrink:0;
}
/* BANNER — the only thing shown by default once you've voted: a full-width
   box filled with your team's own color gradient (dark wash layered in for
   contrast, see gradient() in the page script). Doubles as the toggle for
   the full standings panel below it -- click anywhere on it, chevron flips. */
.fanvote-banner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;
  padding:32px clamp(20px,3.5vw,48px);
  border:none;border-radius:0;cursor:pointer;
  text-align:left;
  background-color:var(--blue);
  transition:filter .15s ease;
}
.fanvote-banner:hover{filter:brightness(1.05)}
.fanvote-banner-left{display:flex;flex-direction:column;gap:8px;min-width:0}
.fanvote-banner-label{
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);
}
.fanvote-banner-team{display:flex;align-items:center;gap:14px;min-width:0}
.fanvote-banner-team img{height:36px;width:36px;object-fit:contain;flex-shrink:0}
.fanvote-banner-name{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(22px,3vw,30px);color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fanvote-banner-pct{
  font-family:var(--font-ui);font-size:14px;font-weight:700;color:rgba(255,255,255,0.85);
  flex-shrink:0;
}
.fanvote-banner-chevron{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:var(--white);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1);
}
.fanvote-banner.is-open .fanvote-banner-chevron{transform:rotate(180deg)}

.fanvote-standings{overflow:hidden}
.fanvote-standings .fanvote-results-title{margin-top:24px}

@media (max-width:640px){
  .fanvote-grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
  .fanvote-btn{padding:14px 6px;font-size:11.5px}
  .fanvote-btn img{height:28px;width:28px}
  .fanvote-row-name{width:64px;font-size:12px}
  .fanvote-banner{padding:24px 20px}
  .fanvote-banner-team img{height:28px;width:28px}
  .fanvote-banner-pct{display:none}
}