/* OKCA theme layout styles. Colors, fonts and sizes live in theme.json; this file holds the layout the block
   settings can't express. Ported from the approved 1.4 Classic design (Work/13 OKCA 1.4 2026-10-06/styles.css). */
:root {
  --okca-wrap: 1200px;
  --okca-gutter: 24px;
  --okca-rule-dark: rgba(255, 255, 255, .16);
  --okca-dim-on-green: #dfe7df; /* secondary text on the green (6.0:1); the grey ash is too faint there (3.4:1) */
  --okca-rule: var(--wp--preset--color--ash);
  --okca-zoom: 1; /* the page scale on very wide screens (see the end of this file) */
}
/* Focus outlines: green on the white page, white on black and green, light green on the deep green band. Each is
   at least 3:1 against the colour it is drawn on (checked by tools/check_a11y.py). */
:focus-visible { outline: 3px solid var(--wp--preset--color--green); outline-offset: 3px; }
.has-black-background-color :focus-visible,
.has-green-background-color :focus-visible,
.has-deep-green-background-color :focus-visible { outline-color: var(--wp--preset--color--white); }
.okca-more-band :focus-visible { outline-color: var(--wp--preset--color--light-green); }

/* Skip link: WordPress prints it first in every page, pointing at <main id="main">. While focused it shows over the
   black header as a white box with a white outline. */
#wp-skip-link.skip-link:focus { left: 16px; top: 12px; padding: 13px 18px; background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black); font: 600 16px/1.2 var(--wp--preset--font-family--text);
  text-decoration: underline; outline: 3px solid var(--wp--preset--color--white); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
/* Template parts and full-width bands sit flush against each other; WordPress's default gap between blocks would show white strips */
.wp-site-blocks > * + *, .okca-home > * + * { margin-block-start: 0; }
.okca-mast-grid > *, .okca-next-grid > *, .okca-more-grid > *, .okca-foot-grid > *, .okca-member-card > * { margin-block-start: 0; }

/* Club name and emblem */
.okca-identity { margin: 0; }
.okca-identity figure { margin: 0; }
.okca-identity-name { margin: 0; font: 600 22px/1.05 var(--wp--preset--font-family--display); letter-spacing: -.01em; }
.okca-identity-name a { text-decoration: none; color: inherit; }
.okca-masthead--compact .okca-identity-mark img { width: 64px !important; }
.okca-masthead--compact .okca-identity-name { font-size: 20px; }

/* Homepage masthead: logo and motto in a lined green box on the left, award knives on the right */
.okca-masthead--home { padding: 0 !important; }
.okca-mast-grid {
  display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); align-items: stretch;
  padding-left: max(var(--okca-gutter), calc((100vw / var(--okca-zoom) - var(--okca-wrap)) / 2));
}
.okca-masthead .okca-mast-id {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  margin: 24px 32px 24px 0; padding: 28px 30px; border: 2px solid var(--wp--preset--color--light-green); border-radius: 4px;
  position: relative; z-index: 2; background: var(--wp--preset--color--green);
}
.okca-lead-in { margin: 0; font-size: 16px; color: var(--okca-dim-on-green); }
.okca-motto { margin: 6px 0 0; font-family: var(--wp--preset--font-family--display); font-weight: 600; text-wrap: balance;
  font-size: clamp(40px, 3.8vw, 56px); line-height: 1; text-indent: -.36em; padding-left: .36em; letter-spacing: -.012em; }
.okca-show-window { min-width: 0; position: relative; background: radial-gradient(ellipse 46% 60% at 50% 42%, #3a3d40 0%, #1d1f21 55%, #000 100%); }
.okca-slides { display: grid; margin: 0; padding: 22px 36px 0; list-style: none; }
.okca-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.okca-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.okca-slide a, .okca-slide-body { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.okca-case { height: 250px; width: 100%; display: flex; align-items: center; justify-content: center; }
.okca-case img { max-height: 100%; max-width: min(560px, 100%); width: auto; object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)) drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.okca-slide-meta { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.okca-slide-maker { font: 600 26px/1.1 var(--wp--preset--font-family--display); letter-spacing: .02em; }
.okca-slide-year { font-size: 13px; color: var(--wp--preset--color--ash); margin-top: 4px; font-variant-numeric: tabular-nums; }
.okca-slide a:hover .okca-slide-maker { text-decoration: underline; }
.okca-rail-controls { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 36px 18px; }
.okca-rail-controls button { min-width: 44px; height: 44px; padding: 0 12px; background: transparent; color: var(--wp--preset--color--white);
  border: 1px solid var(--okca-rule-dark); font: 500 14px var(--wp--preset--font-family--text); cursor: pointer; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 8px; }
.okca-rail-controls button[data-rail="prev"], .okca-rail-controls button[data-rail="next"] { font-size: 22px; line-height: 1; }
.okca-rail-controls button:hover { border-color: var(--wp--preset--color--white); }
/* Pause/Play is a square like the arrows (Tim, 2026-10-14: the worded button was too wide). The word stays for
   screen readers, and okca.js also sets the button's aria-label. */
.okca-rail-controls .okca-auto-toggle { width: 44px; padding: 0; justify-content: center; }
.okca-auto-toggle .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.okca-auto-toggle .i { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.okca-auto-toggle.paused .i { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.okca-counter { font-size: 13px; color: var(--wp--preset--color--ash); margin-left: 8px; font-variant-numeric: tabular-nums; }
html:not(.js) .okca-rail-controls { display: none; }
.okca-banner-note { max-width: calc(var(--okca-wrap) + 2 * var(--okca-gutter)); margin: 0 auto !important; padding: 10px var(--okca-gutter) 16px;
  border-top: 1px solid var(--okca-rule-dark); font-size: 13px; color: var(--wp--preset--color--ash); }

/* Menu bar: stays at the top of the window once the masthead scrolls away, as in the design. It is its own template
   part directly after the header (parts/menu-bar.html, class okca-menu-bar), so the whole page is its sticky range.
   Whatever a link, the skip link or the keyboard brings into view stops below it: everything outside the bar keeps
   a scroll margin of the bar's height (--okca-bar, measured by okca.js; 57px without the script) plus 15px. Not a
   scroll-padding on the page: that also applies to the bar's own menu dialog, and the page jumped when focus moved
   into and out of it. */
.okca-menu-bar { position: sticky; top: 0; z-index: 20; }
.admin-bar .okca-menu-bar { top: var(--wp-admin--admin-bar--height, 0px); }
.wp-site-blocks > main, .wp-site-blocks > :not(.okca-menu-bar) :where(*) { scroll-margin-top: calc(var(--okca-bar, 57px) + 15px); }
/* The bar is the deep green between the green header and the green title band, with a light green rule above and
   below, so it reads as its own band (Tim, 2026-10-20: "make the tool bar more defined"). */
.okca-navbar { border-block: 1px solid var(--wp--preset--color--light-green); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.okca-nav { min-height: 56px; font-size: 15px; font-weight: 500; }
.okca-nav .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 48px; text-decoration: none; border-bottom: 2px solid transparent; }
.okca-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--wp--preset--color--light-green); }
.okca-nav .current-menu-item > .wp-block-navigation-item__content,
.okca-nav [aria-current="page"] { border-bottom-color: var(--wp--preset--color--white); }
/* Links in the bar leave only 3px of bar above and below them, so an outline drawn 3px out would run onto the white
   page. Their focus ring is drawn instead on the link's own top and bottom edges and 6px out at the sides, clear of
   the letters. The open mobile menu has room and keeps the normal outline. */
.okca-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { position: relative; }
.okca-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible { outline: none; }
.okca-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible::after {
  content: ""; position: absolute; inset: 0 -6px; border: 3px solid var(--wp--preset--color--white); pointer-events: none; }
/* Menu button on narrow screens (issue I-06): the word "Menu" (printed by WordPress) beside a three-bar icon, as in
   the 1.4 design, at least 44px tall. The Close button inside the open menu matches it. */
.okca-nav .wp-block-navigation__responsive-container-open,
.okca-nav .wp-block-navigation__responsive-container-close { align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--okca-rule-dark); border-radius: 2px; line-height: 1.2; }
.okca-nav .wp-block-navigation__responsive-container-close { display: inline-flex; }
.okca-nav .wp-block-navigation__responsive-container-open::before { content: ""; width: 18px; height: 2px; background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.okca-nav .wp-block-navigation__responsive-container-open:hover,
.okca-nav .wp-block-navigation__responsive-container-close:hover { border-color: var(--wp--preset--color--white); }

/* Next show */
.okca-next-label { font-size: clamp(28px, 2.6vw, 38px) !important; }
.okca-next-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 56px; align-items: end;
  margin-top: 14px; padding-top: 20px; border-top: 4px solid var(--wp--preset--color--green); }
.okca-show-name { font-size: clamp(30px, 4vw, 56px); margin: 0 0 22px; }
.okca-facts { display: grid; gap: 0; }
.okca-fact { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; margin: 0; padding-block: 9px; border-bottom: 1px solid var(--okca-rule); }
.okca-fact:first-child { border-top: 1px solid var(--okca-rule); }
.okca-fact-label { font-size: 14px; color: var(--wp--preset--color--slate); padding-top: 3px; }
.okca-fact-value { font-weight: 500; font-size: 19px; line-height: 1.4; }
.okca-fact-value small { display: block; font-size: 14px; font-weight: 400; color: var(--wp--preset--color--slate); margin-top: 2px; }
.okca-coming { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--okca-rule); }
.okca-coming span { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--slate); margin-right: -12px; }
.okca-coming a, .okca-show-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.okca-show-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 0; }

/* Show photographs (2026, Erin's picks): the hall on the homepage, and the rows of square photos on the inner pages
   (a gallery with the class okca-photo-row, written by apply_client_edits.py --show-photos) */
.okca-show-photo figure { margin: 0; }
.okca-show-photo img { display: block; width: 100%; height: auto; border-radius: 4px; }
.okca-show-photo figcaption, .okca-photo figcaption { font-size: 14px; color: var(--wp--preset--color--slate); margin: 10px 0 0; text-align: left; }
.wp-block-gallery.okca-photo-row { gap: 12px; --wp--style--unstable-gallery-gap: 12px; margin-block: 32px 40px; }
/* Three in a row at every width: WordPress would put two on a phone and stretch the third across the page */
.wp-block-gallery.okca-photo-row.columns-3 figure.wp-block-image:not(#individual-image) { width: calc((100% - 24px) / 3); flex-grow: 0; }
.wp-block-gallery.okca-photo-row img { border-radius: 4px; }
.okca-photo { margin-block: 32px 40px; }
.okca-photo img { border-radius: 4px; }

/* Membership card */
.okca-member-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 44px; align-items: center;
  padding: 36px 44px; border-radius: 6px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45); position: relative; }
.okca-member-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--wp--preset--color--light-green); border-radius: 3px; pointer-events: none; }
.okca-member-card figure { margin: 0; }
.okca-member-card h2 { font-size: clamp(30px, 3vw, 42px); margin: 0; }
.okca-member-card p { font-size: 18px; line-height: 1.5; margin: 10px 0 0; max-width: 46ch; }
.okca-member-card .wp-block-buttons { position: relative; }
.okca-btn-card .wp-block-button__link:hover { filter: brightness(1.08); background: var(--wp--preset--color--white); }

/* Competitions and Knewsletters band */
.okca-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.okca-more-grid > div { border-top: 1px solid var(--wp--preset--color--light-green); padding-top: 16px; min-width: 0; }
.okca-more-grid h2 { font-size: 30px; margin: 0; }
.okca-more-grid p { font-size: 16px; margin: 8px 0 0; }
.okca-link-list { list-style: none; padding: 0; margin: 10px 0 0; }
.okca-link-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* Footer */
.okca-footer { font-size: 15px; }
.okca-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.okca-foot-grid figure { margin: 0; }
.okca-foot-h { font: 600 14px/1.3 var(--wp--preset--font-family--text) !important; color: var(--wp--preset--color--ash); letter-spacing: 0; margin: 0 0 10px; }
.okca-foot-links { list-style: none; padding: 0; margin: 0; }
.okca-foot-links a { display: inline-flex; min-height: 40px; align-items: center; text-decoration: none; }
.okca-foot-links a:hover { text-decoration: underline; }
.okca-ext::after { content: " ↗"; font-size: .85em; }
.okca-address { margin: 16px 0 0; line-height: 1.7; overflow-wrap: anywhere; }
.okca-foot-legal { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid var(--okca-rule-dark); font-size: 13px; color: var(--wp--preset--color--ash); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.okca-foot-legal a { color: var(--wp--preset--color--white); }

/* Inner pages: the title on a green band (Susan, 2026-10-19; was black) the width of the window (approved design, classic/club-knives.html).
   When the page's content opens with an intro group (okca-page-intro, okca-special.css: Club Knife Archives,
   Knewsletters, Contact), the band continues through it, 24px under the title as in the design. */
/* Titles at 34-56px, not the 84px heading size (Tim, 2026-10-20: the heads on the sub pages were huge). */
.okca-page-head { padding-block: 44px 38px; }
.okca-page-head h1 { margin: 0; letter-spacing: -.01em; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; }
.okca-page-head + * { margin-block-start: 56px; }
.okca-page-head:has(+ .wp-block-post-content > .okca-page-intro:first-child) { padding-bottom: 24px; }
.okca-page-head + .wp-block-post-content:has(> .okca-page-intro:first-child) { margin-block-start: 0; }

/* From 600px (where WordPress shows the links instead of the Menu button) to 719px the six links fit on one line only
   with a narrower gap; on two lines the bar that stays at the top would take 131px of the window. The links' focus
   rings reach 6px out at each side, so 14px still keeps them apart. */
@media (min-width: 600px) and (max-width: 719px) { .okca-nav .wp-block-navigation__container { column-gap: 14px; } }
@media (max-width: 1100px) {
  .okca-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okca-foot-id { grid-column: 1 / -1; }
  .okca-mast-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .okca-member-card { grid-template-columns: auto minmax(0, 1fr); }
  .okca-member-card .wp-block-buttons { grid-column: 2; justify-self: start; }
}
@media (max-width: 820px) {
  .okca-mast-grid { grid-template-columns: 1fr; padding-left: 0; }
  .okca-masthead .okca-mast-id { margin: 16px var(--okca-gutter) 0; padding: 20px; gap: 14px; }
  .okca-identity-mark img { width: 64px !important; }
  .okca-identity-name { font-size: 19px; }
  .okca-motto { font-size: clamp(34px, 9vw, 44px); text-indent: -.3em; padding-left: .3em; }
  .okca-slides, .okca-rail-controls { padding-inline: var(--okca-gutter); }
  .okca-case { height: 190px; }
  .okca-next-grid, .okca-more-grid { grid-template-columns: 1fr; }
  .okca-show-name { margin-bottom: 16px; }
  .okca-member-card { grid-template-columns: 1fr; padding: 32px 28px; gap: 16px; }
  .okca-member-card img { width: 120px !important; }
  .okca-member-card .wp-block-buttons { grid-column: auto; }
}
@media (max-width: 480px) {
  .wp-block-button__link { white-space: normal; text-align: center; }
}
@media (max-width: 380px) {
  .okca-identity-name { font-size: 17px; }
  .okca-foot-grid { grid-template-columns: 1fr; }
}
/* Very wide screens (Tim, 2026-10-21: at 1920x1080 great, on an ultrawide cramped). From 2200px the whole page is
   scaled up, so a 2560 or 3440 screen shows the 1920 layout larger instead of a 1200px strip with wide empty sides.
   Up to 2199px nothing changes. Viewport units are not scaled by zoom, so rules using 100vw divide by --okca-zoom. */
@media (min-width: 2200px) { :root { zoom: 1.25; --okca-zoom: 1.25; } }
@media (min-width: 2880px) { :root { zoom: 1.6; --okca-zoom: 1.6; } }
@media (min-width: 3600px) { :root { zoom: 2; --okca-zoom: 2; } }
@media (prefers-reduced-motion: reduce) { .okca-slide, .okca-slide.is-active { transition: none; } }