/*
Theme Name:   Meadow Acres
Theme URI:    https://meadowacresgolfcourse.com/
Author:       Site Reboots
Description:  Custom block theme for Meadow Acres Golf Course, Larchwood, Iowa.
              The palette, typography and spacing are locked in theme.json so
              the design cannot drift — staff change words and swap sections,
              not colours and fonts. No page builder, no bundled libraries:
              the whole stylesheet is this file.
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  meadowacres
Tags:         one-column, block-patterns, full-site-editing
*/

/* Tokens come from theme.json as --wp--preset--*. These aliases keep the
   component rules below readable. */
:root{
  /* Height of the sticky bar. Anchor targets offset by this so a jump never
     lands underneath it. JS overwrites both with the measured values. */
  --ma-header-h:76px;
  --ma-stick-h:76px;

  --turf:var(--wp--preset--color--turf);
  --turf-2:var(--wp--preset--color--turf-2);
  --slate:var(--wp--preset--color--slate);
  --cream:var(--wp--preset--color--cream);
  --sand:var(--wp--preset--color--sand);
  --flag:var(--wp--preset--color--flag);
  --clay:var(--wp--preset--color--clay);
  --wheat:var(--wp--preset--color--wheat);
  --rule:var(--wp--preset--color--rule);
  --display:var(--wp--preset--font-family--display);
  --text:var(--wp--preset--font-family--text);
}

/* WordPress sets box-sizing:border-box on its own blocks and on form controls,
   but NOT globally — so a plain <a> or <button> of ours inherits content-box
   from the document. That makes min-height mean "content box at least this
   tall", and padding and border are then added on top: .ma-btn's min-height
   52px plus 27.2px of padding plus 4px of border rendered an 83px button.
   Setting it once here is what every other rule in this file already assumes.
   (.ma-field's inputs carried their own box-sizing for exactly this reason;
   that line is now redundant but harmless, and its comment is worth keeping.) */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--ma-stick-h, var(--ma-header-h)) + 1.25rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Top-level blocks carry their own padding, so WordPress's automatic block gap
   between them just opens a stripe of body colour under the header. */
.wp-site-blocks > *{margin-block-start:0;margin-block-end:0}

:focus-visible{outline:3px solid var(--flag);outline-offset:3px;border-radius:2px}
::selection{background:var(--wheat);color:var(--turf)}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
/* Fraunces carries an optical-size axis; letting the browser drive it keeps
   display sizes properly drawn and body sizes properly spaced. */
h1,h2,h3,h4,.ma-display{font-optical-sizing:auto}
img{max-width:100%;height:auto}

.skip-link:focus{
  background:var(--flag);color:#fff;font-weight:700;
  padding:.7rem 1.1rem;border:2px solid var(--turf);border-radius:6px;
}
.ma-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- bands ----- */
/* A band is a full-bleed colour section. The turf variant flips the text
   colours of everything inside it. */
.ma-band{padding-block:clamp(2.75rem,7vw,5.75rem);background:var(--cream)}
.ma-band--tight{padding-block:clamp(2rem,4.5vw,3.25rem)}
.ma-band--sand{background:var(--sand)}
.ma-band--turf{background:var(--turf);color:#CBD8C6}
.ma-band--turf :is(h1,h2,h3,h4,strong){color:var(--cream)}
/* Buttons carry their own foreground; without excluding them the band
   repaints a primary button's white label wheat, on red, at 2.5:1. */
.ma-band--turf a:not(.wp-block-button__link):not(.ma-btn){color:var(--wheat)}
.ma-band--turf .ma-eyebrow{color:var(--wheat)}

/* NOTE: .ma-footer is also --turf, and .wp-site-blocks > * zeroes the margins
   between top-level blocks, so a .ma-band--turf placed last on a page fuses
   into the footer with no seam and its heading reads as part of the footer.
   Never close a page with --turf. The closing CTA uses .ma-cta below, which
   carries a photograph and so always reads as its own slab. */

.ma-eyebrow{
  display:block;font-family:var(--text);font-size:.8125rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--clay);margin:0 0 .8rem;
}
.ma-lede{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.55;max-width:58ch;color:var(--turf-2)}
.ma-band--turf .ma-lede{color:#CBD8C6}

/* A thin wheat rule used to sign off a heading block. */
.ma-flourish{display:flex;align-items:center;gap:.6rem;margin:0 0 1.5rem}
.ma-flourish::before{content:"";width:42px;height:3px;background:var(--wheat);border-radius:2px;flex:0 0 auto}
.ma-flourish::after{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--wheat);flex:0 0 auto}

/* --------------------------------------------------------------- hero ---- */
.ma-hero{position:relative;isolation:isolate;background:var(--turf);overflow:hidden}
.ma-hero__media{position:absolute;inset:0;z-index:-2}
.ma-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
/* The photograph is 1024px on its longest edge, so on a wide screen it is
   being upscaled. The scrim is what makes that invisible: it drops contrast
   on the detail and turns the shot into a textured ground for the type
   rather than something a visitor reads as a photograph. */
.ma-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  /* Weighted to the left, where every piece of text sits: the copy keeps a
     dark ground to sit on while the right-hand side of the shot stays open
     enough to read as a golf course rather than a green wash. */
  background:
    linear-gradient(180deg, rgba(22,61,43,.74) 0%, rgba(22,61,43,.46) 45%, rgba(22,61,43,.86) 100%),
    linear-gradient(90deg, rgba(22,61,43,.78) 0%, rgba(22,61,43,.46) 42%, rgba(22,61,43,.08) 78%);
}
.ma-hero__inner{
  position:relative;
  padding-block:clamp(3.5rem,11vw,7.5rem);
  max-width:var(--wp--style--global--content-size);
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem);
}
.ma-hero__badge{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.4rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--turf);background:var(--wheat);
  padding:.42rem .9rem;border-radius:999px;
}
/* A stadium-shaped pill needs its text on one line. This label runs to 38
   uppercase characters, so on a phone it wrapped and the 999px radius drew
   big round caps around a two-line block. Below the breakpoint it drops the
   chrome and becomes the same eyebrow label used everywhere else. */
@media (max-width:52rem){
  .ma-hero__badge{
    display:block;padding:0;border-radius:0;background:none;
    color:var(--wheat);margin-bottom:1rem;letter-spacing:.11em;line-height:1.45;
  }
}
.ma-hero h1{
  color:var(--cream);margin:0 0 1.1rem;max-width:16ch;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.ma-hero h1 em{display:block;font-style:normal;color:var(--wheat)}
.ma-hero__lede{
  color:#DCE6D8;font-size:clamp(1.08rem,1.7vw,1.34rem);line-height:1.55;
  max-width:44ch;margin:0 0 2rem;text-shadow:0 1px 14px rgba(0,0,0,.3);
}
.ma-hero__acts{display:flex;flex-wrap:wrap;gap:.8rem}

/* The three numbers a first-time visitor actually wants: what it costs, how
   many holes, whether they can just turn up. */
.ma-hero__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;margin-top:clamp(2.25rem,5vw,3.5rem);
  border-top:1px solid rgba(247,244,236,.22);padding-top:1.5rem;
}
.ma-hero__fact b{
  display:block;font-family:var(--display);font-weight:700;font-optical-sizing:auto;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1;color:var(--cream);
}
.ma-hero__fact span{
  display:block;margin-top:.4rem;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#A9BDA4;line-height:1.35;
}
@media (max-width:40rem){
  .ma-hero__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .ma-hero__fact span{letter-spacing:.06em;font-size:.68rem}
  .ma-hero__acts > *{flex:1 1 100%}
}

/* -------------------------------------------------------------- cards ---- */
.ma-grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.ma-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ma-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:62rem){
  .ma-grid--3,.ma-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40rem){
  .ma-grid--2,.ma-grid--3,.ma-grid--4{grid-template-columns:minmax(0,1fr)}
}

/* NOT height:100%. A grid item already stretches to its row (align-items
   defaults to stretch), so height:100% adds nothing — and it actively breaks:
   it resolves against the grid AREA, which fixes the card at the row height
   computed before the display face finished loading. The content then needs
   more room than that frozen value, overflows the card's own box, and paints
   over whatever follows the grid. That is how the leagues CTA on the front
   page ended up sitting on top of the Monday card. Leave the height alone and
   let the row size to content. */
.ma-card{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1.25rem,2.4vw,1.75rem);
  display:flex;flex-direction:column;gap:.7rem;
  box-shadow:0 1px 2px rgba(22,61,43,.05);
}
.ma-card h3{margin:0}
.ma-card p{font-size:1rem;color:var(--slate);margin:0}
a.ma-card{text-decoration:none;color:inherit;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
a.ma-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,61,43,.13);border-color:var(--wheat);color:inherit}
.ma-band--turf .ma-card{background:#1D4A35;border-color:#2F5F46;color:#CBD8C6}
.ma-band--turf .ma-card p{color:#B6C7B1}

.ma-card__icon{
  width:46px;height:46px;flex:0 0 auto;border-radius:12px;
  background:var(--sand);color:var(--turf);display:grid;place-items:center;
}
.ma-band--turf .ma-card__icon{background:#2F5F46;color:var(--wheat)}
.ma-card__more{margin-top:auto;padding-top:.4rem;font-weight:700;color:var(--clay);font-size:.98rem}
.ma-band--turf .ma-card__more{color:var(--wheat)}

/* A card whose top half is a photograph. */
.ma-photocard{padding:0;overflow:hidden}
.ma-photocard img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ma-photocard__body{padding:clamp(1.15rem,2.2vw,1.5rem);display:flex;flex-direction:column;gap:.6rem;flex:1 1 auto}

/* Square-bullet list. */
.ma-ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}
.ma-ticks li{display:flex;align-items:flex-start;gap:.7rem;font-size:1rem;line-height:1.45;color:var(--turf-2)}
.ma-ticks li::before{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.52em;
  background:var(--wheat);border-radius:50%;
}
.ma-band--turf .ma-ticks li{color:#CBD8C6}

/* --------------------------------------------------------- rate tables --- */
.ma-rates-wrap{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:#fff}
.ma-rates{border-collapse:collapse;width:100%;font-size:1rem}
.ma-rates caption{
  caption-side:top;text-align:left;padding:1.1rem 1.25rem .9rem;
  font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--turf);
  background:var(--sand);border-bottom:1px solid var(--rule);
}
.ma-rates th,.ma-rates td{text-align:left;padding:.85rem 1.25rem;border-bottom:1px solid var(--rule);vertical-align:middle}
.ma-rates thead th{
  background:var(--turf);color:var(--cream);font-family:var(--text);
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:none;
}
.ma-rates tbody tr:last-child :is(th,td){border-bottom:none}
.ma-rates tbody th{font-weight:600;color:var(--turf);width:46%}
.ma-rates td.ma-price{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--turf);white-space:nowrap;text-align:right}
/* The prices are right-aligned, so their headers have to be too — otherwise
   the column header sits over empty space and the numbers look unlabelled. */
.ma-rates thead th:not(:first-child){text-align:right}
.ma-rates tbody tr:nth-child(even){background:#FBFAF6}

/* These tables stay tables on a phone. The obvious mobile treatment — collapse
   each row to a card and hide the header — breaks here for two reasons: every
   one of these tables has TWO price columns, so both prices land in the same
   grid cell and print on top of each other; and hiding the header throws away
   the only thing that says which price is the weekday one. The labels are
   short ("Walking", "With a cart"), so the honest fix is simply to tighten the
   padding and let the table be a table. */
@media (max-width:48rem){
  .ma-rates{font-size:.95rem}
  .ma-rates caption{padding:.95rem 1rem .8rem;font-size:1.1rem}
  .ma-rates th,.ma-rates td{padding:.7rem .6rem}
  .ma-rates thead th{font-size:.68rem;letter-spacing:.04em}
  .ma-rates tbody th{width:auto}
  .ma-rates td.ma-price{font-size:1rem}
}
@media (max-width:26rem){
  .ma-rates{font-size:.9rem}
  .ma-rates th,.ma-rates td{padding:.6rem .4rem}
}

.ma-finecopy{font-size:.92rem;color:var(--slate);margin:1rem 0 0}

/* ---------------------------------------------------------- scorecard ---- */
/* A scorecard genuinely is tabular data — nine holes across, par and yardage
   down — so unlike the rate tables it stays a table on a phone and scrolls
   sideways instead, with the row label pinned so you never lose which line
   you are reading. */
.ma-scorecard{
  overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:#fff;
  -webkit-overflow-scrolling:touch;
}
.ma-scorecard table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.98rem}
.ma-scorecard :is(th,td){padding:.7rem .55rem;text-align:center;border-bottom:1px solid var(--rule)}
.ma-scorecard thead th{
  background:var(--turf);color:var(--cream);font-family:var(--text);
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:none;
}
.ma-scorecard tbody th[scope="row"]{
  text-align:left;position:sticky;left:0;background:var(--sand);
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--turf);min-width:6.5rem;
}
.ma-scorecard tbody tr:last-child :is(th,td){border-bottom:none}
.ma-scorecard td{font-family:var(--display);font-weight:700;color:var(--turf-2);font-variant-numeric:tabular-nums}
.ma-scorecard .ma-total{background:var(--sand);color:var(--turf);font-weight:700}
/* .ma-total also sets a dark text colour for the body cell, and it
   out-specifies the `thead th` rule — so without naming the colour
   again here the header reads dark green on dark green (1.2:1). */
.ma-scorecard thead th.ma-total{background:#0F2D20;color:var(--wheat)}
.ma-scroll-hint{font-size:.88rem;color:var(--slate);margin:.6rem 0 0}
@media (min-width:56rem){.ma-scroll-hint{display:none}}

/* ------------------------------------------------------------- holes ----- */
.ma-hole{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1.15rem,2.2vw,1.5rem);display:flex;gap:1.1rem;align-items:flex-start;
}
.ma-hole__num{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  background:var(--turf);color:var(--wheat);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
}
.ma-hole__body{min-width:0}
.ma-hole h3{margin:0 0 .15rem;font-size:1.1rem}
.ma-hole__spec{
  display:flex;flex-wrap:wrap;gap:.35rem .75rem;margin:0 0 .5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);
}
.ma-hole p{margin:0;font-size:.98rem;color:var(--slate);line-height:1.55}

/* ----------------------------------------------------------- leagues ----- */
.ma-league{
  background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
}
.ma-league__day{
  background:var(--turf);color:var(--cream);padding:.85rem 1.25rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
}
.ma-league__day b{font-family:var(--display);font-weight:700;font-size:1.22rem;line-height:1.1}
.ma-league__day span{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wheat)}
.ma-league__body{padding:1.25rem;display:flex;flex-direction:column;gap:.6rem;flex:1 1 auto}
.ma-league__body h3{margin:0;font-size:1.14rem}
.ma-league__body p{margin:0;font-size:.98rem;color:var(--slate)}
.ma-league__meta{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--rule);font-size:.94rem}
.ma-league__meta a{font-weight:600}
.ma-tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:999px;background:var(--sand);color:var(--turf);
}
.ma-tag--full{background:#F3DCD7;color:var(--clay)}

/* ------------------------------------------------------------ events ----- */
.ma-events{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ma-events li{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;
  gap:.35rem 1.25rem;align-items:baseline;
  padding:1rem .25rem;border-bottom:1px solid var(--rule);
}
.ma-events__date{
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--turf);
  white-space:nowrap;
}
.ma-events__name{font-weight:600;color:var(--turf-2);font-size:1.02rem}
.ma-events__status{
  font-size:.82rem;font-weight:600;color:var(--slate);text-align:right;white-space:nowrap;
}
/* The status is the operational detail — "closed until 5pm" — and on a phone
   it matters as much as the name, so it gets its own line rather than being
   squeezed into a third column six characters wide. */
@media (max-width:40rem){
  .ma-events li{grid-template-columns:minmax(0,1fr);gap:.2rem;padding:.9rem .25rem}
  .ma-events__status{text-align:left;white-space:normal}
  .ma-events__date{font-size:.95rem;color:var(--clay)}
}

/* ------------------------------------------------------------ gallery ---- */
.ma-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.ma-gallery figure{margin:0;border-radius:14px;overflow:hidden;background:var(--sand)}
.ma-gallery img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .5s ease}
.ma-gallery figure:hover img{transform:scale(1.04)}
.ma-gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.ma-gallery figure:nth-child(1) img{aspect-ratio:auto;height:100%;min-height:100%}
/* Five photographs in a three-column grid where the first one takes a 2x2
   block leaves exactly one cell empty on the last row. Widening the fourth
   closes it, so the block reads as a composed grid rather than a gap. */
.ma-gallery figure:nth-child(4){grid-column:span 2}
@media (max-width:52rem){
  .ma-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-gallery figure:nth-child(1){grid-column:span 2;grid-row:auto}
  .ma-gallery figure:nth-child(1) img{aspect-ratio:3/2}
  .ma-gallery figure:nth-child(4){grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.ma-gallery img{transition:none}}

/* --------------------------------------------------------- split block --- */
/* Photograph one side, copy the other, alternating down the page. */
.ma-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.ma-split__media img{width:100%;border-radius:16px;display:block;aspect-ratio:3/2;object-fit:cover}
.ma-split--flip .ma-split__media{order:2}
@media (max-width:52rem){
  .ma-split{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .ma-split--flip .ma-split__media{order:0}
}

/* ------------------------------------------------------------ CTA band --- */
/* The closing call to action. It carries a photograph precisely so it never
   fuses into the green footer the way a flat --turf band would. */
.ma-cta{position:relative;isolation:isolate;overflow:hidden;background:var(--turf)}
.ma-cta__media{position:absolute;inset:0;z-index:-2}
.ma-cta__media img{width:100%;height:100%;object-fit:cover;display:block}
.ma-cta__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(22,61,43,.93) 30%,rgba(22,61,43,.72) 100%)}
.ma-cta__inner{
  position:relative;padding-block:clamp(3rem,7vw,5rem);
  max-width:var(--wp--style--global--content-size);margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem);
}
.ma-cta h2{color:var(--cream);margin:0 0 .85rem;max-width:24ch}
.ma-cta p{color:#CBD8C6;max-width:52ch;margin:0 0 1.9rem;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.ma-cta__acts{display:flex;flex-wrap:wrap;gap:.8rem}
@media (max-width:40rem){.ma-cta__acts > *{flex:1 1 100%}}

/* --------------------------------------------------------- buttons ------- */
.ma-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.7rem;border-radius:999px;
  font-family:var(--text);font-weight:700;font-size:1.0625rem;line-height:1;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.ma-btn--primary{background:var(--flag);color:#fff;border-color:var(--flag)}
.ma-btn--primary:hover{background:var(--clay);border-color:var(--clay);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(163,53,32,.3)}
.ma-btn--ghost{background:transparent;color:var(--cream);border-color:rgba(247,244,236,.55)}
.ma-btn--ghost:hover{background:rgba(247,244,236,.12);border-color:var(--cream);color:var(--cream)}
.ma-btn--dark{background:var(--turf);color:var(--cream);border-color:var(--turf)}
.ma-btn--dark:hover{background:#0F2D20;border-color:#0F2D20;color:var(--cream);transform:translateY(-2px)}
.ma-btn--outline{background:transparent;color:var(--turf);border-color:var(--turf)}
.ma-btn--outline:hover{background:var(--turf);color:var(--cream)}

/* ------------------------------------------------------------- header ---- */
/* Sticky has to go on the WRAPPER. WordPress renders the template part inside
   <header class="wp-block-template-part">, which is exactly as tall as the bar,
   so position:sticky on the bar itself has no room to stick in and the header
   simply scrolls away. */
header.wp-block-template-part{position:sticky;top:0;z-index:100}
.ma-header{
  background:var(--cream);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 12px rgba(22,61,43,.06);
}
.ma-header a{text-decoration:none}

/* Hand-rolled rather than the core Navigation block: core ships ~20KB of CSS
   and its overlay rules out-specify anything layered on top. */
.ma-headbar{display:flex;align-items:center;gap:1.35rem}
.ma-brand{display:flex;align-items:center;gap:.7rem;min-height:52px;margin-right:auto;text-decoration:none}
.ma-brand img{height:48px;width:auto;flex:0 0 auto;display:block}
.ma-brand__word{display:block;line-height:1.05}
.ma-brand__word b{
  display:block;font-family:var(--display);font-weight:700;font-optical-sizing:auto;
  font-size:1.26rem;letter-spacing:-.01em;color:var(--turf);
}
.ma-brand__word span{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin-top:.18rem;white-space:nowrap;
}

.ma-nav__inner{display:flex;align-items:center;gap:1.45rem}
.ma-nav__link{color:var(--turf-2);font-weight:600;font-size:.98rem;line-height:1;position:relative;padding-block:.4rem;white-space:nowrap}
.ma-nav__link:hover{color:var(--clay)}
.ma-nav__link[aria-current="page"]{color:var(--turf)}
.ma-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2.5px;
  background:var(--wheat);border-radius:2px;
}
.ma-nav__foot{display:none}

.ma-head__cta{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--flag);color:#fff;font-weight:700;font-size:.96rem;
  padding:.72rem 1.3rem;border-radius:999px;line-height:1;white-space:nowrap;
  transition:background-color .14s ease;
}
.ma-head__cta:hover{background:var(--clay);color:#fff}
.ma-head__tel{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--turf);font-weight:700;font-size:.96rem;white-space:nowrap;
}
.ma-head__tel:hover{color:var(--clay)}
.ma-head__tel svg{color:var(--clay);flex:0 0 auto}

.ma-burger{display:none}

/* ------------------------------------------------------------- footer ---- */
.ma-footer{background:var(--turf);color:#A9BDA4;font-size:1rem}
.ma-footer a{color:#CBD8C6;text-decoration:none}
.ma-footer a:hover{color:var(--wheat);text-decoration:underline}
.ma-footer h2{
  font-size:.8125rem!important;font-family:var(--text)!important;font-weight:700!important;
  letter-spacing:.15em;text-transform:uppercase;color:var(--wheat)!important;margin:0 0 .95rem;
}
.ma-footer__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.ma-footer__brand img{height:62px;width:auto;display:block}
.ma-footer__brand b{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--cream);line-height:1.1;display:block}
.ma-footer__brand span{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wheat)}
.ma-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.ma-footer__bottom{
  margin-top:2.25rem;padding-top:1.4rem;border-top:1px solid #2F5F46;
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;font-size:.9rem;color:#93AA8F;
}

/* -------------------------------------------------------------- forms ---- */
.ma-form{
  background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:clamp(1.35rem,3vw,2.25rem);color:var(--turf-2);
  box-shadow:0 10px 30px rgba(22,61,43,.07);
}
.ma-form h3{margin:0 0 .4rem}
.ma-form__intro{font-size:1rem;margin:0 0 1.5rem;color:var(--slate)}
.ma-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.05rem}
.ma-field label{font-family:var(--text);font-size:.94rem;font-weight:700;color:var(--turf)}
/* Inline, the hint runs on from the label as one sentence ("Phone Best number
   to reach you on") and wraps mid-phrase. Its own line reads as a hint. */
.ma-hint{display:block;font-size:.85rem;font-weight:400;color:var(--slate);margin-top:.1rem}
.ma-field :is(input,select,textarea){
  font-family:var(--text);font-size:1.0625rem;color:var(--turf);background:#FBFAF6;
  border:1.5px solid var(--rule);border-radius:9px;padding:.75rem .85rem;min-height:50px;width:100%;
  /* Without this, width:100% is the content box and the padding and border are
     added on top, so every field runs past the card it sits in. */
  box-sizing:border-box;
}
.ma-field textarea{min-height:7.5rem;resize:vertical;line-height:1.55}
.ma-field :is(input,select,textarea):focus{outline:3px solid var(--wheat);outline-offset:1px;border-color:var(--turf)}
/* One field in a pair often carries a hint and the other does not, which makes
   the two labels different heights and leaves the inputs on different lines.
   Aligning the boxes to their ends lines the inputs up, since an input is the
   last thing in every field. */
.ma-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem;align-items:end}
@media (max-width:40rem){.ma-field-row{grid-template-columns:minmax(0,1fr);gap:0}}
.ma-submit{
  width:100%;min-height:56px;margin-top:.4rem;cursor:pointer;
  background:var(--flag);color:#fff;border:2px solid var(--flag);border-radius:999px;
  font-family:var(--text);font-weight:700;font-size:1.1rem;
  transition:background-color .14s ease,transform .14s ease,box-shadow .14s ease;
}
.ma-submit:hover{background:var(--clay);border-color:var(--clay);transform:translateY(-2px);box-shadow:0 10px 22px rgba(163,53,32,.28)}
.ma-submit:active{transform:none;box-shadow:none}
.ma-form__fine{font-size:.88rem;color:var(--slate);margin:1rem 0 0}
/* Off-screen rather than display:none, so bots still see and fill it. */
.ma-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.ma-note{border:1.5px solid;border-radius:12px;padding:1rem 1.15rem;margin:0 0 1.5rem;font-size:1rem}
.ma-note--ok{background:#E4F0E6;border-color:#2F7D4F;color:#17492C}
.ma-note--err{background:#FBEAE5;border-color:var(--clay);color:#7E2817}
.ma-note a{color:inherit}

/* ------------------------------------------------------- page furniture -- */
.ma-crumbs{font-size:.9rem;color:var(--slate);margin:0 0 1.2rem}
.ma-crumbs a{color:var(--slate);text-decoration:none;font-weight:600}
.ma-crumbs a:hover{color:var(--clay);text-decoration:underline}
.ma-prose{max-width:68ch}
.ma-prose h3{margin:1.9rem 0 .6rem}
.ma-prose > :first-child{margin-top:0}
.ma-plain{padding-left:1.2rem;margin:0 0 1.05em;max-width:68ch}
.ma-plain li{margin-bottom:.45rem}
.ma-plain li::marker{color:var(--wheat)}

/* The page title block that opens every interior page. */
.ma-pagehead{background:var(--turf);position:relative;isolation:isolate;overflow:hidden}
.ma-pagehead::after{
  /* A soft wheat glow in the corner stops the slab reading as a flat
     rectangle without costing another image request. */
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60rem 22rem at 88% -30%, rgba(224,181,113,.22), transparent 70%);
}
.ma-pagehead__inner{
  max-width:var(--wp--style--global--content-size);margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem);padding-block:clamp(2.5rem,6vw,4.25rem);
}
.ma-pagehead h1{color:var(--cream);margin:0;max-width:20ch}
.ma-pagehead .ma-eyebrow{color:var(--wheat)}
.ma-pagehead p{color:#CBD8C6;max-width:56ch;margin:1rem 0 0;font-size:clamp(1.05rem,1.5vw,1.2rem)}

/* ---------------------------------------------------------------- FAQ ---- */
.ma-faq{border-top:1px solid var(--rule);max-width:56rem}
.ma-faq details{border-bottom:1px solid var(--rule)}
.ma-faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem .25rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(1.06rem,1.8vw,1.22rem);
  line-height:1.25;color:var(--turf);
}
.ma-faq summary::-webkit-details-marker{display:none}
.ma-faq summary:hover{color:var(--clay)}
.ma-faq summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;margin-top:.35em;
  border-right:2.5px solid var(--wheat);border-bottom:2.5px solid var(--wheat);
  transform:rotate(45deg);transition:transform .18s ease;
}
.ma-faq details[open] summary::after{transform:rotate(-135deg)}
.ma-faq__a{padding:0 .25rem 1.3rem}
.ma-faq__a p{margin:0 0 .8rem;color:var(--slate)}
.ma-faq__a p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.ma-faq summary::after,.ma-submit,.ma-btn,a.ma-card{transition:none}}

/* ---------------------------------------------------------- contact ------ */
.ma-contact-grid{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
/* The form is first in the source so that on a phone, where these columns
   stack, it is the first thing on screen rather than sitting under the
   address block — and so the post-submit #enquire jump lands on the
   confirmation. Two columns wide there is room for both, so it goes back to
   the right where it reads better. */
@media (min-width:58.0625rem){
  .ma-contact-grid > :first-child{grid-column:2;grid-row:1}
  .ma-contact-grid > :last-child{grid-column:1;grid-row:1}
}
@media (max-width:58rem){.ma-contact-grid{grid-template-columns:minmax(0,1fr)}}
.ma-dl{margin:0;padding:0;display:flex;flex-direction:column;gap:1.3rem}
.ma-dl dt{font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);margin-bottom:.3rem}
.ma-dl dd{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.45rem);color:var(--turf);line-height:1.3}
.ma-dl dd a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ma-dl dd a:hover{color:var(--clay);text-decoration:underline}
.ma-dl dd small{display:block;font-family:var(--text);font-size:.94rem;font-weight:500;color:var(--slate);letter-spacing:0;margin-top:.25rem;line-height:1.5}

.ma-map{border:0;width:100%;aspect-ratio:16/10;border-radius:16px;display:block;background:var(--sand)}

/* ------------------------------------------ mobile quick action bar ------ */
/* On mobile the header CTA collapses into the hamburger, which buries the two
   things a visitor actually wants: the phone number and the tee-time form. */
.ma-actionbar{display:none}
@media (max-width:52rem){
  .ma-actionbar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:0 .75rem calc(.75rem + env(safe-area-inset-bottom,0px));
    /* The wrapper spans the viewport so the pills can centre on a tablet, but
       only the pills themselves should ever swallow a tap. */
    pointer-events:none;
    transform:translateY(calc(100% + 1rem));opacity:0;visibility:hidden;
    transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s ease,visibility .26s;
  }
  .ma-actionbar[data-show="true"]{transform:none;opacity:1;visibility:visible}
  .ma-actionbar__inner{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:26rem;margin:0 auto;pointer-events:auto}
  .ma-ab{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:52px;padding:.5rem 1rem;text-decoration:none;border-radius:999px;
    font-family:var(--text);font-weight:700;font-size:1.02rem;
    box-shadow:0 8px 24px rgba(22,61,43,.22);
  }
  .ma-ab--call{background:var(--cream);color:var(--turf);border:1.5px solid var(--turf)}
  .ma-ab--book{background:var(--flag);color:#fff;border:1.5px solid var(--flag)}
}
@media (max-width:52rem) and (prefers-reduced-motion:reduce){.ma-actionbar{transition:none}}

/* --------------------------------------------------------- back to top --- */
.ma-top{
  position:fixed;right:1rem;z-index:96;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--cream);color:var(--turf);border:1.5px solid var(--turf);
  box-shadow:0 6px 18px rgba(22,61,43,.2);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,visibility .2s,transform .2s ease,bottom .22s ease;
}
.ma-top[data-show="true"]{opacity:1;visibility:visible;transform:none}
/* Step up over the action bar by its measured height rather than a guess, so
   the two never overlap when a pill label wraps. */
body[data-ab="shown"] .ma-top{bottom:calc(1rem + var(--ma-ab-h,64px) + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.ma-top{transition:none}}

/* --------------------------------------------------------- mobile menu --- */
/* The checkbox sits inside the button at opacity 0 rather than clipped
   off-screen. A clipped input receives focus on tap and the browser scrolls
   the page to reach it, which reads as the menu "reloading the page". */
.ma-burger{position:relative;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.ma-burger__box{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.ma-burger__box:focus-visible + .ma-burger__bars{outline:2px solid var(--flag);outline-offset:8px;border-radius:2px}
.ma-burger__bars{position:relative;display:block;width:25px;height:17px;pointer-events:none}
.ma-burger__bars i{
  position:absolute;left:0;right:0;height:2.5px;background:var(--turf);border-radius:2px;
  transition:top .2s ease,transform .2s ease,opacity .12s linear;
}
.ma-burger__bars i:nth-child(1){top:0}
.ma-burger__bars i:nth-child(2){top:7.25px}
.ma-burger__bars i:nth-child(3){top:14.5px}
.ma-burger__box:checked + .ma-burger__bars i:nth-child(1){top:7.25px;transform:rotate(45deg)}
.ma-burger__box:checked + .ma-burger__bars i:nth-child(2){opacity:0}
.ma-burger__box:checked + .ma-burger__bars i:nth-child(3){top:7.25px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.ma-burger__bars i,.ma-nav{transition:none!important}}

@media (max-width:52rem){
  :root{--ma-header-h:68px}
  .ma-burger{display:inline-flex}
  .ma-head__cta,.ma-head__tel{display:none}
  .ma-brand img{height:42px}
  .ma-brand__word b{font-size:1.1rem}
  .ma-brand__word span{font-size:.6rem;letter-spacing:.14em}

  /* The sticky header is its own stacking context, so the panel's z-index 90
     is measured against its siblings INSIDE the header — which would paint the
     panel over the burger and swallow the tap that should close it. */
  .ma-brand,.ma-burger{position:relative;z-index:95}

  .ma-nav{
    position:fixed;inset:0;z-index:90;background:var(--cream);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s ease;
  }
  .ma-header:has(.ma-burger__box:checked) .ma-nav,
  .ma-header[data-nav="open"] .ma-nav{visibility:visible;opacity:1}

  body:has(.ma-burger__box:checked),body[data-nav="open"]{overflow:hidden}

  /* The action bar (z 95) and back-to-top (z 96) both outrank the panel, so
     they would punch through it. The panel carries its own actions. */
  body:has(.ma-burger__box:checked) .ma-actionbar,
  body:has(.ma-burger__box:checked) .ma-top,
  body[data-nav="open"] .ma-actionbar,
  body[data-nav="open"] .ma-top{display:none!important}

  .ma-nav__inner{
    display:block;max-width:34rem;margin:0 auto;
    /* The panel is position:fixed, so it starts at the TOP OF THE VIEWPORT —
       but the header does not always sit there. Anything above it in the
       document (the preview strip, a future announcement bar) pushes it down
       while the page is scrolled to the top, and offsetting by the header's
       own height then slides the first link underneath the logo. JS measures
       the header's bottom edge each time the panel opens and publishes it as
       --ma-nav-top; the header height is the fallback for no-JS. */
    padding:calc(var(--ma-nav-top, var(--ma-header-h)) + .75rem) 1.25rem 2.5rem;
    min-height:100%;
  }
  .ma-nav__link{
    display:flex;align-items:center;min-height:58px;padding:.25rem 0;
    font-family:var(--display);font-weight:700;font-size:1.45rem;
    letter-spacing:-.01em;line-height:1.15;border-bottom:1px solid var(--rule);
  }
  .ma-nav__link:first-child{border-top:1px solid var(--rule)}
  .ma-nav__link[aria-current="page"]::after{display:none}
  .ma-nav__link[aria-current="page"]{color:var(--clay)}

  .ma-nav__foot{display:block;padding-top:1.75rem}
  .ma-nav__cta{
    display:flex;align-items:center;justify-content:center;min-height:56px;
    padding:.5rem 1rem;background:var(--flag);color:#fff;font-weight:700;font-size:1.05rem;border-radius:999px;
  }
  .ma-nav__tel{
    display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:54px;margin-top:.7rem;
    border:1.5px solid var(--turf);border-radius:999px;color:var(--turf);font-weight:700;font-size:1.05rem;
  }
  .ma-nav__tel svg{flex:0 0 auto;color:var(--clay)}
  .ma-nav__note{margin:1.1rem 0 0;text-align:center;color:var(--slate);font-size:.88rem;line-height:1.5}
}

/* Short screens in landscape: shrink the rows so the CTA stays reachable. */
@media (max-width:52rem) and (max-height:34rem){
  .ma-nav__link{min-height:46px;font-size:1.18rem}
  .ma-nav__foot{padding-top:1rem}
}
@media (max-width:22rem){
  .ma-brand__word b{font-size:1rem}
  .ma-brand img{height:36px}
  .ma-nav__link{font-size:1.25rem;min-height:52px}
}

/* ----------------------------------------------------- mobile tap targets */
/* Measured at a real 390px viewport: footer links and inline links ran
   18-34px tall. 44px is the floor a thumb needs. */
.ma-footer ul a{display:inline-flex;align-items:center;min-height:44px}
.ma-crumbs a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:52rem){
  .ma-prose p > a,.ma-prose li > a{padding-block:.5rem}
}

@media print{
  .ma-header,.ma-footer,.ma-actionbar,.ma-top,.ma-cta{display:none!important}
  .ma-band,.ma-pagehead{background:#fff!important;color:#000!important;padding-block:1rem}
  .ma-pagehead h1,.ma-pagehead p{color:#000!important}
}

/* --------------------------------------------------- alignment repairs --- */
/* WordPress's constrained layout centres any child narrower than the content
   width. Our text is capped at ~68ch for readability, so every paragraph was
   being centred and appeared indented next to a full-width heading. Pin them
   to the left instead. Specificity here has to beat `:root :where(...)`. */
.ma-band > *{
  margin-left:max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
  margin-right:auto !important;
}

/* A flag-red button on a flag-red ground would vanish; nothing in the theme
   does that today, but the CTA band is editable, so pin the safe pairing. */
.ma-band--turf .wp-block-button__link,
.ma-band--turf .wp-element-button{background-color:var(--flag);color:#fff;border-color:var(--flag)}
.ma-band--turf .wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent;color:var(--cream);border-color:var(--cream);
}