/*
Theme Name: NGK Ruinerwold-Koekange (Child)
Template: twentytwentyfive
Description: Child theme for the NGK Ruinerwold-Koekange one-pager. Owns custom block patterns, theme.json overrides, and minor style tweaks.
Version: 1.1.0
Text Domain: ngk
*/

/* ---------------------------------------------------------------------------
   Reset + global niceties
   ------------------------------------------------------------------------ */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

@media (max-width: 600px) {
    .hide-on-mobile {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Typography polish — tighten display headings, set lead paragraph weight.
   ------------------------------------------------------------------------ */

h1,
h2 {
    letter-spacing: -0.015em;
}
h3 {
    letter-spacing: -0.005em;
}

.is-lead p,
p.is-lead {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.5;
}

/* Body links: underline with soft offset, accent on hover. */
.entry-content a,
main a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------------
   Header — sticky, soft hairline at the bottom for separation.
   ------------------------------------------------------------------------ */

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(0, 50, 29, 0.08);
    backdrop-filter: saturate(140%) blur(8px);
    background-color: rgba(248, 247, 230, 0.92) !important;
}

/* ---------------------------------------------------------------------------
   Inline single-row header.
   Desktop:  [logo] ··· [nav centered] ··· [address right]    in one row.
   Mobile:   [logo  address-small]  /  [nav row in one line]  two rows.
   ------------------------------------------------------------------------ */

.ngk-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    min-height: 64px;
}

.ngk-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.ngk-logo img {
    display: block;
    width: 140px;
    height: auto;
    border-radius: 0 !important;
    transition: opacity 200ms ease;
}
.ngk-logo:hover img {
    opacity: 0.85;
}

.ngk-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.ngk-nav a {
    text-decoration: none !important;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    transition: color 200ms ease;
}
.ngk-nav a::after {
    content: "";
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    bottom: 14px;
    height: 2px;
    background: var(--wp--preset--color--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms ease;
}
.ngk-nav a:hover::after {
    transform: scaleX(1);
}

.ngk-header__address {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--primary);
    white-space: nowrap;
    opacity: 0.75;
}

/* --- Mobile: stack into 2 rows, both compact --- */
@media (max-width: 820px) {
    .ngk-header__inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.25rem 1rem;
        padding: 0.5rem 1rem;
        min-height: 0;
    }
    .ngk-logo {
        grid-column: 1;
        grid-row: 1;
    }
    .ngk-logo img {
        width: 120px;
    }
    .ngk-header__address {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: 0.75rem;
    }
    .ngk-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 0.5rem;
        justify-content: space-between;
        border-top: 1px solid rgba(0, 50, 29, 0.08);
        padding-top: 0.25rem;
    }
    .ngk-nav a {
        font-size: 0.75rem;
        padding: 0 0.15rem;
        letter-spacing: 0.02em;
    }
    .ngk-nav a::after {
        bottom: 10px;
    }
}

@media (max-width: 420px) {
    .ngk-header__address {
        display: none;
    }
    .ngk-logo img {
        width: 110px;
    }
    .ngk-nav {
        justify-content: space-around;
    }
    .ngk-nav a {
        font-size: 0.7rem;
    }
}

/* Smooth-scroll target offset so sticky header doesn't cover anchor headings. */
section[id],
div[id^="section-"] {
    scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------------------
   Image polish — soft rounded corners + subtle elevation on hover.
   ------------------------------------------------------------------------ */

.wp-block-image img {
    border-radius: 1rem;
    transition:
        transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 400ms ease;
}

.wp-block-image.is-flush img {
    border-radius: 0;
}

.wp-block-image.is-elevated img {
    box-shadow: 0 24px 60px -28px rgba(0, 50, 29, 0.35);
}

.wp-block-image.is-elevated:hover img {
    transform: translateY(-2px);
    box-shadow: 0 32px 72px -28px rgba(0, 50, 29, 0.42);
}

/* ---------------------------------------------------------------------------
   Section eyebrow — small uppercase label that sits above a section heading.
   ------------------------------------------------------------------------ */

.ngk-eyebrow {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin-bottom: 0.75rem;
    text-align: center;
}

.ngk-eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: var(--wp--preset--color--accent);
    margin-right: 0.6rem;
    vertical-align: middle;
}

/* Inside split-column layouts (online (terug)kijken card, postal cards, stats
   tiles, postal-address heading column) the surrounding content is intentionally
   left-aligned, so the eyebrow follows suit. */
.wp-block-column .ngk-eyebrow {
    text-align: left;
}

/* In a centered .ngk-postal card (contact fallback) the eyebrow sits directly
   under a circle icon. The decorative ::before dash adds ~17px of bulk to the
   left of the text, which makes the visible label drift right of the icon's
   centerline. Hide the dash in that case so the eyebrow text centers cleanly
   under the icon. Left-aligned .ngk-postal cards keep the dash because there
   it usefully bridges the icon down to the text. */
.ngk-postal[style*="text-align: center"]
    .ngk-postal__icon
    + .ngk-eyebrow::before,
.ngk-postal[style*="text-align:center"]
    .ngk-postal__icon
    + .ngk-eyebrow::before {
    display: none;
}

/* ---------------------------------------------------------------------------
   Section divider — tiny green diamond between sections.
   Used as <hr class="ngk-rule">.
   ------------------------------------------------------------------------ */

hr.ngk-rule {
    border: 0;
    height: 1.5rem;
    margin: 0 auto;
    max-width: 720px;
    position: relative;
    overflow: visible;
}
hr.ngk-rule::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 50, 29, 0.18),
        transparent
    );
}
hr.ngk-rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--wp--preset--color--accent);
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid var(--wp--preset--color--cream);
}

/* ---------------------------------------------------------------------------
   Hero — full-bleed image with soft fade into cream.
   ------------------------------------------------------------------------ */

.ngk-hero {
    position: relative;
}
.ngk-hero__media img {
    width: 100%;
    height: clamp(320px, 56vw, 560px);
    object-fit: cover;
    border-radius: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Services list — calendar-tile rows.
   Built from native blocks so the block editor renders them with full
   styling (no sandboxed wp:html iframe). Structure per row:
     wp:group.ngk-service
       wp:group.ngk-service__tile
         p.ngk-service__day  (e.g. "24")
         p.ngk-service__month (e.g. "mei")
       wp:group.ngk-service__body
         p.ngk-service__time
         p.ngk-service__preacher
         p.ngk-service__theme  (optional)
   ------------------------------------------------------------------------ */

.wp-block-group.ngk-service {
    display: grid !important;
    grid-template-columns: 86px 1fr;
    gap: 1.5rem;
    align-items: center;
    border-bottom: 1px solid rgba(0, 50, 29, 0.12);
    padding: 1.5rem 1rem;
    margin: 0;
    position: relative;
    transition: background-color 200ms ease;
}
.wp-block-group.ngk-service:hover {
    background-color: rgba(145, 189, 102, 0.08);
}
.wp-block-group.ngk-service:last-child {
    border-bottom: 0;
}
.wp-block-group.ngk-service.ngk-service--highlight {
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--warm) 0%,
        #f7c160 100%
    );
    border-radius: 1.25rem;
    border-bottom: 0;
    padding: 1.25rem 1rem;
    box-shadow: 0 14px 40px -22px rgba(244, 177, 60, 0.7);
}

.wp-block-group.ngk-service__tile {
    width: 78px;
    height: 78px;
    border-radius: 14px;
    background: var(--wp--preset--color--surface);
    border: 1px solid rgba(0, 50, 29, 0.12);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--wp--preset--font-family--heading);
    line-height: 1;
    box-shadow: 0 8px 22px -16px rgba(0, 50, 29, 0.4);
    transition: transform 200ms ease;
    padding: 0;
    gap: 4px;
}
.wp-block-group.ngk-service:hover .wp-block-group.ngk-service__tile {
    transform: translateY(-2px);
}
.ngk-service__day {
    font-weight: 800;
    font-size: 2rem;
    color: var(--wp--preset--color--primary);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
}
.ngk-service__month {
    font-style: normal;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--accent);
    margin: 0;
    line-height: 1;
}
.wp-block-group.ngk-service__body {
    margin: 0;
    padding: 0;
    gap: 0.2rem;
}
.ngk-service__time {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    font-size: 1.125rem;
    margin: 0;
    letter-spacing: -0.005em;
}
.ngk-service__preacher {
    font-weight: 700;
    margin: 0;
}
.ngk-service__theme {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0.25rem 0 0 0;
}
.wp-block-group.ngk-service.ngk-service--highlight .ngk-service__theme {
    color: var(--wp--preset--color--cream);
}
.ngk-service__note {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--wp--preset--color--primary);
    margin: 0.25rem 0 0 0;
}

/* Featured event banner — sits above the services list. */
.wp-block-group.ngk-featured {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--warm) 0%,
        #f7c160 100%
    );
    border-radius: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 14px 40px -22px rgba(244, 177, 60, 0.7);
}
.ngk-featured__badge {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--cream);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
    margin: 0;
    align-self: center;
    justify-self: start;
}
.wp-block-group.ngk-featured__body {
    margin: 0;
    padding: 0;
    gap: 0.2rem;
}
.ngk-featured__body p {
    margin: 0;
}
.ngk-featured__title {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--wp--preset--color--primary);
    letter-spacing: -0.01em;
    margin: 0;
}
@media (max-width: 560px) {
    .wp-block-group.ngk-service {
        grid-template-columns: 64px 1fr;
        gap: 1rem;
    }
    .wp-block-group.ngk-service__tile {
        width: 64px;
        height: 64px;
    }
    .ngk-service__day {
        font-size: 1.5rem;
    }
    .wp-block-group.ngk-featured {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Watch callout — warm card with play-button vibe.
   ------------------------------------------------------------------------ */

.ngk-watch {
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--primary) 0%,
        #00482a 100%
    );
    color: var(--wp--preset--color--cream) !important;
    border-radius: 1.5rem;
    overflow: hidden;
}
.ngk-watch h2,
.ngk-watch p.is-lead {
    color: var(--wp--preset--color--cream) !important;
}
.ngk-watch .ngk-eyebrow {
    color: var(--wp--preset--color--warm);
}
.ngk-watch .ngk-eyebrow::before {
    background: var(--wp--preset--color--warm);
}
.ngk-watch a:not(.wp-block-button__link) {
    color: var(--wp--preset--color--warm);
}

/* Play-button overlay on YouTube thumb */
.ngk-watch .wp-block-image {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
}
.ngk-watch .wp-block-image img {
    border-radius: 1rem;
}
.ngk-watch .wp-block-image::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    transform: translate(-50%, -50%);
    background: var(--wp--preset--color--warm);
    color: var(--wp--preset--color--primary);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ngk-watch .wp-block-image:hover::after {
    transform: translate(-50%, -50%) scale(1.08);
}

/* ---------------------------------------------------------------------------
   Predikant card.
   ------------------------------------------------------------------------ */

.wp-block-group.ngk-predikant {
    display: grid !important;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    align-items: center;
    background: var(--wp--preset--color--surface);
    border: 1px solid rgba(0, 50, 29, 0.1);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 20px 50px -32px rgba(0, 50, 29, 0.35);
}
.wp-block-image.ngk-predikant__avatar {
    margin: 0;
    width: 120px;
    height: 120px;
}
.wp-block-image.ngk-predikant__avatar img {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: var(--wp--preset--color--cream);
    border: 3px solid var(--wp--preset--color--accent);
    object-fit: cover;
    display: block;
    box-shadow: 0 14px 32px -16px rgba(0, 50, 29, 0.45);
}
.wp-block-group.ngk-predikant__body {
    margin: 0;
    padding: 0;
    gap: 0.4rem;
}
.ngk-predikant__name {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--wp--preset--color--primary);
    margin: 0;
    letter-spacing: -0.01em;
}
.ngk-predikant__role {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0;
}
.wp-block-group.ngk-predikant__body p:last-child {
    margin-bottom: 0;
}
@media (max-width: 560px) {
    .wp-block-group.ngk-predikant {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    .wp-block-image.ngk-predikant__avatar {
        margin: 0 auto;
    }
}

/* ---------------------------------------------------------------------------
   Pull quote — for the belief-short section.
   ------------------------------------------------------------------------ */

.ngk-pullquote p {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.5;
    color: var(--wp--preset--color--primary);
    font-style: italic;
    border-left: 3px solid var(--wp--preset--color--warm);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Address card — clear bordered card.
   ------------------------------------------------------------------------ */

.ngk-postal {
    background: var(--wp--preset--color--surface);
    border: 1px solid rgba(0, 50, 29, 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 20px 60px -36px rgba(0, 50, 29, 0.4);
    padding: 2.5rem;
}
.ngk-postal .ngk-postal__icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem 0;
    line-height: 1;
}

/* Editor parity for agenda/address blocks and homepage title behavior. */
.editor-styles-wrapper .wp-block-group.ngk-service {
    display: grid !important;
    grid-template-columns: 86px 1fr;
    align-items: center;
}
.editor-styles-wrapper .wp-block-group.ngk-service__tile {
    display: flex !important;
    flex-direction: column;
}
.editor-styles-wrapper .wp-block-group.ngk-service__body > * {
    margin-top: 0;
    margin-bottom: 0;
}
.editor-styles-wrapper .ngk-postal .ngk-postal__icon {
    display: inline-flex;
}

/* ---------------------------------------------------------------------------
   Buttons — micro-interaction.
   ------------------------------------------------------------------------ */

.wp-block-button__link {
    transition:
        transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
        background-color 200ms,
        color 200ms,
        box-shadow 200ms;
    box-shadow: 0 6px 18px -8px rgba(0, 50, 29, 0.4);
    min-height: 56px;
    display: inline-flex;
    font-size: var(--wp--preset--font-size--md);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(0, 50, 29, 0.5);
}
/* Outline button needs no shadow at rest, and shares the same height via min-height + box-sizing above. */
.wp-block-button.is-style-outline .wp-block-button__link {
    box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    box-shadow: 0 10px 24px -10px rgba(0, 50, 29, 0.35);
}

/* ---------------------------------------------------------------------------
   Fluent Forms — match the visual language.
   ------------------------------------------------------------------------ */

.fluentform input,
.fluentform textarea,
.fluentform select {
    border-radius: 0.75rem !important;
    border: 1px solid rgba(0, 50, 29, 0.15) !important;
    padding: 0.85rem 1rem !important;
    font-family: var(--wp--preset--font-family--body) !important;
    background: var(--wp--preset--color--surface) !important;
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    outline: 0;
    border-color: var(--wp--preset--color--accent) !important;
    box-shadow: 0 0 0 4px rgba(145, 189, 102, 0.25) !important;
}
.fluentform label {
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}
.fluentform .ff-btn-submit {
    border-radius: 999px !important;
    padding: 0.85rem 2rem !important;
    background: var(--wp--preset--color--primary) !important;
    font-family: var(--wp--preset--font-family--heading) !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------------------------
   Footer link styling.
   ------------------------------------------------------------------------ */

footer.wp-block-template-part a {
    color: var(--wp--preset--color--cream);
    text-decoration-color: rgba(248, 247, 230, 0.4);
    text-underline-offset: 0.25em;
    display: inline-block;
    min-height: 44px;
    line-height: 1.4;
    padding: 0.65rem 0;
}
footer.wp-block-template-part a:hover {
    color: var(--wp--preset--color--accent);
    text-decoration-color: var(--wp--preset--color--accent);
}
footer.wp-block-template-part li {
    margin: 0.25rem 0;
}
footer.wp-block-template-part h3 {
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Long-form legal pages (Privacyverklaring etc.) — calmer hierarchy.
   The global h1/h2 sizes are tuned for marketing sections on the homepage;
   they shout when applied to a 9-section legal page. Scope to .privacy-policy
   (WP adds this body class to the page set as the privacy policy).
   ------------------------------------------------------------------------ */

/* The page.html template wraps the title in main(margin-top spacing-60) +
   group(padding spacing-60). Stacked, that's ~140px above the title — way
   too much on a legal page. Tighten both. */
.privacy-policy main.wp-block-group {
    margin-top: 2rem !important;
}

.privacy-policy main > .wp-block-group {
    padding-top: 2.5rem !important;
    padding-bottom: 4rem !important;
}

.privacy-policy main .wp-block-post-title {
    font-size: clamp(2rem, 3.2vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.privacy-policy main .wp-block-post-content {
    margin-top: 0 !important;
}

.privacy-policy main h2 {
    font-size: 1.375rem;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}

.privacy-policy main h2:first-of-type {
    margin-top: 0;
}

.privacy-policy main p,
.privacy-policy main ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

.privacy-policy main ul {
    padding-left: 1.25rem;
}

.privacy-policy main li + li {
    margin-top: 0.4rem;
}

@media print {
    header.wp-block-template-part {
        position: static;
        backdrop-filter: none;
    }
    .wp-block-button {
        display: none;
    }
}