/**
 * exakt Theme Wedding — component styles
 *
 * style.css holds the base + layout. This file styles the wedding
 * components, the RSVP form, and the exakt Booking / Wasdaar plugin
 * output so the integrations match the site out of the box.
 *
 * @version 1.0.0
 */

/* ══════════════════════════════════════════════════════════════════
   SECTION HELPERS — usable from Elementor or plain content
   ══════════════════════════════════════════════════════════════════ */

.w-section {
    padding: 84px 0;
}

.w-section--tight {
    padding: 56px 0;
}

.w-section--sand {
    background: var(--w-sand, #EFE4D6);
}

.w-section--cream {
    background: var(--w-bg, #FBF7F1);
}

.w-section--dark {
    background: var(--w-heading, #33291F);
    color: rgba(255, 255, 255, 0.82);
}

.w-section--dark h1,
.w-section--dark h2,
.w-section--dark h3 {
    color: #FFFFFF;
}

.w-section--dark .w-eyebrow,
.w-section--dark .w-countdown-label {
    color: var(--w-champagne, #D9C0A9);
}

.w-section--dark .w-countdown-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(217, 192, 169, 0.4);
}

.w-section--dark .w-countdown-num {
    color: #FFFFFF;
}

.w-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}

/* The couple's names are the hero's focal point. [wedding_names] inherits body
   size by default, which renders them tiny — give them a real display size.
   A `size` attribute on the shortcode still overrides this. */
.w-names {
    font-size: clamp(2.6rem, 8vw, 5rem);
    line-height: 1.05;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ON-DARK VARIANT
   A shortcode cannot know what it has been dropped onto. In a page
   builder these components regularly land on a dark hero or band,
   where the default ink colour renders invisible. `light="yes"` adds
   .w-on-dark and flips them.
   ══════════════════════════════════════════════════════════════════ */

.w-on-dark,
.w-on-dark .w-script,
.w-on-dark .w-countdown-num,
.w-on-dark .w-countdown-done,
.w-on-dark .w-detail-value,
.w-on-dark .w-detail-value a {
    color: #FFFFFF;
}

.w-on-dark .w-countdown-item {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(217, 192, 169, 0.42);
}

.w-on-dark .w-countdown-label,
.w-on-dark .w-detail-label {
    color: var(--w-champagne, #D9C0A9);
}

.w-on-dark.w-divider,
.w-on-dark .w-divider {
    color: rgba(255, 255, 255, 0.55);
}

.w-on-dark .w-detail-icon {
    border-color: rgba(217, 192, 169, 0.45);
    color: var(--w-champagne, #D9C0A9);
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */

.w-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82vh;
    padding: 90px 22px;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
}

.w-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(51, 41, 31, 0.45) 0%, rgba(51, 41, 31, 0.68) 100%);
}

.w-hero-inner {
    position: relative;
    max-width: 780px;
}

.w-hero .w-eyebrow {
    color: rgba(255, 255, 255, 0.8);
}

.w-hero-names {
    font-family: var(--w-font-script, "Great Vibes", cursive);
    font-size: clamp(3rem, 11vw, 6.2rem);
    line-height: 1.05;
    color: #FFFFFF;
    margin: 0 0 12px;
}

.w-hero-sub {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.w-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.w-hero .w-divider {
    color: rgba(255, 255, 255, 0.55);
}

/* Stacked invitation date — 19 / 06 / 27 */
.w-date-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif);
    font-size: clamp(2.6rem, 9vw, 4.6rem);
    line-height: 1;
    letter-spacing: 0.04em;
}

.w-date-stacked--row {
    flex-direction: row;
    gap: 22px;
}

/* ══════════════════════════════════════════════════════════════════
   SCHEDULE
   ══════════════════════════════════════════════════════════════════ */

.w-schedule {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-schedule-item {
    flex: 1 1 100%;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--w-champagne, #D9C0A9);
}

.w-schedule-icon {
    color: var(--w-primary, #B5623F);
}

.w-schedule-time {
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--w-heading, #33291F);
    font-variant-numeric: tabular-nums;
}

.w-schedule-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
}

/* ══════════════════════════════════════════════════════════════════
   CARDS / FEATURE GRID
   Mobile-first: width 100% + max-width, inside a wrapping flex row.
   ══════════════════════════════════════════════════════════════════ */

.w-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}

/* 340 (not 360) so three cards clear the 1096px inner container:
   340*3 + 26*2 = 1072. At 360 the third card dropped to a second row. */
.w-card {
    flex: 1 1 100%;
    max-width: 340px;
    padding: 34px 28px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--w-border, #E4D8C9);
}

.w-card--wide {
    max-width: 550px;
}

.w-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border: 1px solid var(--w-champagne, #D9C0A9);
    border-radius: 50%;
    color: var(--w-primary, #B5623F);
}

.w-card-icon svg {
    width: 22px;
    height: 22px;
}

.w-card h3 {
    margin-bottom: 10px;
}

.w-card p:last-child {
    margin-bottom: 0;
}

/* Gallery of the couple's own photos */
.w-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.w-photo-grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════
   NOTICES
   ══════════════════════════════════════════════════════════════════ */

.w-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 26px;
    border: 1px solid var(--w-border, #E4D8C9);
    background: #FFFFFF;
}

.w-notice svg {
    flex: none;
    margin-top: 2px;
}

.w-notice--ok {
    border-color: var(--w-sage, #8A9A78);
    color: #3F5233;
}

.w-notice--error {
    border-color: var(--w-accent, #A24B32);
    color: var(--w-accent, #A24B32);
}

.w-note {
    padding: 20px 24px;
    background: var(--w-sand, #EFE4D6);
    border-left: 3px solid var(--w-primary, #B5623F);
}

.w-note p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════
   RSVP FORM
   ══════════════════════════════════════════════════════════════════ */

.w-rsvp-whatsapp {
    text-align: center;
    margin-bottom: 34px;
}

.w-rsvp-whatsapp-lead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
    margin-bottom: 16px;
}

.w-rsvp-or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 30px 0 0;
    color: var(--w-muted, #6E6157);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.w-rsvp-or::before,
.w-rsvp-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--w-border, #E4D8C9);
}

.w-rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.w-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.w-field-row .w-field {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (min-width: 620px) {
    .w-field-row .w-field {
        flex: 1 1 0;
        min-width: 220px;
    }
}

.w-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--w-text, #4A4038);
    cursor: pointer;
}

.w-check input {
    width: auto;
    margin: 0;
}

.w-rsvp-form button[type="submit"] {
    align-self: flex-start;
}

/* Honeypot — off-screen, never display:none (bots skip hidden fields) */
.w-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   GIFTS
   ══════════════════════════════════════════════════════════════════ */

.w-gifts-bank {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    margin: 26px 0;
    background: #FFFFFF;
    border: 1px solid var(--w-border, #E4D8C9);
    text-align: left;
}

.w-gifts-bank .w-detail-value {
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════
   BLOG BITS
   ══════════════════════════════════════════════════════════════════ */

.w-post-card-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.w-post-card-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.w-post-hero {
    margin-bottom: 32px;
}

.w-empty {
    text-align: center;
    color: var(--w-muted, #6E6157);
}

.w-searchform {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}

.w-sidebar .widget {
    margin-bottom: 32px;
}

.widget-title {
    font-family: var(--w-font-body, Lato, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════
   PLUGIN INTEGRATION — exakt Booking
   The booking cards ship with their own markup; these rules pull them
   into the wedding palette instead of the plugin's defaults.
   ══════════════════════════════════════════════════════════════════ */

.exakt-bk-type-card,
.exakt-bk-property-card,
.exakt-bk-card {
    background: #FFFFFF;
    border: 1px solid var(--w-border, #E4D8C9) !important;
    border-radius: 2px !important;
}

.exakt-bk-type-title,
.exakt-bk-property-title {
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif) !important;
    color: var(--w-heading, #33291F) !important;
}

.exakt-bk-price,
.exakt-bk-type-price {
    color: var(--w-primary, #B5623F) !important;
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif) !important;
}

.exakt-bk-btn,
.exakt-bk-book-btn,
.exakt-booking button[type="submit"] {
    background: var(--w-btn-bg, #B5623F) !important;
    border-color: var(--w-btn-bg, #B5623F) !important;
    color: var(--w-btn-text, #FFFFFF) !important;
    border-radius: 2px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.exakt-bk-btn:hover,
.exakt-bk-book-btn:hover {
    background: var(--w-btn-bg-hover, #A24B32) !important;
    border-color: var(--w-btn-bg-hover, #A24B32) !important;
}

.exakt-bk-amenity,
.exakt-bk-badge {
    background: var(--w-sand, #EFE4D6) !important;
    color: var(--w-muted, #6E6157) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PLUGIN INTEGRATION — exakt Wasdaar (guest photo sharing)
   ══════════════════════════════════════════════════════════════════ */

.wasdaar-fp-gallery {
    gap: 12px;
}

.wasdaar-fp-gallery-item {
    border-radius: 2px !important;
}

.wasdaar-fp-btn {
    border-radius: 2px !important;
    font-family: var(--w-font-body, Lato, sans-serif) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 15px 34px !important;
}

.wasdaar-fp-qr img {
    border-radius: 2px !important;
    border: 1px solid var(--w-border, #E4D8C9);
}

/* ══════════════════════════════════════════════════════════════════
   WOOCOMMERCE — only reached when booking routes through checkout
   ══════════════════════════════════════════════════════════════════ */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--w-btn-bg, #B5623F) !important;
    color: var(--w-btn-text, #FFFFFF) !important;
    border-radius: 2px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 30px !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: var(--w-btn-bg-hover, #A24B32) !important;
}

.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--w-primary, #B5623F) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--w-primary, #B5623F) !important;
}

.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border-color: var(--w-border, #E4D8C9) !important;
    border-radius: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRINT — guests print the directions page
   ══════════════════════════════════════════════════════════════════ */

@media print {
    .w-header,
    .w-footer,
    .w-wa-float,
    .w-nav-toggle {
        display: none !important;
    }

    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 12pt;
    }

    .w-map {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .w-section {
        padding: 56px 0;
    }

    .w-section--tight {
        padding: 40px 0;
    }

    .w-hero {
        min-height: 72vh;
        padding: 70px 20px;
    }

    .w-card,
    .w-schedule-item {
        max-width: 100%;
    }

    .w-photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .w-header-rsvp {
        display: none;
    }
}

@media (max-width: 480px) {
    .w-countdown-item {
        flex: 1 1 68px;
        padding: 14px 6px;
    }

    .w-btn {
        padding: 14px 24px;
        font-size: 0.72rem;
    }
}