/* =============================================================================
   Liora — shell.css

   Everything shared across the five pages: tokens, reset, the eyebrow and button
   components, the reveal classes, the fixed nav, the mobile panel and the footer.
   Per-page CSS goes in assets/css/pages/<slug>.css and loads AFTER this file.

   Ported verbatim from 02_design-update_2026-08-27/home.html's <style> block. The
   selectors and values are matched to the ported markup and the pixel diff against
   that file is the acceptance test — do not tidy them.

   Two deliberate omissions from that block:

     · the @import of the Google Fonts stylesheet — the fonts are enqueued in
       inc/assets.php instead, ahead of this file, so there is no render-blocking
       @import inside a stylesheet;
     · the page-level halves of two rules that home.html keeps in one place. The
       prefers-reduced-motion block there also silences `.hero img` and
       `.story-mark`, and the Astra image hardening at the end of the file also
       names `.hero img`, `.story-image img`, `.flavor-image img`,
       `.feature-image img`, `.visit-image img` and `.culinary-item-image img`.
       Those are homepage selectors and belong in pages/home.css. Both are called
       out again at the point they were split, so neither gets lost.
   ============================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bone:#F5F1E9;
  --bone-deep:#EDE7DA;
  --ink:#211910;
  --ink-soft:#5B5347;
  --line: rgba(33,29,24,0.14);
  --line-strong: rgba(33,29,24,0.28);
  /* contact.html adds this one for rules on its dark panels; unused by the chrome
     itself, kept here because :root is the shared token layer for every page. */
  --line-light: rgba(245,241,233,0.16);
  --clay:#9C6B45;
  --terracotta:#AD5F3D;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; width:100%; height:100%; object-fit:cover; border-radius:0;}
a{color:inherit; text-decoration:none;}

/* ---------- Eyebrow labels ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:#DB9C6E;
  font-weight:600;
}
.eyebrow.on-dark{ color:#DB9C6E; }

/* ---------- Buttons — bordered rectangle, Claudine-style ---------- */
.btn-ghost{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  padding:16px 38px;
  border:1px solid currentColor;
  background:transparent;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.btn-ghost:hover{ transform:translateY(-2px); }
.btn-ghost.light{ color:#F5F1E9; }
.btn-ghost.light:hover{ background:#F5F1E9; color:var(--ink); }
.btn-ghost.dark{ color:var(--ink); }
.btn-ghost.dark:hover{ background:var(--ink); color:var(--bone); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px;
  z-index:100;
  color:#F5F1E9;
  background:transparent;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease, color .35s ease;
}
.nav.is-scrolled{
  background:var(--bone);
  color:var(--ink);
  padding:14px 48px;
  box-shadow:0 1px 0 var(--line);
}
.nav-links{ display:flex; gap:36px; list-style:none; }
.nav-links a{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  position:relative; transition:color .3s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:currentColor;
  transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-logo{ display:flex; align-items:center; justify-content:center; }
.nav-logo img{
  height:52px; width:auto; object-fit:contain;
  transition:filter .35s ease, height .35s ease;
}
.nav.is-scrolled .nav-logo img{ filter:brightness(0); height:42px; }
.nav-right{ display:flex; align-items:center; gap:36px; }
.nav-reserve{
  border:1px solid currentColor;
  padding:10px 22px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:500;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-reserve:hover{ background:#F5F1E9; color:var(--ink); transform:translateY(-2px); }
.nav.is-scrolled .nav-reserve:hover{ background:var(--ink); color:var(--bone); }

section{ position:relative; }

/* ---------- Reveal / motion ---------- */
.will-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.will-reveal.is-visible{ opacity:1; transform:translateY(0); }

.will-reveal-img{
  opacity:0; transform:translateY(24px) scale(1.04);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.will-reveal-img.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img{ transform:scale(1.06); }

@media (prefers-reduced-motion: reduce){
  /* home.html also silences `.hero img` and `.story-mark` here — both homepage
     selectors, so those two lines belong in pages/home.css. */
  .will-reveal{ opacity:1; transform:none; transition:none; }
  .will-reveal-img{ opacity:1; transform:none; transition:none; }
  .img-zoom img{ transition:none; }
}

/* ---------- Footer ---------- */
footer{ background:var(--bone); padding:44px 48px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); flex-wrap:wrap; gap:24px; }
.footer-logo img{ height:30px; width:auto; filter:brightness(0); }
.footer-links{ display:flex; gap:32px; list-style:none; flex-wrap:wrap; }
.footer-links a{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }
.footer-copy{ font-size:11px; color:var(--ink-soft); }

/* Legal row — audit item F09, added 18 Sep 2026. NOT in the approved design.

   A SECOND full-width line rather than a fourth item on the existing one, so the ported footer
   geometry above is untouched: `footer` is already flex-wrap:wrap, and flex-basis:100% drops
   this onto its own line without changing how logo / links / copyright lay out. Verified by
   measurement, not by eye.

   Sits DIRECTLY UNDER the nav links with no rule above it (client, 18 Sep 2026). `footer` has
   `gap:24px`, which applies between wrapped LINES as well as between items, so the negative
   margin claws 14px of that back and leaves the policy links reading as a second line of the
   same block rather than as a separate band.

   ⚑ The wrapper div is still load-bearing even without the border. `footer ul { margin:0
   !important; padding:0 !important }` further down this file stops the browser's list indent
   pushing the nav links out of alignment with the Reservation button — and it also kills any
   margin on a <ul> in the footer, !important and all. The offset has to sit on the div.

   Quieter than .footer-links on purpose: sentence case rather than the nav row's uppercase
   tracking, so it reads as small print instead of competing with the navigation. */
/* The middle column: the nav row, and the legal row centred under it. See the comment in
   template-parts/chrome/footer.php for why this exists at all — in short, `space-between` puts
   the middle item at the centre of the REMAINING space, and the two rows only agree about where
   that is if they are the same item.

   min-width:0 so a long legal row can wrap instead of widening the column and dragging the nav
   row off the position the design gave it. */
.footer-middle{ display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; }

.footer-legal{ width:100%; }
.footer-legal ul{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; list-style:none; }
.footer-legal a{ font-size:11px; color:var(--ink-soft); opacity:0.8; transition:opacity .25s ease; }
.footer-legal a:hover{ opacity:1; }
.footer-legal a.is-current{ color:#DB9C6E; opacity:1; }

@media (max-width: 900px){
  .nav{ padding:18px 24px; } .nav.is-scrolled{ padding:12px 24px; } .nav-links{ display:none; }
  footer{ padding:36px 24px; }
}

/* Astra applies a global default heading color (h1-h6) that beats our inherited
   section colors — force headings back to inheriting from their own section
   instead of Astra's default grey.
   (home.html pairs this with an image-sizing block naming .hero img,
   .story-image img, .flavor-image img, .feature-image img, .visit-image img and
   .culinary-item-image img — page selectors, so that block goes in
   pages/home.css.) */
h1, h2, h3, h4, h5, h6 { color: inherit !important; }

/* Astra also puts default margin/padding on <ul> elements, which knocks the
   nav links out of vertical alignment with the Reservation button. */
.nav-links, .nav-links li, footer ul { margin: 0 !important; padding: 0 !important; }

/* current page gets the accent in the nav (round 3 - nav now routes to real pages) */
.nav-links a.is-current{ color:#DB9C6E; }
.footer-links a.is-current{ color:#DB9C6E; }

/* logo links home (round 3) — the anchor must not disturb the logo's sizing */
.nav-logo a, .footer-logo a{ display:inline-flex; align-items:center; line-height:0; }

/* ---------- Mobile navigation (round 4) ----------
   Under 900px the nav links were simply display:none, leaving only the logo and the
   Reservation button — you had to scroll to the footer to change page. */
.nav-burger{
  display:none; position:relative; z-index:210;
  width:40px; height:40px; padding:0; margin-left:-8px;
  background:none; border:0; cursor:pointer; color:inherit;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-burger span{
  display:block; width:22px; height:1.5px; background:currentColor;
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.nav-burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:96px 28px 40px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,8vw,44px); line-height:1.5; color:#F5F1E9;
  transition:color .3s ease;
}
.mobile-menu a:hover, .mobile-menu a.is-current{ color:#DB9C6E; }
.mobile-menu .mobile-reserve{
  font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; font-weight:500; color:#F5F1E9;
  border:1px solid rgba(245,241,233,0.5); padding:15px 34px; margin-top:30px;
}
.mobile-menu .mobile-reserve:hover{ background:#F5F1E9; color:var(--ink); }
body.menu-open{ overflow:hidden; }

/* While the panel is open the whole nav must sit ABOVE it — .nav is position:fixed with
   z-index:100, which creates a stacking context, so the burger's own z-index cannot escape
   it and the close (X) would be buried under the panel. Lift the bar itself, and force it
   back to its transparent/light state so it reads over the dark panel even mid-scroll.
   Specificity beats .nav.is-scrolled here, so no !important is needed. */
body.menu-open .nav{ z-index:210; background:transparent; color:#F5F1E9; box-shadow:none; }
body.menu-open .nav .nav-logo img{ filter:none; height:52px; }
body.menu-open .nav-reserve{ display:none; }   /* the panel carries its own Reservation CTA */

@media (max-width:900px){
  .nav-burger{ display:flex; }
}
@media (min-width:901px){
  .mobile-menu{ display:none; }
}

/* WordPress admin bar: it is position:fixed at the top for logged-in users and
   html{margin-top:32px} does not move a fixed .nav, so the bar overlaps the logo.
   Push the nav below it while it is on screen. Front end only — never rendered
   for a visitor, and never present in a capture taken logged out. */
body.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .nav{ top:46px; }
}

/* ---------- Full-bleed page hero (round 2 — standardised across inner pages) ----------
   Shared: used by Our Story, Menu and Contact, byte-identical in all three design
   files. The Space has no page hero. Ported from our-story.html, the first inner
   page built — do not duplicate these rules into a page stylesheet. */
.page-hero{ position:relative; width:100%; height:clamp(440px,66vh,700px); overflow:hidden; background:var(--ink); }
.page-hero img{ width:100%; height:100%; object-fit:cover; }
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,15,10,0.52) 0%, rgba(20,15,10,0.26) 44%, rgba(20,15,10,0.58) 100%);
}
.page-hero-content{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:96px 40px 0; color:#F5F1E9;
}
.page-hero-content .eyebrow{ color:rgba(245,241,233,0.86); }
.page-hero-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(38px,5.6vw,80px); line-height:1.03; max-width:18ch; margin-top:18px;
}
@media (max-width:760px){
  .page-hero{ height:clamp(340px,52vh,460px); }
  .page-hero-content{ padding:78px 24px 0; }
}

/* ---------- Closing CTA — dark, centred, text-only ----------
   Shared: used by Our Story, The Space, Menu and Contact. The four design files
   agree on the component but each tunes a few values, so the base below is
   our-story.html's and the DELTAS BELONG IN THE PAGE STYLESHEET, not here:

     the-space.css   .closing{ padding:56px 48px; }  @900: { padding:44px 24px; }
     menu.css        .closing{ padding:64px 48px; }  @900: { padding:48px 24px; }
                     .closing-title{ margin:16px 0 24px; }
                     .closing-sub{ max-width:48ch; }
     contact.css     .closing{ padding:56px 48px; }  @900: { padding:48px 24px; }
                     .closing-sub{ margin:0 auto; }   (contact has no .closing-actions)

   Verified by extracting each page's rules from its <style> block, not by eye. */
.closing{ background:var(--ink); color:var(--bone); padding:48px 48px; text-align:center; }
.closing-container{ max-width:760px; margin:0 auto; }
.closing-title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(40px,5.6vw,80px); line-height:1.02; margin-bottom:24px; }
.closing-sub{ font-size:15px; color:rgba(245,241,233,0.72); font-weight:300; line-height:1.75; max-width:46ch; margin:0 auto 44px; }
.closing-actions{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }

@media (max-width: 900px){
  .closing{ padding:40px 24px; }
  .closing-title{ font-size:clamp(34px, 9vw, 48px); }
  .closing-actions{ flex-direction:column; align-items:center; }
}

/* ---------- Visit details and the enquiry form ----------
   Shared: the stacked Visit rows and the Enquiries form appear on The Space and Contact,
   and the Visit rows' inner parts on the homepage too. Every rule below is defined
   IDENTICALLY by every page whose markup uses it — lifted verbatim, nothing merged.

   NOT here, deliberately: the ten Visit rules where home.html genuinely disagrees. The
   homepage lays the rows out as two columns with the value right-aligned; The Space and
   Contact stack label over value. Those are two presentations of one block, not a base
   plus a tweak, so each page carries its own verbatim — home in pages/home.css, and the
   inner-page variant in BOTH pages/the-space.css and pages/contact.css.

     .visit-row  .visit-label  .visit-value  .visit-cta  .visit-socials
     .visit-socials a  .visit-socials a:hover  .visit-social-static
     .visit-social-brand img   and  @media (max-width:900px) .visit-row

   Change one of those and change it in both inner-page stylesheets. */

/* The gap a blank line in Site Settings > Opening hours produces — see liora_hours_html().
   HERE rather than triplicated across home/the-space/contact, unlike the Visit rules listed
   above, and the distinction is not arbitrary: those three disagree about how the Visit block is
   LAID OUT, and this is one editor affordance that has to behave identically wherever the hours
   appear. A client who adds a blank line and sees it work on Contact but not on the homepage has
   found a bug, not a variant. display:block is what makes the line break, so liora_hours_html()
   deliberately omits the <br> before it. */
.visit-gap-line{ display:block; margin-top:0.85em; }

.contact-col-title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(28px,3.2vw,44px); line-height:1.05; margin-bottom:16px; }   /* the-space, contact */
.contact-col-visit{ text-align:left; }   /* the-space, contact */
.contact-col-visit > *{ max-width:460px; margin-left:auto; margin-right:0; }   /* the-space, contact */
.enquiry-actions{ margin-top:4px; }   /* the-space, contact */
.enquiry-field{ display:flex; flex-direction:column; gap:9px; }   /* the-space, contact */
.enquiry-form{ max-width:460px; margin:0; }   /* the-space, contact */
.enquiry-input, .enquiry-textarea{ font-family:var(--sans); font-size:15px; font-weight:300; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:0; padding:14px 16px; width:100%; text-align:left; transition:border-color .3s ease; }   /* the-space, contact */
.enquiry-input::placeholder, .enquiry-textarea::placeholder{ color:rgba(33,25,16,0.34); }   /* the-space, contact */
.enquiry-input:focus, .enquiry-textarea:focus{ outline:none; border-color:var(--ink); }   /* the-space, contact */
.enquiry-label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }   /* the-space, contact */
.enquiry-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }   /* the-space, contact */
.enquiry-sub{ font-size:15px; color:var(--ink-soft); font-weight:300; line-height:1.7; max-width:44ch; margin:0 0 30px; }   /* the-space, contact */
.enquiry-textarea{ resize:vertical; min-height:130px; line-height:1.6; }   /* the-space, contact */
.visit-note{ font-size:14px; color:var(--ink-soft); font-weight:300; line-height:1.75; max-width:460px; margin:0 0 28px auto; }   /* the-space, contact */
.visit-row:last-of-type{ border-bottom:1px solid var(--line); }   /* home, the-space, contact */
.visit-rows{ max-width:460px; margin:0 0 0 auto; }   /* the-space, contact */
.visit-socials svg{ width:20px; height:20px; flex-shrink:0; }   /* home, the-space, contact */

/* ---------- Enquiry form — Gravity Forms ----------
   The Space and Contact render their enquiry form through Gravity Forms. inc/forms.php drops
   Gravity Forms' appearance stylesheet and keeps its structural one, so everything the form
   LOOKS like is below, and it is the design's own .enquiry-* values re-pointed at Gravity
   Forms' markup — the same 15px/300 input, the same 11px/0.16em uppercase label, the same
   18px between a two-up pair and 20px between rows.

   ⚑ EVERY SELECTOR HERE CARRIES `.gform_wrapper.gravity-theme`, WHICH LOOKS REDUNDANT AND IS
   NOT. Gravity Forms' own basic.min.css writes `.gform_wrapper.gravity-theme .gform_fields`
   (three classes). A tidier `.enquiry-wrap .gform_fields` is two, loses, and the form silently
   keeps Gravity Forms' 2% column gap and 16px row gap instead of the design's 18 and 20.

   ⚑ NOTHING HERE IS SCOPED TO A PAGE. It is `.enquiry-wrap`, which exists only around these
   two forms, so a form embedded anywhere else on the site is untouched and looks like Gravity
   Forms — which is the right default for a form this design never described.

   The static <form> these replace is still in both templates as the fallback, and still uses
   the .enquiry-* rules above. Change one, look at the other. */

/* Stands where the design's .enquiry-form stood, and carries will-reveal so that the AJAX
   confirmation — which replaces everything inside the wrapper — is never itself invisible. */
.enquiry-wrap{ max-width:460px; margin:0; }
.spc-col-form .enquiry-wrap{ max-width:460px; margin:0; text-align:left; }

.enquiry-wrap .gform_wrapper{ margin:0; }

/* The '"*" indicates required fields' line. The design has no such row and no room for one;
   inc/forms.php empties it as well, so this only hides the container it leaves behind. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform_heading{ display:none; }

/* 18px between the two halves of a row, 20px between rows: the design's .enquiry-row-2 gap
   and its .enquiry-form > * margin-bottom, which is the whole of its vertical rhythm. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform_fields{
  grid-column-gap:18px;
  grid-row-gap:20px;
}
.enquiry-wrap .gform_wrapper.gravity-theme .gfield{ display:flex; flex-direction:column; gap:9px; }

.enquiry-wrap .gform_wrapper.gravity-theme .gfield_label{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; margin:0; padding:0;
}
/* The asterisk the design never drew. Kept, because it is how somebody learns a field is
   required before they submit rather than after — but in the soft ink, not in alarm red. */
.enquiry-wrap .gform_wrapper.gravity-theme .gfield_required{
  color:var(--ink-soft); font-weight:400; margin-left:3px;
}

.enquiry-wrap .gform_wrapper.gravity-theme .ginput_container{ margin:0; }
.enquiry-wrap .gform_wrapper.gravity-theme input[type="text"],
.enquiry-wrap .gform_wrapper.gravity-theme input[type="email"],
.enquiry-wrap .gform_wrapper.gravity-theme input[type="tel"],
.enquiry-wrap .gform_wrapper.gravity-theme textarea{
  font-family:var(--sans); font-size:15px; font-weight:300; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:0;
  padding:14px 16px; width:100%; text-align:left; transition:border-color .3s ease;
}
.enquiry-wrap .gform_wrapper.gravity-theme input::placeholder,
.enquiry-wrap .gform_wrapper.gravity-theme textarea::placeholder{ color:rgba(33,25,16,0.34); }
.enquiry-wrap .gform_wrapper.gravity-theme input:focus,
.enquiry-wrap .gform_wrapper.gravity-theme textarea:focus{ outline:none; border-color:var(--ink); }

/* An explicit height, not the design's min-height. Gravity Forms sizes its textarea by a class
   — `.gfield textarea.medium{height:192px}` — which a min-height cannot pull back down, and
   which at four classes outspecifies the obvious override. So the three size classes are named
   here too: whichever one the field carries now or is switched to later, the box stays the
   130px the design drew. resize:vertical still lets the visitor grow it. */
.enquiry-wrap .gform_wrapper.gravity-theme .gfield textarea,
.enquiry-wrap .gform_wrapper.gravity-theme .gfield textarea.small,
.enquiry-wrap .gform_wrapper.gravity-theme .gfield textarea.medium,
.enquiry-wrap .gform_wrapper.gravity-theme .gfield textarea.large{
  resize:vertical; height:130px; min-height:130px; line-height:1.6;
}

/* 24px: the design's 20px row gap plus the 4px margin-top on .enquiry-actions. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform_footer{
  margin:24px 0 0; padding:0; display:flex; align-items:center; gap:14px;
}
/* The submit button is given .btn-ghost.dark by inc/forms.php, so it needs nothing here except
   protection from the reset's `img{ width:100%; height:100% }`, which otherwise inflates the
   AJAX spinner to the full width of the form. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform_ajax_spinner{
  width:20px; height:20px; object-fit:contain;
}

/* Validation. Gravity Forms shows a summary above the form and a message under each field;
   both arrive unstyled once its own appearance CSS is gone. Terracotta rather than red: it is
   the palette's own warning colour and it is still unmistakably not the label grey. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform_validation_errors{
  border:1px solid var(--terracotta); padding:14px 16px; margin:0 0 20px;
}
.enquiry-wrap .gform_wrapper.gravity-theme .gform_validation_errors h2,
.enquiry-wrap .gform_wrapper.gravity-theme .gform_validation_errors a{
  font-family:var(--sans); font-size:13px; font-weight:400; color:var(--terracotta);
  line-height:1.6; text-transform:none; letter-spacing:0;
}
/* The summary lists the failed fields in an <ol>. The reset above strips its padding but not
   its markers, so without this every line arrives with a number sitting on top of the text. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform_validation_errors ol,
.enquiry-wrap .gform_wrapper.gravity-theme .gform_validation_errors li{
  list-style:none; margin:6px 0 0;
}
.enquiry-wrap .gform_wrapper.gravity-theme .gform_validation_errors a{ text-decoration:underline; }
/* Gravity Forms' error icon is a glyph in its own icon font, which lives in the appearance
   stylesheet we dropped. Left alone it renders as a stray bullet in front of the sentence. */
.enquiry-wrap .gform_wrapper.gravity-theme .gform-icon{ display:none; }
.enquiry-wrap .gform_wrapper.gravity-theme .gfield_error input,
.enquiry-wrap .gform_wrapper.gravity-theme .gfield_error textarea{ border-color:var(--terracotta); }
.enquiry-wrap .gform_wrapper.gravity-theme .gfield_validation_message,
.enquiry-wrap .gform_wrapper.gravity-theme .validation_message{
  font-size:12px; font-weight:400; color:var(--terracotta); background:none;
  border:0; padding:0; line-height:1.6;
}

/* What replaces the form after a successful submission. Reads as the page's own prose, since
   it is the only thing the visitor is left looking at. */
.enquiry-wrap .gform_confirmation_message{
  font-size:15px; color:var(--ink-soft); font-weight:300; line-height:1.7;
}
.enquiry-wrap .gform_confirmation_message p + p{ margin-top:14px; }

/* reCAPTCHA v3. Google's floating badge is a 256x60 white card fixed to the bottom-right of
   every page the script loads on, sitting over the footer and over the age gate. Google's terms
   permit hiding it ON CONDITION that the attribution text appears instead — which
   liora_recaptcha_notice() prints under the form. The two are one change: remove either and the
   other is wrong.

   visibility, not display:none — the badge must still be laid out for Google's script, and
   display:none has been reported to break the challenge on some versions. */
.grecaptcha-badge{ visibility:hidden; }

.enquiry-recaptcha-note{
  margin-top:16px; font-size:11px; line-height:1.6; font-weight:300;
  color:var(--ink-soft); opacity:.75; max-width:460px;
}
.enquiry-recaptcha-note a{ text-decoration:underline; }


/* ---------- Tap targets ----------
   WCAG 2.2 asks for 24x24 CSS pixels on anything you have to hit. Measured 19 Sep 2026, the
   social icons were 20x21 and The Space's gallery dots 7x7 — the dots being the ones you notice,
   because three sit together under a photograph and a thumb covers all three.

   ⚑ THE FIX IS THE HIT AREA, NOT THE ICON. The link grows around the artwork with padding and
   negative margin pulls the layout back to where the design put it. Nothing moves, nothing looks
   bigger; a 20px icon gets a 24px target.

   ⚑ THE [aria-label] IS LOAD-BEARING, NOT DECORATION. `.visit-socials a` is re-declared verbatim
   in home.css, contact.css and the-space.css — the README lists it as one of the rules every page
   carries its own copy of — and all three load after this file and set no padding. A plain
   `.visit-socials a` here loses to all three and does nothing. The attribute selector takes it to
   (0,2,1), which wins, and every one of these links has an aria-label because each is an icon
   with no text. If that ever stops being true the target silently shrinks back, so: they are
   labelled because they are icons, and they are targetable because they are labelled.

   The gallery dots are fixed in pages/the-space.css, beside the rule that sizes them. */

.visit-socials a[aria-label]{
  padding:3px;
  margin:-3px;
}