/**
 * Shauna & Brian's Wedding Theme - Custom Styles
 *
 * Mobile-first responsive design.
 * Uses theme.json design tokens wherever possible.
 */

/* ==========================================================================
   Base / Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

:root {
    --wp--preset--font-size--medium: clamp(
        17px,
        0.875rem + ((1vw - 3.2px) * 0.682),
        20px
    );
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

/*
 * Sticky header.
 *
 * WordPress wraps the header template-part in <header class="wp-block-template-part">.
 * position:sticky on .bs-header alone won't work because .bs-header fills 100%
 * of that wrapper's height — there's no scroll room within the parent.
 * We must make the wrapper itself sticky.
 */
.wp-site-blocks > header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

.bs-header {
    transition: box-shadow 0.3s ease;
}

.bs-header.is-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* Navigation links */
.bs-header .wp-block-navigation {
    color: white;
}

/* Navigation links */
.bs-header .wp-block-navigation a {
    position: relative;
    transition: color 0.2s ease;
    padding: 12px 0;
}

.bs-header .wp-block-navigation a::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--wp--preset--color--gold);
    transition: width 0.3s ease;
}

.bs-header .wp-block-navigation a:hover::after {
    width: 100%;
}

/*
 * Force hamburger/overlay menu below 930px.
 * WP's default breakpoint is 600px; we override it so the nav
 * doesn't wrap on tablets.
 */
@media (max-width: 929px) {
    /* Hide inline nav items, show hamburger toggle */
    .bs-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    .bs-header
        .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
}

@media (min-width: 930px) {
    /* On desktop, never show the hamburger or close buttons */
    .bs-header .wp-block-navigation__responsive-container-open,
    .bs-header .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
    /* Always show the inline nav */
    .bs-header .wp-block-navigation__responsive-container {
        display: block !important;
        position: static !important;
        width: auto !important;
        overflow: visible !important;
        visibility: visible !important;
        background: none !important;
        padding: 0 !important;
        transform: none !important;
        transition: none !important;
    }
    .bs-header
        .wp-block-navigation__responsive-container
        .wp-block-navigation__container {
        display: flex !important;
        gap: 2rem;
    }
}

/* Mobile overlay menu styling */
.wp-block-navigation__responsive-container {
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.35s ease;
    transform: translateX(100%);
}

.wp-block-navigation__responsive-container.is-menu-open {
    padding-top: 4rem;
    padding-right: 1.5rem;
    transform: translateX(0);
}

.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    margin-bottom: 0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item
    a {
    font-size: 1.25rem;
    padding: 0.75rem 0;
}

/* Hamburger button styling */
.wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--white) !important;
}

.wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--white) !important;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

/* Hero image - full width with controlled height */
.bs-hero-image {
    margin: 0 !important;
}

.bs-hero-image img {
    width: 100%;
    height: 70vh;
    min-height: 475px;
    max-height: 1080px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Hero text section */
.bs-hero-text {
    text-align: center;
}

/* Legacy cover-based hero (if still used elsewhere) */
.bs-hero {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-hero .wp-block-cover__inner-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Ornamental separator (gold line with decorative feel) */
.wp-block-separator.is-style-ornamental {
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    height: 2px;
    opacity: 1;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.bs-timeline {
    position: relative;
}

.bs-timeline-item {
    position: relative;
    transition: transform 0.2s ease;
}

/* Timeline dot */
.bs-timeline-item::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 2.2rem;
    width: 12px;
    height: 12px;
    background-color: var(--wp--preset--color--gold);
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--off-white);
}

.bs-timeline-item:hover {
    transform: translateX(4px);
}

/* ==========================================================================
   Cards — ensure consistent height within column grids
   ========================================================================== */

/* Make columns stretch their children to equal height */
.wp-block-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.wp-block-columns > .wp-block-column > .wp-block-group {
    flex: 1;
}

.is-style-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.is-style-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-1px);
}

/* Outline button style */
.is-style-outline .wp-block-button__link {
    border: 1px solid var(--wp--preset--color--sage-deep);
    color: var(--wp--preset--color--sage-deep);
    background: transparent;
}

.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--sage-deep);
    color: var(--wp--preset--color--white);
}

/* ==========================================================================
   RSVP Form (Ninja Forms)
   ========================================================================== */

.nf-form-cont {
    max-width: 600px;
    margin: 0 auto;
}

.nf-form-cont .nf-field-container {
    margin-bottom: 1.5rem;
}

.nf-form-cont .nf-field-label label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--dark);
    margin-bottom: 0.35rem;
}

.nf-form-cont input[type="text"].ninja-forms-field,
.nf-form-cont input[type="email"].ninja-forms-field,
.nf-form-cont input[type="number"].ninja-forms-field,
.nf-form-cont textarea.ninja-forms-field,
.nf-form-cont select.ninja-forms-field {
    border: 1px solid var(--wp--preset--color--warm-gray);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    background-color: var(--wp--preset--color--white);
    transition: border-color 0.2s ease;
    width: 100%;
}

.nf-form-cont input.ninja-forms-field:focus,
.nf-form-cont textarea.ninja-forms-field:focus,
.nf-form-cont select.ninja-forms-field:focus {
    outline: none;
    border-color: var(--wp--preset--color--sage-deep);
    box-shadow: 0 0 0 2px rgba(78, 105, 88, 0.15);
}

/* Radio button styling */
.nf-form-cont .listradio-wrap .nf-field-element label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    color: var(--wp--preset--color--dark);
    cursor: pointer;
}

.nf-form-cont .listradio-wrap .nf-field-element ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nf-form-cont .listradio-wrap .nf-field-element li {
    margin-bottom: 0.5rem;
}

.nf-form-cont .listradio-wrap .nf-field-element li input {
    margin-top: 0.5em;
}

/* Checkbox styling (for "+1" field) */
.nf-form-cont .checkbox-wrap .nf-field-element {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nf-form-cont .checkbox-wrap .nf-field-element input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--wp--preset--color--sage-deep);
    cursor: pointer;
}

.nf-form-cont .checkbox-wrap .nf-field-element label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    color: var(--wp--preset--color--dark);
    cursor: pointer;
    margin: 0;
}

/* ==========================================================================
   Plus One Fields - Hidden by Default (Whitelist Controlled)
   ========================================================================== */

/*
 * Hide the +1 checkbox and guest name fields by default.
 * These are only shown when a whitelisted email is entered.
 * Field IDs: 15 (bringing_plus_one), 16 (guest_name)
 *
 * Ninja Forms renders fields with various ID/class patterns:
 * - #nf-field-{id}-container (older versions)
 * - .field-wrap.checkbox-wrap (by type)
 * - nf-field with id attribute
 */

/* Hide by field ID - multiple selector patterns for compatibility */
#nf-field-15-container,
#nf-field-16-container,
.nf-field-container[id*="field-15"],
.nf-field-container[id*="field-16"],
[class*="field-15-container"],
[class*="field-16-container"],
.field-wrap[data-field-id="15"],
.field-wrap[data-field-id="16"],
.nf-row[data-field-id="15"],
.nf-row[data-field-id="16"],
.nf-cells > .nf-cell:has(#nf-field-15),
.nf-cells > .nf-cell:has(#nf-field-16) {
    display: none;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Also target the actual input wrappers in case structure differs */
.checkbox-wrap:has(#nf-field-15),
.textbox-wrap:has(#nf-field-16),
.checkbox-container:has(#nf-field-15),
.textbox-container:has(#nf-field-16) {
    display: none;
}

/* Show +1 fields when email is whitelisted */
.bs-plus-one-allowed #nf-field-15-container,
.bs-plus-one-allowed #nf-field-16-container,
.bs-plus-one-allowed .nf-field-container[id*="field-15"],
.bs-plus-one-allowed .nf-field-container[id*="field-16"],
.bs-plus-one-allowed [class*="field-15-container"],
.bs-plus-one-allowed [class*="field-16-container"],
.bs-plus-one-allowed .field-wrap[data-field-id="15"],
.bs-plus-one-allowed .field-wrap[data-field-id="16"],
.bs-plus-one-allowed .nf-row[data-field-id="15"],
.bs-plus-one-allowed .nf-row[data-field-id="16"],
.bs-plus-one-allowed .nf-cells > .nf-cell:has(#nf-field-15),
.bs-plus-one-allowed .nf-cells > .nf-cell:has(#nf-field-16),
.bs-plus-one-allowed .checkbox-wrap:has(#nf-field-15),
.bs-plus-one-allowed .textbox-wrap:has(#nf-field-16),
.bs-plus-one-allowed .checkbox-container:has(#nf-field-15),
.bs-plus-one-allowed .textbox-container:has(#nf-field-16) {
    display: flex;
    visibility: visible;
    height: auto;
    overflow: visible;
    margin-bottom: 0.5em;
}

.bs-plus-one-allowed #nf-field-15-container .nf-field-label {
    padding-left: 6%;
}

.bs-plus-one-allowed #nf-field-15-container label#nf-label-field-15 {
    margin-bottom: 0;
    width: max-content;
}

/* Submit button */
.nf-form-cont input[type="submit"].ninja-forms-field,
.nf-form-cont .submit-wrap input[type="submit"] {
    background-color: var(--wp--preset--color--sage-deep);
    color: var(--wp--preset--color--white);
    border: none;
    padding: 0.85em 2.5em;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto;
}

.nf-form-cont input[type="submit"].ninja-forms-field:hover,
.nf-form-cont .submit-wrap input[type="submit"]:hover {
    background-color: var(--wp--preset--color--gold);
}

/* Success message */
.nf-form-cont .nf-response-msg {
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.125rem;
    color: var(--wp--preset--color--sage-deep);
    text-align: center;
    padding: 1.5rem;
}

/* Validation error styling */
.nf-form-cont .nf-error-msg {
    color: #c0392b;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.nf-form-cont .nf-field-element .nf-error input,
.nf-form-cont .nf-field-element .nf-error textarea {
    border-color: #c0392b;
}

/* ==========================================================================
   Password Protected Pages
   ========================================================================== */
.entry-content:has(.post-password-form) {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.post-password-form {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2.5rem;
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--warm-gray);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.post-password-form p {
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    color: var(--wp--preset--color--dark);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.post-password-form p:empty {
    display: none;
}

.post-password-form label {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--dark);
    text-align: left;
    margin-bottom: 0.5rem;
}

.post-password-form input[type="password"] {
    display: block;
    width: 100%;
    border: 1px solid var(--wp--preset--color--warm-gray);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    background-color: var(--wp--preset--color--white);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.post-password-form input[type="password"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--sage-deep);
    box-shadow: 0 0 0 2px rgba(78, 105, 88, 0.15);
}

.post-password-form input[type="submit"] {
    background-color: var(--wp--preset--color--sage-deep);
    color: var(--wp--preset--color--white);
    border: none;
    padding: 0.85em 2.5em;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
    width: 100%;
}

.post-password-form input[type="submit"]:hover {
    background-color: var(--wp--preset--color--gold);
    transform: translateY(-1px);
}

/* ==========================================================================
   Layout — remove default WordPress block gaps on main and footer
   ========================================================================== */

/* Remove top margin on <main> and footer template part */
body > .wp-site-blocks > * + * {
    margin-top: 0 !important;
}

.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > header + *,
.wp-site-blocks > * + footer {
    margin-top: 0 !important;
}

/* Also target the template-part wrappers specifically */
main.wp-block-group {
    margin-top: 0 !important;
}

/* ==========================================================================
   Cursive "and" styling
   ========================================================================== */

.bs-and {
    font-family: var(--wp--preset--font-family--script);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75em;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    vertical-align: baseline;
    display: inline-block;
    transform: translate3d(-0.06em, 0.08em, 0);
}

/* ==========================================================================
   General Spacing & Section Styles
   ========================================================================== */

/* Alternating section backgrounds handled via block editor classes */

/* Smooth separator transitions */
.wp-block-separator {
    opacity: 1;
}

/* Cover block text readability */
.wp-block-cover p,
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Responsive - Tablet (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    /* Columns stack on mobile, side-by-side on tablet+ by default in WP */
}

/* ==========================================================================
   Responsive - Desktop (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .bs-timeline-item {
        padding-left: 3rem !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .bs-header,
    .wp-block-navigation {
        display: none !important;
    }

    .bs-hero {
        min-height: auto !important;
        padding: 2rem !important;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .bs-timeline-item {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }

    .bs-timeline-item:nth-child(1) {
        animation-delay: 0.1s;
    }
    .bs-timeline-item:nth-child(2) {
        animation-delay: 0.2s;
    }
    .bs-timeline-item:nth-child(3) {
        animation-delay: 0.3s;
    }
    .bs-timeline-item:nth-child(4) {
        animation-delay: 0.4s;
    }
    .bs-timeline-item:nth-child(5) {
        animation-delay: 0.5s;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}