/* ==========================================================
   Layout refinements (loaded after style.css and tnt-templates.css)
   ========================================================== */

/* ---------- HOME: reviews (06) → Come on over (07) ---------- */
.reviews{padding-bottom:clamp(2.5rem,4.5vw,3.75rem)}
.reviews .reviews-more{justify-content:center;margin-top:clamp(1.75rem,3vw,2.5rem)}
#visit{background:color-mix(in srgb,var(--soft) 9%,var(--white));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(3rem,6vw,5rem) 0}
#visit .map{background:var(--white)}
#visit .areas-list li{background:var(--white)}

/* ---------- SERVICE PAGES: two uneven text columns → one long column ---------- */
.svc-cols.svc-cols--even{grid-template-columns:minmax(0,1fr);gap:0;max-width:none}
.svc-cols.svc-cols--even > .svc-text{max-width:64rem}
.svc-cols.svc-cols--even > .svc-text p{max-width:none}
.svc-cols.svc-cols--even > .svc-text + .svc-text{margin-top:1.15rem}
.svc-cols.svc-cols--even > .svc-text + .svc-text p{font-size:1.0625rem}

/* ---------- section heads: title at the top of the section, its intro beneath ---------- */
.svc-sec .shell > .section-head{grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:.35rem!important}
.svc-sec .shell > .section-head > *{align-self:start!important}
.svc-sec .shell > .section-head h2{margin-bottom:.5rem}
.svc-sec .shell > .section-head .lead{max-width:56rem;margin:0}

/* ---------- heading + checklist sections: stack, list runs full width ---------- */
.svc-cols:has(.svc-checks:not(.svc-checks--one)){grid-template-columns:minmax(0,1fr);gap:1.25rem}
.svc-cols:has(.svc-checks:not(.svc-checks--one)) > .svc-text p{max-width:56rem}
.svc-cols:has(.svc-checks:not(.svc-checks--one)) .svc-checks:not(.svc-checks--one){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem;margin:.75rem 0 1.5rem}
.svc-cols:has(.svc-checks:not(.svc-checks--one)) .svc-sub{margin-top:.5rem}
@media (max-width:1000px){.svc-cols:has(.svc-checks:not(.svc-checks--one)) .svc-checks:not(.svc-checks--one){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-cols:has(.svc-checks:not(.svc-checks--one)) .svc-checks:not(.svc-checks--one){grid-template-columns:1fr}}

/* ---------- card tables: an unfinished last row is centred ---------- */
.svc-sec .service-grid{display:flex;flex-wrap:wrap;justify-content:center;border:0}
.svc-sec .service-grid > .service-card{flex:0 0 calc(33.333% + 1px);max-width:calc(33.333% + 1px);margin:0 -1px -1px 0;border:1px solid var(--hair)}
.svc-sec .service-grid--2 > .service-card{flex-basis:calc(50% + 1px);max-width:calc(50% + 1px)}
.svc-sec .service-grid--4 > .service-card{flex-basis:calc(25% + 1px);max-width:calc(25% + 1px)}
.svc-sec.band .service-grid > .service-card{border-color:var(--ink)}
.svc-sec .service-card--soft{border-color:var(--ink)}
@media (max-width:1100px){.svc-sec .service-grid--4 > .service-card{flex-basis:calc(50% + 1px);max-width:calc(50% + 1px)}}
@media (max-width:900px){.svc-sec .service-grid:not(.service-grid--4) > .service-card{flex-basis:calc(50% + 1px);max-width:calc(50% + 1px)}}
@media (max-width:820px){.svc-sec .service-grid > .service-card,.svc-sec .service-grid--2 > .service-card,.svc-sec .service-grid--4 > .service-card{flex-basis:100%;max-width:100%;margin-right:0}}

/* ---------- a lone closing sentence: attached to what it follows ---------- */
.svc-sec .svc-note{margin:1.25rem 0 0;padding:1rem 1.25rem 1rem 1.6rem;border:1px solid var(--hair);border-left:3px solid var(--teal);background:color-mix(in srgb,var(--soft) 9%,var(--white));color:var(--ink);font-size:1rem;line-height:1.6;max-width:none}
/* keep clear space between the box and whatever sits above it (table, list, text) */
.svc-sec .svc-note,.svc-sec .service-grid + .svc-note,.svc-sec * + .svc-note{margin-top:clamp(1.75rem,3vw,2.25rem)!important}
.svc-sec.band .svc-note{background:var(--white);border-color:var(--ink);border-left-color:var(--ink)}

/* ---------- LEGAL PAGES (Privacy Policy, Terms & Conditions): one calm reading column ---------- */
.legal-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,3.5vw,2.75rem)!important;background:color-mix(in srgb,var(--soft) 9%,var(--white));border-bottom:1px solid var(--hair)}
.legal-hero h1{margin:0}
.legal{padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(4rem,7vw,6rem)!important}
.legal .prose{max-width:50rem!important;margin:0!important}
.legal .prose > *{max-width:none!important}
.legal .prose p,.legal .prose li{font-size:1.0625rem!important;line-height:1.75!important;font-weight:400!important;color:var(--ink);margin:0 0 1.1rem}
.legal .prose p.legal-intro{font-size:1.25rem!important;line-height:1.65!important;margin-bottom:0;padding-bottom:.25rem}
.legal .prose h2{font-size:clamp(1.3rem,1.9vw,1.6rem)!important;line-height:1.25;margin:2.75rem 0 1rem!important;padding-top:2.25rem;border-top:1px solid var(--hair)}
.legal .prose h3{font-size:1.125rem!important;line-height:1.35;margin:1.75rem 0 .5rem!important;color:var(--teal)}
.legal .prose h2 + h3{margin-top:.5rem!important}
.legal .prose ul{list-style:none!important;padding:0!important;margin:.25rem 0 1.5rem!important}
.legal .prose li{position:relative;padding-left:1.6rem!important;margin:0 0 .7rem!important}
.legal .prose li::marker{content:none}
.legal .prose li::before{content:""!important;position:absolute;left:0;top:calc(.875em - 3.5px);width:7px;height:7px;background:var(--teal);border-radius:0;transform:none}
.legal .prose p::first-line{font-weight:400!important}
.legal .prose a{font-weight:inherit!important;color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:3px}

/* ---------- CONTACT PAGE: intro band, then contact details beside the form ---------- */
.contact-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,3.5vw,2.75rem)!important;background:color-mix(in srgb,var(--soft) 9%,var(--white));border-bottom:1px solid var(--hair)}
.contact-hero h1{margin:0 0 .75rem}
.contact-hero .lead{margin:0;max-width:56rem}
.contact-hero .lead a{color:var(--ink);font-weight:600;text-decoration-color:var(--teal);text-underline-offset:3px}
.contact-body{padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(4rem,7vw,6rem)!important}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-grid .contact-title{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:0 0 1rem}
.contact-info > p{margin:0 0 1.25rem}
.contact-info .contact-list{margin:0 0 2rem}
.contact-info .hours{max-width:none}
.contact-form-card{border:1px solid var(--ink);background:var(--white);padding:clamp(1.5rem,3vw,2.5rem)}
.contact-form-card .gform_wrapper{margin:0;--gf-color-primary:#0190a0;--gf-color-primary-rgb:1,144,160;--gf-color-primary-darker:#0f0f0f;--gf-color-primary-contrast:#0f0f0f;--gf-radius:0;--gf-ctrl-border-color:#d9d9d9;--gf-ctrl-btn-bg-color-primary:#42b3bd;--gf-ctrl-btn-bg-color-hover-primary:#0f0f0f;--gf-ctrl-btn-color-primary:#0f0f0f;--gf-ctrl-btn-color-hover-primary:#ffffff;--gf-ctrl-btn-border-color-primary:#0f0f0f;--gf-ctrl-btn-radius:0}
.contact-form-card .gform_wrapper.gform-theme--framework .gform_footer .gform_button{background:var(--wp--preset--color--primary)!important;color:var(--ink)!important;border:1px solid var(--ink)!important;border-radius:0!important;font-family:var(--wp--preset--font-family--ui)!important;font-style:italic!important;font-weight:700!important;letter-spacing:.04em;font-size:1rem!important;padding:.85rem 1.75rem!important;min-height:var(--tap)}
.contact-form-card .gform_wrapper.gform-theme--framework .gform_footer .gform_button:hover{background:var(--ink)!important;color:var(--white)!important}
.contact-form-card .gform_wrapper .gfield_label,.contact-form-card .gform_wrapper legend.gfield_label{font-family:var(--wp--preset--font-family--display);font-weight:600;color:var(--ink);font-size:1rem;letter-spacing:.02em}
.contact-form-card .gform_wrapper input[type=text],.contact-form-card .gform_wrapper input[type=tel],.contact-form-card .gform_wrapper input[type=email],.contact-form-card .gform_wrapper select,.contact-form-card .gform_wrapper textarea{border:1px solid var(--hair);border-radius:0;font-family:var(--wp--preset--font-family--ui);font-size:1rem;color:var(--ink);min-height:var(--tap)}
.contact-form-card .gform_wrapper input:focus,.contact-form-card .gform_wrapper select:focus,.contact-form-card .gform_wrapper textarea:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
.contact-form-card .gform_wrapper .gform_footer input[type=submit],.contact-form-card .gform_wrapper .gform_footer button{background:var(--wp--preset--color--primary);color:var(--ink);border:1px solid var(--ink);border-radius:0;font-family:var(--wp--preset--font-family--ui);font-style:italic;font-weight:700;letter-spacing:.04em;font-size:1rem;padding:.85rem 1.35rem;min-height:var(--tap);cursor:pointer}
.contact-form-card .gform_wrapper .gform_footer input[type=submit]:hover,.contact-form-card .gform_wrapper .gform_footer button:hover{background:var(--ink);color:var(--white)}
.contact-form-card .gform_wrapper .gfield_required{color:var(--teal)}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- SECONDARY BUTTON (outline): white face, ink keyline — e.g. the home hero's Book Your Visit ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link{background:var(--wp--preset--color--white);color:var(--wp--preset--color--ink);border:1px solid var(--wp--preset--color--ink);padding:.85rem 1.35rem}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible{background:var(--wp--preset--color--ink);color:var(--wp--preset--color--white)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- HEADER (phones/tablets): menu button is the hamburger icon alone, on the same row as EN / ES ---------- */
@media (max-width:1320px){
  /* the word stays for screen readers ("Menu" / "Menú"), hidden from view */
  .bar .menu-label .t-en,.bar .menu-label .t-es{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .bar .menu-label{justify-content:center;gap:0;width:var(--tap);height:var(--tap);padding:0}
  .bar .menu-label svg{width:20px;height:20px}
}
@media (max-width:600px){
  /* logo, EN / ES and the menu icon always share one row: the logo takes only the room left over
     (never pushing the others down), up to its normal 160px */
  .bar{column-gap:.5rem}
  .bar .brand{flex:1 1 0%;min-width:0;margin-right:0}
  .bar .brand a{flex:0 1 160px;min-width:0;max-width:160px}
  .bar .brand img{width:100%;max-width:160px}
  .bar .lang,.bar .menu-label{flex:none}
  /* globe hidden on phones: the EN / ES buttons speak for themselves (the group keeps its spoken label) */
  .bar .lang__icon{display:none}
}
