/*
 Theme Name:   The Gardeners' House
 Theme URI:    https://thegardenershouse.org
 Description:  Child theme for The Gardeners' House. Built on Unify by Unify Studio.
 Author:       Unify Studio for The Gardeners' House
 Author URI:   https://unify-studio.co.uk
 Template:     unify
 Version:      0.3.4
 Requires at least: 6.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  unify-child
*/

/* ══════════════════════════════════════════════════════
   FONTS — self-hosted from /assets/fonts
   GH Solaris: display / headings only. Satoshi: everything else.
   ══════════════════════════════════════════════════════ */

@font-face {
    font-family: 'GH Solaris';
    src: url('assets/fonts/gh-solaris.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/satoshi-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/satoshi-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/satoshi-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/satoshi-medium-italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/satoshi-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/satoshi-bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ══════════════════════════════════════════════════════
   THE GARDENERS' HOUSE — CSS Custom Property Overrides
   Today's palette, sampled from the live site. Swap the --gh-*
   values for Brand 2.0 when it's signed off; everything else
   reads from these.
   ══════════════════════════════════════════════════════ */

:root {

    /* ── Brand palette (sampled from the live site, Oct 2026) ── */
    --gh-ink:               #1f2124;
    --gh-slate:             #5e6476;   /* footer, Explore band; muted text (5.9:1 on white) */
    --gh-teal:              #3c9db0;   /* sign-up band */
    --gh-blue:              #3893cf;   /* Support band */
    --gh-sky:               #b0d9f6;   /* events band */
    --gh-mustard:           #c8aa56;   /* tiles band, buttons, slider cards: ink text only */
    --gh-mustard-deep:      #a6893a;   /* hover */
    --gh-offwhite:          #f7f7f7;   /* news band */
    --gh-line:              #d9dce2;   /* borders, inputs */
    --gh-accent:            #2a7bb3;   /* eyebrows, focus rings (4.6:1 on white) */


    /* ── Colours ── */
    --unify-primary:        var(--gh-ink);
    --unify-secondary:      var(--gh-slate);
    --unify-accent:         var(--gh-mustard);
    --unify-bg:             #ffffff;
    --unify-bg-alt:         var(--gh-offwhite);
    --unify-text:           var(--gh-ink);
    --unify-text-muted:     var(--gh-slate);
    --unify-border:         var(--gh-line);

    /* ── Typography ── */
    --unify-font-heading:   'GH Solaris', Helvetica, Arial, sans-serif;
    --unify-font-body:      'Satoshi', Helvetica, Arial, sans-serif;
    --unify-line-height:    1.6;

    /* ── Layout ── */
    --unify-max-width-text: 960px;   /* default column for pages and posts (Unify: 760px) */

    /* ── Nav ── */
    --unify-nav-height:     108px;
    --unify-nav-bg:         var(--unify-white);
    --unify-nav-color:      var(--unify-text);
    --unify-nav-logo-height: 76px;   /* logo is 800×244, so about 250px wide */

    /* ── Borders & Radius ── */
    --unify-radius-md:      6px;
    --unify-radius-lg:      12px;
    --unify-radius-pill:    50px;
}


/* ══════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════ */

body {
    font-size: 1.0625rem;
}

/* Unify sets p { color: var(--unify-text) }, which turns text dark on dark
   sections and slides. Let paragraphs take the colour of their container. */
p {
    color: inherit;
}

a {
    text-underline-offset: 0.18em;
}

/* Links inside running text are underlined so they don't rely on colour. */
.gh-content p a,
.gh-content li a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gh-accent);
    outline-offset: 2px;
}

/* GH Solaris is the hand-drawn display face: page and section titles.
   Smaller headings, and any heading with .gh-heading-sans, use bold Satoshi
   (as on the live site's Explore / Support Us / card titles). */
h1, h2 {
    font-weight: 400;
    line-height: 1.1;
}

h3, h4, h5, h6,
.gh-heading-sans {
    font-family: var(--unify-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h2.gh-heading-sans {
    font-size: var(--unify-size-3xl);
}

/* Skip link — visible when focused */
.gh-skip-link:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: var(--unify-z-toast);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    padding: 0.75rem 1.25rem;
    background: var(--gh-mustard);
    color: var(--gh-ink);
    border-radius: var(--unify-radius-pill);
    font-weight: 700;
}

.gh-editor-note {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    background: var(--gh-offwhite);
    border: 1px dashed var(--gh-slate);
    border-radius: var(--unify-radius-md);
}


/* ══════════════════════════════════════════════════════
   PAGE CONTENT — block layout for a classic theme
   Text column by default; .alignwide and .alignfull break out.
   ══════════════════════════════════════════════════════ */

.gh-content > * {
    max-width: var(--unify-max-width-text);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--unify-gutter);
    padding-right: var(--unify-gutter);
}

.gh-content > .alignwide {
    max-width: calc(var(--unify-max-width) + 2 * var(--unify-gutter));
}

.gh-content > .alignfull {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Full-width groups keep their inner content on the grid. */
.gh-content > .alignfull.wp-block-group,
.gh-content > .alignfull.wp-block-cover {
    padding-left: var(--unify-gutter);
    padding-right: var(--unify-gutter);
}

/* Constrained groups get their widths from theme.json; this covers the legacy inner container. */
.gh-content > .alignfull > .wp-block-group__inner-container {
    max-width: var(--unify-max-width);
    margin-left: auto;
    margin-right: auto;
}

.gh-content > :first-child {
    margin-top: 0;
}

/* Breathing room where plain content meets a full-width band. */
.gh-content > .alignfull + :not(.alignfull) {
    margin-top: var(--unify-space-3xl);
}

.gh-content > :not(.alignfull):last-child {
    margin-bottom: var(--unify-space-3xl);
}

.gh-content > p,
.gh-content > ul,
.gh-content > ol {
    margin-top: 0;
    margin-bottom: 1.25em;
}


/* ══════════════════════════════════════════════════════
   BUTTONS — core buttons and Unify buttons share one look
   ══════════════════════════════════════════════════════ */

.wp-block-button__link,
.unify-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1.6em;
    font-family: var(--unify-font-body);
    font-weight: 700;
    line-height: 1.1;
    color: var(--gh-ink);
    background: var(--gh-mustard);
    border: 2px solid var(--gh-mustard);
    border-radius: var(--unify-radius-pill);
    text-decoration: none;
    transition: background var(--unify-transition-fast), border-color var(--unify-transition-fast);
}

.wp-block-button__link:hover,
.unify-btn:hover {
    opacity: 1;
    color: var(--gh-ink);
    background: var(--gh-mustard-deep);
    border-color: var(--gh-mustard-deep);
}

.is-style-outline > .wp-block-button__link,
.unify-btn--outline {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.is-style-outline > .wp-block-button__link:hover,
.unify-btn--outline:hover {
    background: var(--gh-ink);
    border-color: var(--gh-ink);
    color: var(--unify-white);
}


/* ══════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════ */

.unify-nav__menu a {
    font-weight: 500;
}

.unify-nav__menu .current-menu-item > a,
.unify-nav__menu .current-menu-ancestor > a {
    text-decoration: underline;
    text-decoration-color: var(--gh-mustard);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.4em;
}

/* Dropdowns (About has children) */
.unify-nav__menu li {
    position: relative;
}

.unify-nav__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: var(--unify-white);
    border-radius: var(--unify-radius-md);
    box-shadow: var(--unify-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--unify-transition-fast), transform var(--unify-transition-fast), visibility var(--unify-transition-fast);
    z-index: var(--unify-z-dropdown);
}

.unify-nav__menu li:hover > .sub-menu,
.unify-nav__menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.unify-nav__menu .sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════
   PAGE BANNER — news page, archives, single posts
   Mustard with the scribble texture and a torn bottom edge.
   ══════════════════════════════════════════════════════ */

.gh-banner {
    position: relative;
    padding: var(--unify-space-3xl) 0 calc(var(--unify-space-3xl) + clamp(24px, 4vw, 56px));
    color: var(--gh-ink);
    background: url('assets/images/patterns/scribble.svg') center / cover no-repeat, var(--gh-mustard);
}

.gh-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(24px, 4vw, 56px);
    background: url('assets/images/torn-edge.svg') bottom / 100% 100% no-repeat;
    pointer-events: none;
}

.gh-banner__inner {
    max-width: 900px;
    text-align: center;
}

.gh-banner__title {
    margin: 0;
    font-size: var(--unify-size-4xl);
    line-height: 1.15;
    color: inherit;
}

.gh-banner__intro,
.gh-banner__intro p {
    margin-top: var(--unify-space-md);
    font-size: var(--unify-size-xl);
    line-height: 1.6;
    color: inherit;
}

.gh-banner__intro > :last-child {
    margin-bottom: 0;
}

.gh-banner__date {
    margin: var(--unify-space-md) 0 0;
    font-weight: 500;
}

/* Colours set per page (Page banner box). Each takes its band's pattern. */
.gh-banner--sky   { background: url('assets/images/patterns/scales.svg') center / cover no-repeat, var(--gh-sky); }
.gh-banner--blue  { background: url('assets/images/patterns/scribble.svg') center / cover no-repeat, var(--gh-blue); }
.gh-banner--teal  { background: url('assets/images/patterns/waves.svg') center / cover no-repeat, var(--gh-teal); color: var(--unify-white); }
.gh-banner--slate { background: url('assets/images/patterns/waves-alt.svg') center / cover no-repeat, var(--gh-slate); color: var(--unify-white); }

/* Child pages: link back to the parent above the title */
.gh-banner__parent {
    margin: 0 0 var(--unify-space-sm);
    font-weight: 500;
}

.gh-banner__parent a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.gh-banner__parent a::before {
    content: '\2190';
    display: inline-block;
    margin-right: 0.4em;
    text-decoration: none;
}

/* With a featured image: photo cut on the diagonal at left, text right */
.gh-banner--image .gh-banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--unify-space-3xl);
    align-items: center;
    max-width: calc(var(--unify-max-width) + 2 * var(--unify-gutter));
    text-align: left;
}

.gh-banner__media {
    display: flex;
    justify-content: center;
}

.gh-banner__media img {
    width: min(100%, 380px);
    aspect-ratio: 1;
    object-fit: cover;
}

/* Paint-stroke mask: switched on by banner.php when
   assets/images/featured-mask.svg exists (black/white or alpha SVG). */
.gh-banner__media--masked img {
    -webkit-mask: url('assets/images/featured-mask.svg') center / contain no-repeat;
    mask: url('assets/images/featured-mask.svg') center / contain no-repeat;
}

@media (max-width: 760px) {
    .gh-banner--image .gh-banner__inner {
        grid-template-columns: 1fr;
        gap: var(--unify-space-2xl);
        text-align: center;
    }

    .gh-banner__media img {
        width: min(100%, 280px);
    }
}


/* ══════════════════════════════════════════════════════
   NEWS CARDS — light grey cards, image on top
   ══════════════════════════════════════════════════════ */

.gh-archive {
    padding-top: var(--unify-space-2xl);
    padding-bottom: var(--unify-space-4xl);
}

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

.gh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--gh-offwhite);
    transition: box-shadow var(--unify-transition-fast);
}

.gh-card:hover {
    box-shadow: var(--unify-shadow-md);
}

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

.gh-card__image {
    aspect-ratio: 8 / 5;
    background: var(--gh-line);
}

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

.gh-card__body {
    flex: 1;
    padding: var(--unify-space-lg) var(--unify-space-lg) var(--unify-space-xl);
}

.gh-card__title {
    margin: 0 0 var(--unify-space-md);
    font-family: var(--unify-font-body);
    font-size: var(--unify-size-xl);
    font-weight: 400;
    line-height: 1.45;
}

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

.gh-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.gh-card:hover .gh-card__title a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.gh-card__more {
    font-size: var(--unify-size-sm);
}

.gh-card__more::after {
    content: ' \2192';
    margin-left: 0.3em;
}

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

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

/* Pagination */
.gh-archive .pagination {
    margin-top: var(--unify-space-2xl);
}

.gh-archive .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--unify-space-xs);
}

.gh-archive .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.9rem;
    border-radius: var(--unify-radius-pill);
    font-weight: 500;
    color: var(--gh-ink);
    text-decoration: none;
    background: var(--gh-offwhite);
}

.gh-archive .page-numbers.current,
.gh-archive a.page-numbers:hover {
    background: var(--gh-mustard);
}


/* ══════════════════════════════════════════════════════
   SINGLE POST — reading column under the banner
   ══════════════════════════════════════════════════════ */

.gh-single {
    padding: var(--unify-space-2xl) 0 var(--unify-space-3xl);
}

.gh-single__content,
.gh-single__content :is(p, li) {
    font-size: var(--unify-size-md);
    line-height: 1.75;
    color: var(--gh-slate);
}

.gh-single__content :is(h2, h3, h4) {
    margin-top: var(--unify-space-2xl);
    margin-bottom: var(--unify-space-sm);
    color: var(--gh-ink);
}

.gh-single__content h2 { font-size: var(--unify-size-3xl); }
.gh-single__content h3 { font-size: var(--unify-size-xl); }

.gh-single__content .wp-block-image img {
    height: auto;
}

.gh-single__footer,
.gh-single__comments {
    max-width: var(--unify-max-width-text);
    margin: 0 auto;
    padding: 0 var(--unify-gutter);
}

.gh-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unify-space-xs);
    margin-bottom: var(--unify-space-xl);
}

.gh-single__tags a {
    padding: 0.3em 0.9em;
    font-size: var(--unify-size-sm);
    color: var(--gh-ink);
    text-decoration: none;
    background: var(--gh-offwhite);
    border-radius: var(--unify-radius-pill);
}

.gh-single .nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--unify-space-lg);
    padding-top: var(--unify-space-xl);
    border-top: 1px solid var(--gh-line);
}

.gh-single .nav-links a {
    display: block;
    max-width: 22rem;
    font-weight: 500;
    color: var(--gh-ink);
    text-decoration: none;
}

.gh-single .nav-next {
    margin-left: auto;
    text-align: right;
}

.gh-single__nav-label {
    display: block;
    margin-bottom: 0.2em;
    font-size: var(--unify-size-sm);
    font-weight: 400;
    color: var(--gh-slate);
}

/* Comment form — basic field styling (turn comments off in Settings → Discussion if unused) */
.comment-form label {
    display: block;
    margin-bottom: var(--unify-space-xs);
    font-weight: 500;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.7em 0.9em;
    font: inherit;
    border: 1px solid var(--gh-slate);
    border-radius: var(--unify-radius-md);
}

.comment-form .submit {
    padding: 0.8em 1.6em;
    font: inherit;
    font-weight: 700;
    color: var(--gh-ink);
    background: var(--gh-mustard);
    border: 0;
    border-radius: var(--unify-radius-pill);
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════
   NAV OVER THE HERO — pages with a Hero or Posts Slider
   Transparent with white links until Unify's main.js adds
   .is-scrolled; the colour logo swaps for the white one.
   ══════════════════════════════════════════════════════ */

.gh-has-hero .unify-main {
    padding-top: 0;
}

.gh-has-hero .unify-nav:not(.is-scrolled) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent);
    box-shadow: none;
}

.gh-has-hero .unify-nav:not(.is-scrolled) .unify-nav__menu > li > a,
.gh-has-hero .unify-nav:not(.is-scrolled) .unify-nav__logo-text {
    color: var(--unify-white);
}

.gh-logo {
    position: relative;
    display: block;
}

.gh-logo img {
    display: block;
    width: auto;
    height: var(--unify-nav-logo-height);
}

/* Smaller logo and bar on tablets and phones */
@media (max-width: 960px) {
    :root {
        --unify-nav-height: 84px;
        --unify-nav-logo-height: 56px;
    }
}

@media (max-width: 420px) {
    :root {
        --unify-nav-logo-height: 48px;
    }
}

.gh-logo .gh-logo__white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--unify-transition-fast);
}

.gh-has-hero .unify-nav:not(.is-scrolled) .gh-logo__colour {
    opacity: 0;
}

.gh-has-hero .unify-nav:not(.is-scrolled) .gh-logo__white {
    opacity: 1;
}

.gh-has-hero .unify-nav:not(.is-scrolled) .unify-nav__burger span {
    background: var(--unify-white);
}

.unify-nav__menu > li > a {
    font-size: var(--unify-size-base);
}


/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */

.gh-footer {
    padding-block: 0;
    background: var(--gh-slate);
    color: var(--unify-white);
}

.gh-footer a {
    color: var(--unify-white);
}

.gh-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

.gh-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--unify-space-2xl) var(--unify-space-3xl);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--unify-space-3xl) 0 var(--unify-space-2xl);
}

.gh-footer__heading {
    margin: 0 0 var(--unify-space-md);
    font-family: var(--unify-font-body);
    font-size: var(--unify-size-md);
    font-weight: 700;
    color: var(--unify-white);
}

.gh-footer__heading--sub {
    margin-top: var(--unify-space-lg);
    margin-bottom: var(--unify-space-xs);
    font-size: var(--unify-size-base);
}

.gh-footer p,
.gh-footer address {
    margin: 0 0 var(--unify-space-sm);
    font-style: normal;
    color: var(--unify-white);
}

.gh-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-footer__list li + li {
    margin-top: var(--unify-space-md);
}

/* Social icons as coloured tiles */
.gh-footer__social {
    display: flex;
    gap: var(--unify-space-sm);
}

.gh-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--unify-radius-sm);
    background: rgba(255, 255, 255, 0.15);
}

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

.gh-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--unify-space-md);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--unify-space-lg) 0 var(--unify-space-xl);
    font-size: var(--unify-size-xs);
}

.gh-footer__bar p {
    margin: 0;
}

.gh-footer__legal {
    display: flex;
    gap: var(--unify-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-footer__credit {
    opacity: 0.8;
}

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

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

/* Breathing room where plain content runs into a full-width band. */
.gh-content > :not(.alignfull) + .alignfull {
    margin-top: var(--unify-space-3xl);
}