/* ============================================================
   Forms — submit buttons, status panels, the newsletter overlay.

   Loaded on every front-end page, after thegreen.css. Everything
   here is NEW surface: the field boxes themselves are already in
   the design system (`.tg-field`) and the two page forms keep
   using it unchanged, which is the whole point of the Basin
   route.
   ============================================================ */

/* ---- submit button ----
   `.tg-btn .vc_btn3` in the design system styles the builder's <a>. A real
   submit control has to be a <button>, and a button arrives carrying the UA's
   own font, its own centre alignment and a system appearance on Safari — none
   of which an <a> has. This is the parity patch; every other button property
   still comes from the design system, so a change there reaches this too. */
.tg-btn .vc_btn3[type="submit"]{
  -webkit-appearance:none;appearance:none;
  cursor:pointer;width:auto;text-align:center;
  font-family:var(--font);
}
.tg-btn .vc_btn3[type="submit"]::-moz-focus-inner{border:0;padding:0;}

/* A submitting form gets the button dimmed and the pointer taken away, so a
   slow connection cannot produce two registrations from one impatient person.
   BasinJS blocks the second submit itself; this is what makes that visible. */
.tg-form[data-tg-busy] .vc_btn3[type="submit"]{opacity:.55;pointer-events:none;}

/* ---- status panels ----
   BasinJS reveals these by REMOVING the inline `style="display:none"`, so they
   must not be hidden from here as well — a stylesheet `display:none` would
   survive the attribute being dropped and the message would never show. Only
   their appearance is set here. */
/* A BOX, not a line of text. These panels replace a whole form, so they have to
   read as the answer to a submission from across the room and on a phone — bare
   coloured text sitting where the first field was does not. Basin's own default
   banner got this right and these did not, which went unnoticed for as long as
   the ids were misspelt and Basin's banner was what everyone actually saw.
   Square, not Basin's 5px radius: every box on this site is square. */
/* A FULL-HEIGHT COLOUR BLOCK, THEN THE WORDS. The block is what carries across
   a room and down to a phone; the label names the event in two words and the
   sentence is the detail underneath. An earlier pass set the whole panel in
   cream, which is in-palette and all but invisible — cream on sage, cream on
   white and cream on forest-dark are each a quiet pairing, and quiet is the one
   thing a submission confirmation must not be.

   ONE TREATMENT ON EVERY SURFACE. The panel brings its own dark ground, so it
   reads the same on the contact form's sage, the booking band's dark green and
   the newsletter overlay's white. The `-olive` / `-cream` / `-green` tone
   classes the forms still pass are deliberately left unstyled rather than
   removed: they record which surface a form sits on, and cost nothing. */
.tg-formmsg{margin:16px 0 0;display:flex;align-items:stretch;border:1px solid;}
.tg-formmsg-icon{flex:0 0 120px;display:flex;align-items:center;justify-content:center;}
.tg-formmsg-icon svg{display:block;width:56px;height:56px;}
.tg-formmsg-body{flex:1 1 auto;min-width:0;padding:22px 24px;}
.tg-formmsg-label{display:block;margin:0 0 6px;font-family:var(--font);font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;}
.tg-formmsg p{margin:0;font-size:18px;line-height:1.5;}

.tg-formmsg-done{background:var(--forest-dark);border-color:var(--centralpark);}
.tg-formmsg-done .tg-formmsg-icon{background:var(--centralpark);color:var(--forest-dark);}
.tg-formmsg-done .tg-formmsg-label{color:var(--centralpark);}
.tg-formmsg-done p{color:var(--cream-light);}

/* A failure must not wear the success colour, and the palette holds no error
   red — inventing one is a design decision rather than a bug fix. Olive, the
   site's serious low-key green, carries it instead. */
.tg-formmsg-fail{background:var(--olive);border-color:var(--cream-light);}
.tg-formmsg-fail .tg-formmsg-icon{background:var(--cream-light);color:var(--olive);}
.tg-formmsg-fail .tg-formmsg-label{color:var(--cream-light);}
.tg-formmsg-fail p{color:var(--cream-light);font-weight:600;}

/* The overlay panel is 344 wide whatever the viewport, so the block has to come
   down there regardless of a media query. */
.tg-overlay .tg-formmsg-icon{flex-basis:76px;}
.tg-overlay .tg-formmsg-icon svg{width:36px;height:36px;}
.tg-overlay .tg-formmsg-body{padding:16px 18px;}
.tg-overlay .tg-formmsg p{font-size:16px;}

@media (max-width:600px){
  .tg-formmsg-icon{flex-basis:84px;}
  .tg-formmsg-icon svg{width:40px;height:40px;}
  .tg-formmsg-body{padding:18px 18px;}
  .tg-formmsg p{font-size:17px;}
}

/* The form is taken out of the page once it has succeeded (forms.js), so the
   confirmation stands in its place rather than under a set of fields the
   person has no further use for. */
.tg-form[hidden]{display:none;}

/* ---- Newsletter Sign up Overlay (440x862 panel on an olive@80 scrim) ----
   Opened by any link to #tg-newsletter — the footer's Join Newsletter button
   on every page. `hidden` is the closed state and needs stating explicitly,
   because the attribute's own UA `display:none` loses to the `display:flex`
   below. */
.tg-overlay[hidden]{display:none;}
.tg-overlay{position:fixed;inset:0;z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:16px;}
.tg-overlay-scrim{position:absolute;inset:0;background:rgba(55,69,44,.80);}

/* 440 wide with the file's 344 content measure, i.e. 48px of side padding.
   The frame draws the panel 862 tall inside an 832 viewport — taller than the
   window it sits in — so it scrolls rather than overflowing off-screen. */
.tg-overlay-panel{position:relative;z-index:1;
  width:440px;max-width:100%;max-height:calc(100vh - 32px);overflow-y:auto;
  box-sizing:border-box;background:var(--white);padding:48px;
  display:flex;flex-direction:column;gap:24px;}

.tg-overlay-close{position:absolute;top:12px;right:16px;
  -webkit-appearance:none;appearance:none;background:none;border:0;padding:4px 8px;
  font-family:var(--font);font-size:28px;line-height:1;cursor:pointer;
  color:var(--mid-dark-green);}
.tg-overlay-close:hover{opacity:.7;}

.tg-overlay-title{margin:0;font-family:var(--font);font-size:28px;font-weight:500;
  line-height:1;color:var(--mid-dark-green);}
.tg-overlay-body{margin:0;font-size:16px;line-height:1.5;color:var(--mid-dark-green);}
.tg-overlay-fine{margin:0;font-size:13px;line-height:1.5;color:#808080;}

/* The panel's own 24px gap does the vertical rhythm, so the fields give up the
   20px margin `.tg-field` carries elsewhere — otherwise the two stack and the
   spacing reads 44. */
.tg-form-newsletter{display:flex;flex-direction:column;gap:24px;}
.tg-overlay .tg-field{margin:0;}

/* NAME / EMAIL — the file's third field tone: a mid-dark-green label and box
   on white, with grey placeholder text. `.tg-field` already carries the label
   metrics and the box's type; this is the colour and the exact 48px height the
   overlay draws (the page forms draw 47, which is why it is set here and not
   on the shared component). */
.tg-field-green label{color:var(--mid-dark-green);}
.tg-field-green input{border:1px solid var(--mid-dark-green);color:var(--mid-dark-green);
  height:48px;padding:0 20px;}
.tg-field-green input::placeholder{color:#808080;}

/* SIGN UP runs the full 344 measure, unlike every other button on the site. */
.tg-btn-newsletter{width:100%;}
.tg-btn-newsletter .vc_btn3{width:100%;color:var(--mid-dark-green) !important;
  border-color:var(--mid-dark-green) !important;}
.tg-btn-newsletter .vc_btn3:hover{background:var(--mid-dark-green) !important;
  color:var(--white) !important;}

/* The panel's 24px gap is the only spacing inside it, so the two things that
   arrive carrying a margin of their own give it up: js_composer puts a
   bottom margin on every `.vc_btn3-container`, and `.tg-formmsg` sets its own
   16px for the page forms. Left alone they add to the gap and the fine print
   drops away from the button. */
.tg-overlay .vc_btn3-container{margin:0;}
.tg-overlay .tg-formmsg{margin:0;}

/* A visible focus ring inside the modal. The design draws none, but the
   overlay traps the keyboard and something has to show where the focus is. */
.tg-overlay :focus-visible{outline:2px solid var(--centralpark);outline-offset:2px;}

@media (max-width:480px){
  .tg-overlay-panel{padding:40px 24px;gap:20px;}
  .tg-overlay-title{font-size:24px;}
}

/* Someone who has asked not to be animated still gets the overlay; it simply
   appears rather than fading. The fade is defined only inside the query that
   allows it, so there is nothing to undo. */
@media (prefers-reduced-motion:no-preference){
  .tg-overlay{animation:tg-overlay-in .18s ease-out;}
  @keyframes tg-overlay-in{from{opacity:0;}to{opacity:1;}}
}

/* ============================================================
   Group Booking Enquiry — the band, and the three controls the
   other three forms never needed.

   WHY THIS IS NOT IN pages.css. Every other page's layout is
   scoped `body.page-id-N` there, and the id is the problem: the
   enquiry page is created per install, so its id on production
   is not its id on the dev box and a scoped rule would silently
   miss. Every selector below is a `.tg-*` class used on this one
   page and nowhere else, so it is already as scoped as the
   page-id prefix made the others — and it survives the page
   being rebuilt with a different id. pages.css's own header asks
   for exactly this: a rule that isn't genuinely page-id-specific
   belongs unscoped.

   Geometry is off the Booking Enquiry frame: a 544 copy column
   (56 gutter, ~420 measure) and a 680 form column ending on the
   right gutter, 24 between the two field columns.
   ============================================================ */

.tg-enquiry{background:var(--mid-dark-green);display:flex;}
.tg-enquiry > .wpb_column{float:none;}
.wpb-content-wrapper .tg-enquiry-copy{flex:0 0 42.5%;padding:96px 16px 96px var(--gutter);}
.wpb-content-wrapper .tg-enquiry-form{flex:1 1 auto;padding:96px var(--gutter) 96px 0;}

/* THE MEASURE IS ON THE PROSE, NOT THE COLUMN. The frame sets both at about
   420, which reads as one measure — but "Booking Enquiry" at 60px is 455 wide
   and a wrapper clamp breaks it over two lines. The column is 544 and keeps
   only 72 of padding, so the heading has the room; it is the paragraphs that
   have to be held back off the form. */
.wpb-content-wrapper .tg-enquiry-title{margin:0 0 28px;}
.tg-enquiry-body{margin:0 0 28px;max-width:420px;}
.tg-enquiry-body p{font-size:18px;line-height:1.5;color:var(--cream-light);margin:0;}
/* The fine print carries the one thing the page has to be unambiguous about —
   that an enquiry is not a booking — so it is smaller than the lead but not
   faded out. Measured 14/1.4 off the frame. */
.tg-enquiry-fine{max-width:420px;}
.tg-enquiry-fine p{font-size:14px;line-height:1.4;color:var(--cream-light);margin:0;}
.tg-enquiry-fine a{color:inherit;text-decoration:underline;}

/* ---- the form's own rhythm ----
   28 between rows, 24 across the pair. `.tg-field` carries 20 for the other
   forms, so the two-up rows give theirs up and the row owns the spacing — left
   as they are, a row's own margin and the field's would add to 48. */
.tg-form-booking .tg-field-row{display:flex;gap:24px;}
.tg-form-booking .tg-field-row::before,
.tg-form-booking .tg-field-row::after{display:none;}
.tg-form-booking .tg-field-row > .wpb_column,
.tg-form-booking .tg-field-row > .vc_col-sm-6{float:none;width:auto;flex:1 1 0;min-width:0;}
.wpb-content-wrapper .tg-form-booking .tg-field-row{margin-bottom:28px;}
.wpb-content-wrapper .tg-form-booking .tg-field-row .tg-field{margin-bottom:0;}
.wpb-content-wrapper .tg-form-booking .tg-field{margin-bottom:28px;}
/* 120 is the frame's box, and `rows` alone cannot land it — six rows of the
   field's own 14/1.5 plus its padding is 152. The attribute stays at a sane
   four so the box is still a box with the stylesheet missing. */
.tg-form-booking .tg-field-message textarea{min-height:120px;}

/* The required asterisk. Decoration over the control's own `required`, which
   is what assistive technology reads — see tg_form_label(). */
.tg-field .tg-req{margin-left:2px;}

/* The caption above a tick-box group. Not a <label> (it names a group, not a
   control), so it restates `.tg-field label`'s metrics rather than inheriting
   them. */
.tg-field-legend{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 8px;}
.tg-field-dark .tg-field-legend{color:var(--cream-light);}

/* ---- native controls on a dark surface ----
   `color-scheme` is what makes the browser draw the parts it owns and we
   cannot style — the select's popup list, the date picker's calendar — in dark
   rather than on white. Without it both open as a white sheet in front of a
   forest-green page. Scoped to the form so nothing else on the site inherits
   a scheme it was not designed against. */
.tg-form-booking{color-scheme:dark;}

.tg-field .tg-select{display:block;}
.tg-field select{display:block;width:100%;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
  font-family:var(--font);font-size:14px;line-height:1.5;border-radius:0;
  background-color:transparent;height:47px;padding:0 48px 0 20px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 20px center;background-size:14px 8px;}
.tg-field-dark select{border:1px solid var(--cream-light);color:var(--cream-light);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2EDDE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
/* The prompt option reads as placeholder text until a real choice is made.
   `:has()` and not `:required:invalid`, because Preferred space is optional and
   would never match the second. */
.tg-field-dark select:has(option[value=""]:checked){color:var(--sage);}
/* The popup list itself IS ours to colour, unlike its frame. Without this the
   options inherit the page's cream on the browser's own dark sheet in some
   engines and all but vanish. */
.tg-field-dark select option{background:var(--mid-dark-green);color:var(--cream-light);}

/* A date input renders its own dd/mm/yyyy prompt, in the visitor's locale and
   in the field's `color` — so an empty one is styled like the select prompts
   above. It is empty exactly while it is :invalid, this field being required. */
.tg-field-dark input[type="date"]:invalid{color:var(--sage);}
.tg-field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;}

/* ---- tick boxes ----
   20px squares, 12 to their label, 40 between options — the frame's measures.
   `appearance:none` is what lets the box be drawn in cream at all; a UA
   checkbox cannot be recoloured. */
.tg-checkgroup{display:flex;flex-wrap:wrap;gap:16px 40px;}
.tg-check{display:inline-flex;align-items:center;gap:12px;}
/* `padding:0` is load-bearing, not tidiness. `.tg-field input` carries the text
   box's 12/20, and with the site's border-box that padding is a FLOOR on the
   element's size — a 20px square asked for with it still inherited comes out
   41x25. */
.tg-field .tg-check input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;flex:0 0 20px;padding:0;margin:0;border-radius:0;
  background:transparent;cursor:pointer;}
.tg-field-dark .tg-check input[type="checkbox"]{border:1px solid var(--cream-light);}
.tg-field-dark .tg-check input[type="checkbox"]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2l3 3 6-6.4' fill='none' stroke='%23F2EDDE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;}
/* Undo `.tg-field label`'s block/caps/tracking for the per-box labels, which
   are sentence-case body text sitting beside the box. */
.tg-field .tg-check label{display:inline;margin:0;font-size:16px;font-weight:400;
  letter-spacing:0;text-transform:none;cursor:pointer;}
.tg-field-dark .tg-check label{color:var(--cream-light);}

/* ---- submit row ----
   SEND ENQUIRY with the "* Required" key beside it, as the frame draws them. */
.tg-submitrow{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.wpb-content-wrapper .tg-submitrow .vc_btn3-container{margin:0;}
.tg-reqnote{font-size:14px;line-height:1.4;color:var(--cream-light);}
/* Keyed on this button's OWN class, not on `.tg-btn-light`. The design system
   paints every light button pure white with `!important`, which beats the
   outline-custom colour WPBakery writes inline — so a cream button has to say
   so itself. Scoped here rather than fixed in `.tg-btn-light`, because the
   event form's submit is the same shape and recolouring it is not this
   change's business. */
.tg-booking-submit .vc_btn3{color:var(--cream-light) !important;border-color:var(--cream-light) !important;}
.tg-booking-submit .vc_btn3:hover{background:var(--cream-light) !important;color:var(--forest-dark) !important;}

/* A visible focus ring. The frame draws none, and a form of eleven controls is
   the last place on the site to leave the keyboard with nothing to follow. */
.tg-form-booking :focus-visible{outline:2px solid var(--centralpark);outline-offset:2px;}

@media (max-width:900px){
  .tg-enquiry{flex-wrap:wrap;}
  .tg-enquiry > .wpb_column{flex:0 0 100% !important;}
  .wpb-content-wrapper .tg-enquiry-copy{padding:56px var(--gutter) 28px;}
  .wpb-content-wrapper .tg-enquiry-form{padding:0 var(--gutter) 56px;}
  .tg-enquiry-copy > .vc_column-inner > .wpb_wrapper{max-width:none;}
}

/* The pairs stack before the columns get narrow enough to crush a date input,
   which has a fixed intrinsic width the others do not. */
@media (max-width:600px){
  .tg-form-booking .tg-field-row{flex-wrap:wrap;gap:0;}
  .tg-form-booking .tg-field-row > .wpb_column,
  .tg-form-booking .tg-field-row > .vc_col-sm-6{flex:1 1 100%;}
  .wpb-content-wrapper .tg-form-booking .tg-field-row .tg-field{margin-bottom:28px;}
  .wpb-content-wrapper .tg-form-booking .tg-field-row{margin-bottom:0;}
  .tg-checkgroup{gap:14px 28px;}
  .tg-submitrow{gap:16px;}
}