/**
 * layout.css — container, grid, section scaffolding.
 * Part of: GP Garden House child theme
 */

/* ── Container ─────────────────────────────────────────────────────────────── */
.gh-container {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gh-space-6);
    padding-right: var(--gh-space-6);
}

@media (min-width: 48rem) {
    .gh-container { padding-left: var(--gh-space-8); padding-right: var(--gh-space-8); }
}
@media (min-width: 80rem) {
    .gh-container { padding-left: var(--gh-space-12); padding-right: var(--gh-space-12); }
}

.gh-container--narrow { max-width: 760px; }
.gh-container--wide   { max-width: 1400px; }

/* ── Section spacing ───────────────────────────────────────────────────────── */
.gh-hero,
.gh-intro-band,
.gh-looking-for,
.gh-card-grid,
.gh-features,
.gh-text-block,
.gh-residents,
.gh-cta-tour,
.gh-gallery {
    padding-top: var(--gh-space-16);
    padding-bottom: var(--gh-space-16);
}

@media (min-width: 64rem) {
    .gh-hero,
    .gh-intro-band,
    .gh-looking-for,
    .gh-card-grid,
    .gh-features,
    .gh-text-block,
    .gh-residents,
    .gh-cta-tour,
    .gh-gallery {
        padding-top: var(--gh-space-24);
        padding-bottom: var(--gh-space-24);
    }
}

/* ── 2-column flex helper ──────────────────────────────────────────────────── */
.gh-2col {
    display: flex;
    flex-direction: column;
    gap: var(--gh-space-8);
}
@media (min-width: 64rem) {
    .gh-2col          { flex-direction: row; align-items: center; }
    .gh-2col > *      { flex: 1; }
}

/* ── Card grid helpers ─────────────────────────────────────────────────────── */
.gh-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gh-space-6);
}
@media (min-width: 40rem) {
    .gh-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
    .gh-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.gh-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gh-space-6);
}
@media (min-width: 48rem) {
    .gh-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section headings ──────────────────────────────────────────────────────── */
.gh-section-heading {
    text-align: center;
    margin-bottom: var(--gh-space-12);
    color: var(--gh-color-primary-dark);
}

/* ── GP overrides ──────────────────────────────────────────────────────────── */

/* Remove GP's default padding on the main template when using our flexible template */
.gh-main {
    padding: 0;
    max-width: none;
    width: 100%;
}

/* Ensure GP header/footer don't add unwanted margins */
.site-header { position: relative; z-index: 100; }

/* Remove default GP footer bar background when replaced */
.site-footer { padding: 0; background: none; }

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.gh-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.gh-lightbox--active { display: flex; }
.gh-lightbox__img    { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--gh-radius-sm); }
.gh-lightbox__close,
.gh-lightbox__prev,
.gh-lightbox__next {
    position: absolute;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: var(--gh-space-2) var(--gh-space-4);
    border-radius: var(--gh-radius-sm);
    transition: background var(--gh-transition);
}
.gh-lightbox__close  { top: var(--gh-space-4); right: var(--gh-space-4); }
.gh-lightbox__prev   { left: var(--gh-space-4);  top: 50%; transform: translateY(-50%); }
.gh-lightbox__next   { right: var(--gh-space-4); top: 50%; transform: translateY(-50%); }
.gh-lightbox__close:hover,
.gh-lightbox__prev:hover,
.gh-lightbox__next:hover { background: rgba(255,255,255,.3); }

/* ── GP: suppress duplicate site-title text when custom logo is set ───────── */
/* GP uses p.main-title (not .site-title) when a custom logo is active */
.site-header .site-branding .main-title,
.site-header .site-branding p.main-title {
    display: none;
}

/* ── GP: enlarged custom logo ───────────────────────────────────────────── */
.site-header .site-logo img.header-image.is-logo-image {
    max-height: 110px;
    width: auto;
    display: block;
}

/* ── GP: nav colors via scoped CSS custom properties ───────────────────── */
/*                                                                           */
/* GP's inline <style> drives nav colors with var(--contrast) for normal   */
/* links and var(--accent) for hover/current-page. On this white header,   */
/* --accent resolves to #ffffff — white on white, invisible.               */
/*                                                                           */
/* Fix: redefine --contrast and --accent on .main-navigation itself.        */
/* A CSS custom property declared on an element always beats the inherited  */
/* :root value, so this works regardless of external-vs-inline load order.  */
.main-navigation {
    --contrast: var(--gh-color-primary-dark); /* normal link text: deep forest green */
    --accent:   var(--gh-color-primary);       /* hover + current link: forest green  */
}

/* Subtle underline on hover for visual clarity */
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Drop-down: primary-green background, white text */
.main-navigation .main-nav ul ul {
    background-color: var(--gh-color-primary);
    --contrast: #ffffff;
    --accent:   #ffffff;
}
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.sfHover > a {
    background-color: var(--gh-color-primary-dark);
}