/* targetace.app: the site's shared chrome, on every page (after /styles.css): brand tokens,
   base type, the navy top bar with its menu, buttons, the navy title band of the inner pages
   and the ink footer. Brand: navy, gold, ink and paper, Barlow Condensed for headings. Light
   only, like the app's own ground. home.css holds the home page's own sections. */
:root {
  color-scheme: light;
  --navy: #1a365d;
  --navy-deep: #0f2440;
  --gold: #f2c200;
  --gold-soft: #fff6d6;
  --gold-ink: #7a6000;
  --ink: #14202e;
  --paper: #f4f2ec;
  --card: #ffffff;
  --line: #e3ded3;
  --text-2: #3d4754;
  --muted: #5b6675;
  --on-navy: #dfe7f3;
  --on-navy-2: #c9d6ea;
  --panel: #e7e3da;
  --link: #1a365d;
  --blue: #2a67b3;
  --red: #c42b26;
  --ok: #1f7a45;
  --ok-soft: #e3f4ea;
  --th-bg: #f3f0e8;
  /* the names styles.css and console.css use */
  --bg: var(--paper);
  --surface: var(--card);
  --rule: var(--line);
  --radius: 24px;
  --shadow: 0 24px 48px rgba(15, 36, 64, .28);
  --page-max: 1120px;
}

* { box-sizing: border-box; }
/* ink under the footer on short pages (the body is paper) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Barlow", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.site-head :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible { outline-color: var(--gold); }
h1, h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }

.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--ink); font-weight: 600; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Buttons: a plain .btn is white; gold, navy (.btn-navy or .btn.primary) and outline. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 16.5px; line-height: 1.2; text-decoration: none; text-align: center; border: 2px solid var(--line); background: var(--card); color: var(--navy); cursor: pointer; }
.btn:hover { border-color: var(--navy); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-navy, .btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-gold:hover { filter: brightness(1.06); border-color: var(--gold); }
.btn-navy:hover, .btn.primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn[disabled] { opacity: .55; cursor: default; }

/* Top bar (navy). i18n.js inserts the language menu before .signin; on pages without a
   .signin link it would add its own, so every bar carries one (the console and account
   pages carry their session instead, and keep the language switch in the footer). */
.site-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 16px; background: var(--navy); }
.brand-word { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .01em; color: #fff !important; text-decoration: none; margin-right: auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
/* The wordmark is drawn from CSS: the page translates text by exact match, and "Target" alone is a word it would translate. */
.brand-word::before { content: "Target"; }
.brand-word::after { content: "Ace"; color: var(--gold); }
/* The target icon beside the wordmark (the app's icon) */
.brand-word { background: url("/target.svg") no-repeat left center / 1.05em; padding-left: 1.35em; }
.nav-links { display: none; }
.site-head .signin { display: none; }
.site-head .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 9.5em; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--gold); background: var(--gold); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.1; text-align: center; text-decoration: none; }
.site-head .nav-cta:hover { filter: brightness(1.06); }
.site-head .lang-menu { margin-left: 0; order: 0; }
.site-head .lang-menu summary { min-height: 44px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.site-head .lang-menu summary:hover { border-color: #fff; }
.site-head .lang-menu ul { background: #fff; border-color: var(--line); }
.site-head .lang-menu li a { color: var(--ink); min-height: 44px; }
.site-head .lang-menu li a[aria-current] { background: #e7edf6; }
/* The organiser console's and account page's session: the name and Sign out. */
.site-head .session { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.site-head .session:empty { display: none; }
.site-head .session .muted { color: var(--on-navy); max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-head .session .btn { min-height: 44px; padding: 6px 14px; border-radius: 999px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.site-head .session .btn:hover { border-color: #fff; }
.menu { position: static; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; color: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu[open] summary { background: rgba(255, 255, 255, .12); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .14); padding: 8px 16px 16px; display: grid; box-shadow: 0 16px 32px rgba(0, 0, 0, .25); }
.menu-panel a { color: #fff !important; text-decoration: none; font-weight: 600; font-size: 18px; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current] { color: var(--gold) !important; }
@media (max-width: 899px) {
  .site-head { gap: 8px; padding-inline: 12px; }
  .site-head .lang-menu { position: static; }
  .site-head .lang-menu .lang-code { display: none; }
  .site-head .lang-menu summary { padding: 6px 8px; gap: 5px; min-width: 44px; justify-content: center; }
  .site-head .lang-menu ul { top: calc(100% - 4px); right: 12px; }
}
@media (max-width: 599px) {
  /* Signed in to the console or account page: Sign out takes the button's place. */
  .site-head .session:not(:empty) ~ .nav-cta { display: none; }
  .site-head .session .muted { display: none; }
}
@media (max-width: 379px) {
  .brand-word { font-size: 23px; }
  .site-head .nav-cta { padding: 6px 10px; font-size: 14px; }
  .site-head .lang-menu summary::after { display: none; }
}
@media (min-width: 900px) {
  .site-head { gap: 14px; min-height: 76px; padding: 10px 48px; }
  .brand-word { font-size: 30px; margin-right: auto; }
  .site-head .nav-cta { max-width: none; white-space: nowrap; padding: 10px 22px; font-size: 16px; }
}
/* The full navigation needs the width; below this the menu button carries it. */
@media (min-width: 1200px) {
  .brand-word { margin-right: 12px; }
  .nav-links { display: flex; gap: 4px 22px; margin-right: auto; }
  .nav-links a { color: var(--on-navy) !important; text-decoration: none; font-weight: 600; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
  .nav-links a:hover { color: #fff !important; }
  .nav-links a[aria-current] { color: #fff !important; box-shadow: inset 0 -3px 0 var(--gold); }
  /* Sign-In (or, signed in, the visitor's name): a button like its neighbours, the language
     menu's outline in the Get the app button's shape (Gordon, 8 Oct 2026) */
  .site-head .signin { order: 1; margin-left: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
  .site-head .signin:hover { border-color: #fff; }
  .site-head .session { order: 1; }
  .site-head .nav-cta { order: 2; }
  .menu { display: none; }
}
/* Seven links: tighter, and nearer the edges, until the bar has room to spare (the English
   menu fits from a 1280px laptop up). */
@media (min-width: 1200px) and (max-width: 1359px) { .site-head { padding-inline: 24px; } .nav-links { gap: 4px 12px; } }
@media (min-width: 1360px) and (max-width: 1519px) { .site-head { padding-inline: 32px; } .nav-links { gap: 4px 18px; } }
@media (min-width: 1520px) { .site-head { padding-inline: 80px; } }
@media (min-width: 900px) and (max-width: 1199px) { .menu-panel { padding-inline: 48px; } }
/* A translated menu can be wider than the bar (the French one needs about 1,580px). i18n.js
   marks the bar .nav-tight when the links don't fit, and the menu button carries them, as
   it does below 1200px. */
@media (min-width: 1200px) {
  .site-head.nav-tight .nav-links, .site-head.nav-tight .signin { display: none; }
  .site-head.nav-tight .brand-word { margin-right: auto; }
  .site-head.nav-tight .menu { display: block; order: 3; }
  .site-head.nav-tight .menu-panel { padding-inline: 24px; }
}
@media (min-width: 1360px) { .site-head.nav-tight .menu-panel { padding-inline: 32px; } }
@media (min-width: 1520px) { .site-head.nav-tight .menu-panel { padding-inline: 80px; } }

/* Inner pages: a navy title band, then the page on paper. */
.page-hero { background: var(--navy); color: #fff; }
.page-hero-inner { max-width: var(--page-max); margin: 0 auto; padding: 28px 16px 36px; display: grid; gap: 12px; }
.page-hero .eyebrow { margin: 0; color: var(--gold); }
.page-hero h1 { margin: 0; color: #fff; font-size: clamp(42px, 5.4vw, 68px); line-height: .98; max-width: 16em; }
.page-hero p { margin: 0; max-width: 40em; font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.5; color: var(--on-navy); }
.page-hero a { color: #fff; }
.page { max-width: var(--page-max); margin: 0 auto; padding: 28px 16px 56px; }
@media (min-width: 900px) {
  .page-hero-inner { padding: 56px 48px 60px; gap: 16px; }
  .page { padding: 40px 48px 80px; }
}

/* Footer (ink). i18n.js appends "Report a problem", and on the console and account pages
   the language switch. */
footer.site.site-footer { --gut: 16px; display: block; margin: 0; padding: 32px max(var(--gut), calc((100% - 1248px) / 2)) 40px; background: var(--ink); color: var(--on-navy-2); font-size: 15px; line-height: 1.55; }
footer.site.site-footer a { color: var(--on-navy-2); }
footer.site.site-footer a:hover, footer.site.site-footer a[aria-current] { color: #fff; }
.footer-grid { display: grid; gap: 16px; }
.foot-brand { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 24px; color: #fff; }
.footer-grid p { margin: 4px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; align-content: start; }
.foot-links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
footer.site.site-footer .report-link { display: flex; align-items: center; width: fit-content; min-height: 44px; margin: 4px 0 0; }
footer.site.site-footer .lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 4px 0 0; }
footer.site.site-footer .lang-switch a { min-height: 44px; display: inline-flex; align-items: center; }
footer.site.site-footer .lang-switch strong { color: #fff; font-weight: 600; }
@media (min-width: 900px) {
  footer.site.site-footer { --gut: 48px; padding-inline: max(var(--gut), calc((100% - 1184px) / 2)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; }
  .foot-links { justify-content: flex-end; }
}
@media (min-width: 1360px) { footer.site.site-footer { --gut: 80px; padding-inline: max(var(--gut), calc((100% - 1280px) / 2)); } }

/* Venue maps (venue-map.js: Leaflet with OpenStreetMap tiles) on club and event pages and in
   the console's venue picker. The map keeps Leaflet's own stacking inside it, under the bar. */
.venue-map { position: relative; z-index: 0; isolation: isolate; height: 220px; margin: 4px 0 12px; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--th-bg); }
.venue-map.picker { height: 300px; margin: 0; }
.ta-pin span { display: block; width: 24px; height: 24px; margin-left: 2px; box-sizing: border-box; background: var(--navy); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.venue h3 { margin: 10px 0 2px; font-size: 17px; }
.venue p { margin: 0; }
.venue + .venue { margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--rule); }
.venue-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.venue-links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }

@media print {
  .site-head, .skip-link, footer.site.site-footer { display: none !important; }
  .page-hero { background: none; color: var(--ink); }
  .page-hero h1, .page-hero p { color: var(--ink); }
}