/* ══════════════════════════════════════════════════════
   THE GARDENERS' HOUSE — Components
   Front-end styles for the Unify plugins (Hero Slider and Carousel ship
   none) and for the GH block patterns, modelled on the live site.
   Reads the tokens in style.css.
   ══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   HERO — Hero Slider and Posts Slider share one look:
   full-bleed image, a mustard card on the left, torn bottom edge.
   The Posts Slider (1.3+, Card layout, torn edge) draws all of this
   itself; we only set its brand variables.
   ══════════════════════════════════════════════════════ */

.unify-hero-slider {
    position: relative;
    overflow: hidden;
}

/* Torn brush edge into the page below */
.unify-hero-slider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    height: clamp(24px, 4vw, 56px);
    background: url('../images/torn-edge.svg') bottom / 100% 100% no-repeat;
    pointer-events: none;
}

/* ── Hero Slider (fade; JS toggles .is-active) ── */

.unify-hero-slider {
    color: var(--gh-ink);
    background: var(--gh-slate);
}

.unify-hero-slider__track {
    position: relative;
    height: clamp(520px, 80vh, 820px);
}

.unify-hero-slider__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.unify-hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.unify-hero-slider__bg,
.unify-hero-slider__overlay {
    position: absolute;
    inset: 0;
}

.unify-hero-slider__bg-image,
.unify-hero-slider__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unify-hero-slider__bg-video {
    position: absolute;
    inset: 0;
}

.unify-hero-slider__content {
    position: relative;
    z-index: 1;
    width: min(340px, calc(100% - 2 * var(--unify-gutter)));
    margin-left: max(var(--unify-gutter), calc((100% - var(--unify-max-width)) / 2));
    padding: var(--unify-space-lg);
    background: var(--gh-mustard);
}

.unify-hero-slider__heading {
    margin: 0 0 var(--unify-space-sm);
    font-size: var(--unify-size-2xl);
    line-height: 1.1;
    color: inherit;
}

.unify-hero-slider__subheading {
    margin: 0 0 var(--unify-space-md);
    font-size: var(--unify-size-sm);
}

.unify-hero-slider__btn {
    font-size: var(--unify-size-sm);
    font-weight: 700;
    color: var(--gh-ink);
    text-decoration: underline;
}

.unify-hero-slider__btn:hover {
    opacity: 1;
    color: var(--gh-ink);
    text-decoration-thickness: 2px;
}

/* ── Posts Slider — set to Layout: Card and Bottom edge: Torn in the slider's settings ── */

.ups {
    --ups-height: clamp(520px, 85vh, 860px);
    --ups-max: calc(var(--unify-max-width) + 2 * var(--unify-gutter));
    --ups-accent: var(--gh-slate);
    --ups-card-bg: var(--gh-mustard);
    --ups-card-text: var(--gh-ink);
    --ups-title-font: var(--unify-font-heading);
    --ups-overlay: .25;
}

.ups .ups__title {
    font-weight: 400;
}

/* Brand dots pattern in the card corner, as on the live site. Set here rather than in
   --ups-card-texture so the image path resolves against this stylesheet. */
.ups .ups__card {
    background: url('../images/patterns/misc.svg') right -50px bottom -80px / 190px no-repeat, var(--gh-mustard);
}

.ups .ups__inner {
    padding-inline: var(--unify-gutter);
}


/* ══════════════════════════════════════════════════════
   UNIFY CAROUSEL — card with image left, text right
   (the live site's events and news-feature carousels)
   ══════════════════════════════════════════════════════ */

.unify-carousel {
    position: relative;
    max-width: var(--unify-max-width);
    margin: 0 auto;
}

.unify-carousel__window {
    overflow: hidden;
    border-radius: var(--unify-radius-lg);
    background: var(--unify-white);
}

.unify-carousel__track {
    display: flex;
    transition: transform 0.6s ease;
}

.unify-carousel__slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 420px;
}

.unify-carousel__slide:not(:has(.unify-carousel__image-col)) {
    grid-template-columns: minmax(0, 1fr);
}

.unify-carousel__image-col {
    align-self: stretch;
}

.unify-carousel__image-col a,
.unify-carousel__image {
    display: block;
    width: 100%;
    height: 100%;
}

.unify-carousel__image {
    object-fit: cover;
}

.unify-carousel__content {
    padding: var(--unify-space-2xl);
}

.unify-carousel__eyebrow {
    display: block;
    margin-bottom: var(--unify-space-sm);
    font-size: var(--unify-size-sm);
    font-weight: 700;
    color: var(--gh-accent);
}

.unify-carousel__title {
    margin: 0 0 var(--unify-space-md);
    font-family: var(--unify-font-heading);
    font-size: var(--unify-size-3xl);
    font-weight: 400;
}

.unify-carousel__title a {
    color: inherit;
}

.unify-carousel__link {
    font-weight: 700;
    text-decoration: underline;
}

.unify-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--unify-space-lg);
}

@media (max-width: 768px) {
    .unify-carousel__slide {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .unify-carousel__image {
        aspect-ratio: 4 / 3;
        height: auto;
    }
    .unify-carousel__content {
        padding: var(--unify-space-lg);
    }
    .unify-carousel__arrow {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════
   SHARED SLIDER CONTROLS — plain white chevrons, small dots
   ══════════════════════════════════════════════════════ */

.unify-hero-slider__arrow,
.unify-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--unify-white);
    background: none;
    border: 0;
    cursor: pointer;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.unify-hero-slider__arrow--prev { left: var(--unify-space-md); }
.unify-hero-slider__arrow--next { right: var(--unify-space-md); }

.unify-carousel__arrow { color: var(--gh-ink); filter: none; }
.unify-carousel__arrow--prev { left: -56px; }
.unify-carousel__arrow--next { right: -56px; }

.unify-hero-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2.5rem, 5vw, 4.5rem);
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.unify-hero-slider__dot,
.unify-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    cursor: pointer;
}

.unify-hero-slider__dot { color: var(--unify-white); }
.unify-carousel__dot    { color: var(--gh-slate); }

.unify-hero-slider__dot.is-active,
.unify-carousel__dot.is-active {
    opacity: 1;
}

.unify-carousel__dot.is-active {
    color: var(--gh-mustard-deep);
}

@media (max-width: 1320px) {
    .unify-carousel__arrow--prev { left: var(--unify-space-sm); }
    .unify-carousel__arrow--next { right: var(--unify-space-sm); }
    .unify-carousel__arrow {
        background: var(--unify-white);
        border-radius: 50%;
        box-shadow: var(--unify-shadow-sm);
    }
}

@media (max-width: 600px) {
    .unify-hero-slider__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .unify-hero-slider__slide,
    .unify-carousel__track {
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════
   UNIFY OPT-IN — popup and inline form
   The plugin's accent is white text on --uo-accent; keep that ink.
   The inline form on the teal band gets white fields and a white button.
   ══════════════════════════════════════════════════════ */

.unify-optin,
.unify-optin-inline {
    --uo-accent: var(--gh-ink);
    --uo-ink: var(--gh-ink);
    --uo-muted: var(--gh-slate);
    --uo-line: var(--gh-line);
    --uo-radius: var(--unify-radius-md);
    font-family: var(--unify-font-body);
}

.unify-optin__heading {
    font-family: var(--unify-font-heading);
    font-weight: 400;
}

.unify-optin .unify-optin__submit,
.unify-optin-inline .unify-optin-inline__submit {
    font-weight: 700;
    color: var(--gh-ink);
    background: var(--gh-mustard);
    border-radius: var(--unify-radius-pill);
}

.unify-optin .unify-optin__submit:hover,
.unify-optin-inline .unify-optin-inline__submit:hover {
    filter: none;
    background: var(--gh-mustard-deep);
}

.gh-signup .unify-optin-inline {
    --uo-accent: var(--unify-white);
    max-width: 900px;
    margin: 0 auto;
}

.gh-signup .unify-optin-inline__input {
    border: 0;
    border-radius: var(--unify-radius-sm);
}

.gh-signup .unify-optin-inline .unify-optin-inline__submit {
    flex-basis: 100%;
    color: var(--gh-ink);
    background: var(--unify-white);
}

.gh-signup .unify-optin-inline .unify-optin-inline__submit:hover {
    background: var(--gh-offwhite);
}

.gh-signup .unify-optin-inline__consent,
.gh-signup .unify-optin-inline__message {
    color: var(--unify-white);
}

.gh-signup .unify-optin-inline__consent a {
    color: var(--unify-white);
}


/* ══════════════════════════════════════════════════════
   SECTIONS — full-width bands from the patterns
   ══════════════════════════════════════════════════════ */

.gh-section {
    padding-top: var(--unify-space-section);
    padding-bottom: var(--unify-space-section);
    margin-top: 0;
    margin-bottom: 0;
}

.gh-section--offwhite { background-color: var(--gh-offwhite); }
.gh-section--sky      { background-color: var(--gh-sky); }
.gh-section--mustard  { background-color: var(--gh-mustard); }
.gh-section--teal     { background-color: var(--gh-teal);  color: var(--unify-white); }
.gh-section--slate    { background-color: var(--gh-slate); color: var(--unify-white); }
.gh-section--blue     { background-color: var(--gh-blue);  color: var(--gh-ink); }

/* Headings follow the band's text colour (the parent sets them to ink). */
.gh-section--slate :is(h1, h2, h3, h4, h5, h6),
.gh-section--teal :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* Brand patterns (from the GH brand pack, white at 20%).
   Bands with .has-texture get a default per colour; add .has-pattern-<name>
   (Block → Advanced → Additional CSS class) to any band to pick another. */
.gh-section--mustard.has-texture { background-image: url('../images/patterns/misc.svg'); }
.gh-section--slate.has-texture   { background-image: url('../images/patterns/waves-alt.svg'); }
.gh-section--blue.has-texture    { background-image: url('../images/patterns/scribble.svg'); }
.gh-section--teal.has-texture    { background-image: url('../images/patterns/waves.svg'); }
.gh-section--sky.has-texture     { background-image: url('../images/patterns/scales.svg'); }

.has-pattern-brick, .gh-section.has-pattern-brick { background-image: url('../images/patterns/brick.svg'); }
.has-pattern-herringbone, .gh-section.has-pattern-herringbone { background-image: url('../images/patterns/herringbone.svg'); }
.has-pattern-hessian, .gh-section.has-pattern-hessian { background-image: url('../images/patterns/hessian.svg'); }
.has-pattern-leaves, .gh-section.has-pattern-leaves { background-image: url('../images/patterns/leaves.svg'); }
.has-pattern-misc, .gh-section.has-pattern-misc { background-image: url('../images/patterns/misc.svg'); }
.has-pattern-misc-2, .gh-section.has-pattern-misc-2 { background-image: url('../images/patterns/misc-2.svg'); }
.has-pattern-misc-3, .gh-section.has-pattern-misc-3 { background-image: url('../images/patterns/misc-3.svg'); }
.has-pattern-scales, .gh-section.has-pattern-scales { background-image: url('../images/patterns/scales.svg'); }
.has-pattern-scribble, .gh-section.has-pattern-scribble { background-image: url('../images/patterns/scribble.svg'); }
.has-pattern-waves, .gh-section.has-pattern-waves { background-image: url('../images/patterns/waves.svg'); }
.has-pattern-waves-alt, .gh-section.has-pattern-waves-alt { background-image: url('../images/patterns/waves-alt.svg'); }

.gh-section.has-texture,
[class*="has-pattern-"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gh-section--slate a:not(.wp-block-button__link),
.gh-section--teal a:not(.wp-block-button__link) {
    color: var(--unify-white);
}

/* Centred section title in GH Solaris, as on the live site */
.gh-section__title {
    margin: 0 0 var(--unify-space-2xl);
    text-align: center;
}

.gh-section__footer {
    margin-top: var(--unify-space-2xl);
}

/* Welcome */
.gh-intro {
    text-align: center;
}

.gh-intro__lead {
    font-size: var(--unify-size-xl);
    line-height: 1.45;
    color: var(--gh-slate);
}


/* ══════════════════════════════════════════════════════
   SIGNPOST TILES — white cards on mustard, diagonal-cut photos
   ══════════════════════════════════════════════════════ */

.gh-tiles {
    gap: var(--unify-space-2xl);
}

.gh-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--unify-radius-lg);
    background: var(--unify-white);
    box-shadow: var(--unify-shadow-md);
    transition: transform var(--unify-transition-fast), box-shadow var(--unify-transition-fast);
}

.gh-tile .wp-block-image {
    margin: 0;
}

.gh-tile .wp-block-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 78%);
}

.gh-tile__body {
    padding: 0 var(--unify-space-md) var(--unify-space-md);
}

.gh-tile__body h3 {
    margin: 0 0 var(--unify-space-sm);
    font-size: var(--unify-size-lg);
}

.gh-tile__body h3 a {
    color: inherit;
    text-decoration: none;
}

/* The whole tile is clickable via its heading link. */
.gh-tile__body h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.gh-tile__more {
    margin: 0;
    font-size: var(--unify-size-sm);
    font-weight: 500;
}

.gh-tile__more::after,
.gh-news .wp-block-read-more::after {
    content: ' \203A';
    color: var(--gh-mustard-deep);
    font-weight: 700;
}

.gh-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--unify-shadow-lg);
}

.gh-tile:focus-within {
    outline: 3px solid var(--gh-accent);
    outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════
   LATEST NEWS — white cards on off-white
   ══════════════════════════════════════════════════════ */

.gh-news .wp-block-post-template {
    gap: var(--unify-space-lg);
}

.gh-news .wp-block-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--unify-radius-lg);
    background: var(--unify-white);
}

.gh-news .wp-block-post-featured-image {
    margin: 0;
}

.gh-news .wp-block-post-featured-image img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.gh-news .wp-block-post-title {
    margin: var(--unify-space-md) var(--unify-space-md) var(--unify-space-sm);
    font-family: var(--unify-font-body);
    font-size: var(--unify-size-lg);
    font-weight: 500;
    line-height: 1.35;
}

.gh-news .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

.gh-news .wp-block-post-title a:hover {
    text-decoration: underline;
}

.gh-news .wp-block-read-more {
    margin: 0 var(--unify-space-md) var(--unify-space-md);
    font-size: var(--unify-size-sm);
    color: var(--gh-ink);
}


/* ══════════════════════════════════════════════════════
   FEATURE — image and text (Explore on slate, Support on blue)
   ══════════════════════════════════════════════════════ */

.gh-feature .wp-block-media-text__content {
    padding: 0 var(--unify-space-2xl);
}

.gh-feature .wp-block-media-text__content p {
    line-height: 1.75;
}

/* Photos get rounded corners; transparent illustrations don't need them. */
.gh-feature.is-photo .wp-block-media-text__media img {
    border-radius: var(--unify-radius-lg);
}

@media (max-width: 600px) {
    .gh-feature .wp-block-media-text__content {
        padding: var(--unify-space-lg) 0 0;
    }
}


/* ══════════════════════════════════════════════════════
   QUOTE — full-bleed photo with a hand-drawn quote
   ══════════════════════════════════════════════════════ */

.gh-quote-cover {
    min-height: clamp(380px, 50vw, 560px);
}

.gh-quote-cover .gh-quote-cover__text {
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--unify-font-heading);
    font-size: var(--unify-size-3xl);
    line-height: 1.3;
    text-align: center;
    color: var(--unify-white);
}


/* ══════════════════════════════════════════════════════
   SIGN-UP — teal band
   ══════════════════════════════════════════════════════ */

.gh-signup {
    text-align: center;
}

.gh-signup h2 {
    margin-bottom: var(--unify-space-sm);
    font-family: var(--unify-font-body);
    font-size: var(--unify-size-xl);
    font-weight: 500;
}

.gh-signup__note {
    margin-top: var(--unify-space-lg);
}


/* ══════════════════════════════════════════════════════
   FUNDER LOGOS
   ══════════════════════════════════════════════════════ */

.gh-funders {
    padding: var(--unify-space-2xl) 0;
    background: var(--unify-white);
}

.gh-funders__heading {
    margin: 0 0 var(--unify-space-lg);
    font-family: var(--unify-font-body);
    font-size: var(--unify-size-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--gh-slate);
}

.gh-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unify-space-lg) var(--unify-space-2xl);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-logos__item {
    margin: 0;
}

.gh-logos img {
    display: block;
    max-height: 70px;
    max-width: 180px;
    width: auto;
    height: auto;
}

.gh-logos .gh-logos__badge img {
    max-height: 140px;
}

.gh-logos a {
    display: block;
    transition: opacity var(--unify-transition-fast);
}

.gh-logos a:hover {
    opacity: 0.75;
}

@media (max-width: 600px) {
    .gh-logos img { max-height: 52px; max-width: 130px; }
    .gh-logos .gh-logos__badge img { max-height: 110px; }
}


/* ══════════════════════════════════════════════════════
   INNER PAGES — shared bits
   ══════════════════════════════════════════════════════ */

/* Lead paragraph at the top of plain pages */
.gh-lead {
    font-size: var(--unify-size-xl);
    line-height: 1.5;
}

.gh-content > .gh-lead:first-child {
    margin-top: var(--unify-space-3xl);
}

.gh-intro + .gh-intro,
.gh-intro .gh-intro__lead + .gh-intro__lead {
    margin-top: var(--unify-space-md);
}

.gh-credit {
    font-size: var(--unify-size-sm);
    color: var(--gh-slate);
}

/* Short centred call to action */
.gh-cta {
    text-align: center;
}

.gh-cta h2 {
    margin-top: 0;
}

/* Pull quote in the display face */
.gh-pullquote {
    margin-block: var(--unify-space-2xl);
    padding: 0 0 0 var(--unify-space-lg);
    border-left: 4px solid var(--gh-mustard);
    background: none;
}

.gh-pullquote p {
    font-family: var(--unify-font-heading);
    font-size: var(--unify-size-2xl);
    line-height: 1.3;
}

.gh-pullquote cite {
    font-style: normal;
    font-size: var(--unify-size-sm);
    color: var(--gh-slate);
}

/* Quote on plain white (About) */
.gh-quote-band {
    text-align: center;
}

.gh-quote-band__text {
    margin: 0;
    font-family: var(--unify-font-heading);
    font-size: var(--unify-size-3xl);
    line-height: 1.25;
}

/* Alternating photo rows (Discover) */
.gh-content > .gh-rows {
    display: grid;
    gap: var(--unify-space-section);
    margin-bottom: var(--unify-space-section);
}

/* Media & text rows inside a plain wide group keep the brand padding */
.gh-content > .alignwide.gh-feature {
    margin-block: var(--unify-space-3xl);
}


/* ══════════════════════════════════════════════════════
   PAGE TILES — [gh_child_pages] and "More in …"
   Same white diagonal-cut tiles as the homepage signposts.
   ══════════════════════════════════════════════════════ */

.gh-page-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--unify-space-2xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-page-tile {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.gh-page-tile__image {
    aspect-ratio: 1 / 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 78%);
    /* Pages without a featured image get a brand pattern instead */
    background: url('../images/patterns/leaves.svg') center / cover no-repeat, var(--gh-slate);
}

.gh-page-tile__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-page-tile .gh-tile__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.gh-page-tile__excerpt {
    margin: 0 0 var(--unify-space-md);
    font-size: var(--unify-size-sm);
    line-height: 1.55;
    color: var(--gh-slate);
}

.gh-page-tile .gh-tile__more {
    margin-top: auto;
}

@media (max-width: 960px) {
    .gh-page-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--unify-space-xl); }
}

@media (max-width: 560px) {
    .gh-page-tiles { grid-template-columns: 1fr; }
}

.gh-siblings .gh-tile {
    box-shadow: var(--unify-shadow-sm);
}


/* ══════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════ */

.gh-content > .gh-contact {
    gap: var(--unify-space-3xl);
    margin-top: var(--unify-space-3xl);
    margin-bottom: var(--unify-space-3xl);
}

.gh-contact h2,
.gh-location h2,
.gh-enquiry h2,
.gh-donate-section h2 {
    margin-top: 0;
    font-size: var(--unify-size-2xl);
}

.gh-contact__card {
    align-self: flex-start;
    padding: var(--unify-space-xl);
    border-radius: var(--unify-radius-lg);
    background: url('../images/patterns/scales.svg') right -60px bottom -60px / 260px no-repeat, var(--gh-sky);
}

.gh-details {
    display: grid;
    gap: var(--unify-space-lg);
    margin-top: var(--unify-space-lg);
}

.gh-details__label {
    margin: 0 0 var(--unify-space-xs);
    font-size: var(--unify-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gh-details address,
.gh-details p {
    margin: 0;
    font-style: normal;
    line-height: 1.6;
}

.gh-details a {
    color: var(--gh-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Map — click to load */
.gh-content > .gh-location {
    margin-bottom: var(--unify-space-3xl);
}

.gh-map {
    position: relative;
    aspect-ratio: 16 / 7;
    min-height: 320px;
    overflow: hidden;
    border-radius: var(--unify-radius-lg);
    background: url('../images/patterns/waves-alt.svg') center / cover no-repeat, var(--gh-slate);
}

.gh-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.gh-map__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--unify-space-md);
    padding: var(--unify-space-lg);
    text-align: center;
    color: var(--unify-white);
    background: rgba(31, 33, 36, 0.45);
}

.gh-map__load {
    cursor: pointer;
    font-size: var(--unify-size-md);
}

.gh-map__note {
    max-width: 30rem;
    margin: 0;
    font-size: var(--unify-size-sm);
}

.gh-map__note a {
    color: var(--unify-white);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .gh-map { aspect-ratio: 4 / 5; }
}

/* Getting here */
.gh-getting-here {
    gap: var(--unify-space-2xl);
}

.gh-getting-here h3 {
    margin-top: 0;
    font-size: var(--unify-size-xl);
}

.gh-getting-here a {
    font-weight: 500;
    text-decoration: underline;
}

.gh-getting-here__map img {
    border-radius: var(--unify-radius-md);
}


/* ══════════════════════════════════════════════════════
   FORMS — WPForms (modern markup), matched to the brand
   Set on the container so WPForms' own CSS variables pick it up.
   ══════════════════════════════════════════════════════ */

.gh-form .wpforms-container,
.wpforms-container.gh-form-style {
    --wpforms-field-border-radius: var(--unify-radius-md);
    --wpforms-field-border-color: var(--gh-slate);
    --wpforms-field-border-size: 1px;
    --wpforms-field-background-color: var(--unify-white);
    --wpforms-field-text-color: var(--gh-ink);
    --wpforms-label-color: var(--gh-ink);
    --wpforms-label-sublabel-color: var(--gh-slate);
    --wpforms-label-error-color: #b3261e;
    --wpforms-button-border-radius: var(--unify-radius-pill);
    --wpforms-button-background-color: var(--gh-mustard);
    --wpforms-button-text-color: var(--gh-ink);
    --wpforms-button-border-size: 0px;
    --wpforms-page-break-color: var(--gh-mustard);
    margin: 0;
    font-family: var(--unify-font-body);
}

/* Fallbacks for WPForms' classic markup and anything the variables miss */
.gh-form .wpforms-field {
    padding: 0 0 var(--unify-space-lg);
}

.gh-form .wpforms-field-label,
.gh-form .wpforms-field-label-inline {
    font-weight: 700;
    color: var(--gh-ink);
}

.gh-form .wpforms-field-sublabel,
.gh-form .wpforms-field-description {
    font-size: var(--unify-size-sm);
    color: var(--gh-slate);
}

.gh-form .wpforms-required-label {
    color: inherit;
}

.gh-form .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
.gh-form .wpforms-field select,
.gh-form .wpforms-field textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.75em 0.9em;
    font: inherit;
    color: var(--gh-ink);
    background: var(--unify-white);
    border: 1px solid var(--gh-slate);
    border-radius: var(--unify-radius-md);
}

.gh-form .wpforms-field textarea {
    min-height: 10rem;
}

.gh-form .wpforms-field :is(input, select, textarea):focus {
    outline: 3px solid var(--gh-accent);
    outline-offset: 1px;
    border-color: var(--gh-ink);
    box-shadow: none;
}

.gh-form .wpforms-field input[type="checkbox"],
.gh-form .wpforms-field input[type="radio"] {
    accent-color: var(--gh-ink);
    width: 1.15em;
    height: 1.15em;
}

.gh-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gh-form legend {
    margin-bottom: var(--unify-space-xs);
    padding: 0;
}

.gh-form .wpforms-field ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-form .wpforms-field li {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.gh-form .wpforms-submit-container {
    padding-top: var(--unify-space-sm);
}

.gh-form button.wpforms-submit {
    padding: 0.8em 1.8em;
    font: inherit;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gh-ink);
    background: var(--gh-mustard);
    border: 0;
    border-radius: var(--unify-radius-pill);
    cursor: pointer;
}

.gh-form button.wpforms-submit:hover {
    background: var(--gh-mustard-deep);
}

.gh-form .wpforms-error,
.gh-form label.wpforms-error {
    margin-top: var(--unify-space-xs);
    font-size: var(--unify-size-sm);
    font-weight: 500;
    color: #b3261e;
}

.gh-form .wpforms-field input.wpforms-error,
.gh-form .wpforms-field textarea.wpforms-error {
    border-color: #b3261e;
}

.gh-form .wpforms-confirmation-container-full {
    padding: var(--unify-space-lg);
    color: var(--gh-ink);
    background: var(--gh-sky);
    border: 0;
    border-radius: var(--unify-radius-md);
}

.gh-form .wpforms-confirmation-container-full p:last-child {
    margin: 0;
}


/* ══════════════════════════════════════════════════════
   VENUE HIRE
   ══════════════════════════════════════════════════════ */

.gh-content > .gh-hire-intro {
    gap: var(--unify-space-3xl);
    margin-top: var(--unify-space-3xl);
    margin-bottom: var(--unify-space-3xl);
}

.gh-steps-card {
    padding: var(--unify-space-xl);
    border-radius: var(--unify-radius-lg);
    background: var(--gh-offwhite);
}

.gh-steps-card h3 {
    margin-top: 0;
    font-size: var(--unify-size-xl);
}

.gh-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gh-step;
}

.gh-steps li {
    position: relative;
    min-height: 2.25rem;
    margin: 0 0 var(--unify-space-md);
    padding-left: 3rem;
    counter-increment: gh-step;
}

.gh-steps li::before {
    content: counter(gh-step);
    position: absolute;
    top: -0.2rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    font-weight: 700;
    border-radius: 50%;
    background: var(--gh-mustard);
}

.gh-spaces {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--unify-space-xl);
}

.gh-space {
    overflow: hidden;
    border-radius: var(--unify-radius-lg);
    background: var(--unify-white);
}

.gh-space .wp-block-image {
    margin: 0;
}

.gh-space .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gh-space h3 {
    margin: var(--unify-space-md) var(--unify-space-lg) var(--unify-space-xs);
    font-size: var(--unify-size-lg);
}

.gh-space p {
    margin: 0 var(--unify-space-lg) var(--unify-space-lg);
    font-size: var(--unify-size-sm);
    line-height: 1.55;
    color: var(--gh-slate);
}

@media (max-width: 960px) {
    .gh-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .gh-spaces { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   SUPPORT US
   ══════════════════════════════════════════════════════ */

.gh-content > .gh-ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--unify-space-xl);
    margin-bottom: var(--unify-space-section);
}

.gh-way {
    display: flex;
    flex-direction: column;
    padding: var(--unify-space-xl);
    border-top: 6px solid var(--gh-mustard);
    border-radius: var(--unify-radius-md);
    background: var(--gh-offwhite);
}

.gh-way:nth-child(3n+2) { border-top-color: var(--gh-teal); }
.gh-way:nth-child(3n)   { border-top-color: var(--gh-blue); }

.gh-way h3 {
    margin: 0 0 var(--unify-space-sm);
    font-size: var(--unify-size-xl);
}

.gh-way p {
    margin: 0 0 var(--unify-space-md);
    line-height: 1.6;
}

.gh-way > :last-child {
    margin-top: auto;
    margin-bottom: 0;
}

.gh-way__link a {
    font-weight: 700;
    color: var(--gh-ink);
    text-decoration: underline;
    text-decoration-color: var(--gh-mustard-deep);
    text-decoration-thickness: 2px;
}

.gh-way__link a::after {
    content: ' \2192';
}

@media (max-width: 960px) {
    .gh-content > .gh-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .gh-content > .gh-ways { grid-template-columns: 1fr; }
}

/* Social links as brand tiles (also used in the footer) */
.gh-social {
    display: flex;
    gap: var(--unify-space-sm);
}

.gh-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--unify-white);
    border-radius: var(--unify-radius-sm);
    background: var(--gh-slate);
}

.gh-social a[aria-label="Facebook"]  { background: #3b5998; }
.gh-social a[aria-label="Instagram"] { background: #d6336c; }
.gh-social a[aria-label="LinkedIn"]  { background: #0a66c2; }

/* Donate */
.gh-content > .gh-donate-section {
    gap: var(--unify-space-3xl);
    margin-top: var(--unify-space-section);
    margin-bottom: var(--unify-space-section);
    scroll-margin-top: calc(var(--unify-nav-height) + var(--unify-space-lg));
}

.gh-donate iframe {
    display: block;
    width: 100%;
    max-width: 500px;
    min-width: 250px;
    border: 0;
}


/* ══════════════════════════════════════════════════════
   TEAM — Unify Team's [unify_team] on the Our Team page
   ══════════════════════════════════════════════════════ */

.gh-content > .unify-team {
    max-width: calc(var(--unify-max-width) + 2 * var(--unify-gutter));
    margin-top: var(--unify-space-2xl);
    margin-bottom: var(--unify-space-section);
}

.unify-team {
    --ut-card-bg: var(--gh-offwhite);
    --ut-accent: var(--gh-mustard);
    --ut-muted: var(--gh-slate);
    --ut-min: 330px; /* three across, as on the live site */
}

.unify-team__title {
    font-size: var(--unify-size-4xl);
}

.gh-content .unify-team__nav a {
    text-decoration: none;
}

.unify-team__name {
    font-family: var(--unify-font-body);
    font-weight: 700;
}