/*
  Logan City Bowls Club: the bowls sub-site look (mock-up, 8 October 2026).
  In the CMS this is a section theme for /bowls/ plus the blocks named in each band's comment.
  The blue is the supplied bowls logo's own background (#0c497e), so the logo (white on blue) sits on it with no edge.
  Contrast (WCAG 2.2 AA): white on --bowls-blue 9.25; --club-neutral 6.37; --club-accent-bright 5.90;
  the logo green #8cc63f 4.52 (large text and decoration only); --bowls-blue on white 9.25.
*/
:root {
  --bowls-blue: #0c497e;
  --bowls-green: #8cc63f;
}

/* Sub-site bar: the bowls logo and the bowls menu (menus.bowls), under the main header on every bowls page. */
.subsite { background: var(--bowls-blue); color: var(--club-surface); --focus: var(--club-accent-bright); border-bottom: 1px solid color-mix(in srgb, var(--club-surface) 16%, transparent); }
.subsite__inner { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.subsite__brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none;
  font-family: var(--club-font-display); font-weight: 700; font-size: 1.05rem; color: var(--club-surface); }
.subsite__brand img { height: 60px; width: auto; }
.subsite__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.subsite__links a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-family: var(--club-font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--club-neutral-light); text-decoration: none;
}
.subsite__links a:hover, .subsite__links a[aria-current="page"] { color: var(--club-accent-bright); }

/* Bowls hero: the logo large, beside the title. */
.bowls-hero { background: var(--bowls-blue); color: var(--club-neutral); --focus: var(--club-accent-bright); }
.bowls-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.bowls-hero__logo { width: 100%; max-width: 520px; height: auto; }
.bowls-hero__eyebrow { font-family: var(--club-font-display); font-weight: 700; color: var(--club-surface); }
.bowls-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 800; color: var(--club-accent-bright); line-height: 1.08; margin: 4px 0 16px; }
.bowls-hero p.bowls-hero__lead { font-size: 1.12rem; margin-bottom: 28px; max-width: 32em; }

/* Playing days: one card per day (a playing_days list: day, time, note), and the green fee. */
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.day {
  padding: 26px;
  border-radius: var(--club-radius-lg);
  border-top: 6px solid var(--bowls-green);
  background: var(--club-surface);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--club-primary) 8%, transparent);
}
.day h3 { font-size: 1.3rem; color: var(--bowls-blue); }
.day__time { margin-top: 4px; font-family: var(--club-font-display); font-weight: 700; color: var(--club-accent-strong); }
.day__note { margin-top: 8px; font-size: 0.92rem; color: var(--club-ink-muted); }
.fee { margin: 32px auto 0; max-width: 520px; text-align: center; font-family: var(--club-font-display); font-weight: 700; font-size: 1.15rem; color: var(--bowls-blue); }
.fee strong { font-size: 1.6rem; color: var(--club-accent-strong); }

/* Info cards: Join, Pennants and competitions, Coaching. */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--club-radius-lg); background: var(--club-surface-alt); }
.info-card h3 { font-size: 1.2rem; color: var(--club-primary); }
.info-card p { color: var(--club-ink-muted); }

/* Results, draws and notices: a bowls_notice collection (date, title, file or page). */
.notices { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.notice { display: flex; align-items: baseline; gap: 18px; padding: 16px 20px; border-radius: var(--club-radius); background: var(--club-surface); border: 1px solid var(--club-neutral-light); }
.notice__date { flex-shrink: 0; min-width: 7.5em; font-family: var(--club-font-display); font-weight: 700; font-size: 0.85rem; color: var(--club-accent-strong); }
.notice__title { color: var(--club-ink); }

/* Barefoot bowls: on the bowls blue, facts beside the call. */
.band--bowls { background: var(--bowls-blue); color: var(--club-neutral); --focus: var(--club-accent-bright); }
.band--bowls h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); color: var(--club-surface); margin-bottom: 14px; }
.band--bowls .accent { color: var(--club-accent-bright); }
.barefoot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.barefoot p { font-size: 1.05rem; margin-bottom: 22px; }
.facts { display: grid; gap: 12px; }
.facts li { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; border-radius: var(--club-radius); background: color-mix(in srgb, var(--club-surface) 8%, transparent); }
.facts strong { color: var(--club-surface); font-family: var(--club-font-display); }

/* Home page: the bowls feature band and the logo on the facilities card. */
.bowls-feature { background: var(--bowls-blue); color: var(--club-neutral); --focus: var(--club-accent-bright); }
.bowls-feature__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.bowls-feature__logo { width: 100%; max-width: 440px; height: auto; }
.bowls-feature h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--club-surface); margin-bottom: 14px; }
.bowls-feature h2 .accent { color: var(--club-accent-bright); }
.bowls-feature p { font-size: 1.08rem; margin-bottom: 26px; max-width: 34em; }
.facility__logo { width: 150px; height: auto; border-radius: 10px; margin-bottom: 18px; }

@media (max-width: 1023px) {
  .bowls-hero__inner, .bowls-feature__inner, .barefoot { grid-template-columns: 1fr; gap: 28px; }
  .bowls-hero__logo, .bowls-feature__logo { max-width: 380px; }
  .days { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .subsite__brand img { height: 48px; }
  /* One swipeable row on phones; the page itself never scrolls sideways. */
  .subsite__links { flex-wrap: nowrap; gap: 0 18px; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .subsite__links a { white-space: nowrap; }
  .days { grid-template-columns: 1fr; }
  .notice { flex-direction: column; gap: 2px; }
}