/*
Theme Name: exakt Theme Wedding
Theme URI: https://exakt.co.za/themes/exakt-theme-wedding
Author: exakt
Author URI: https://exakt.co.za
Description: An elegant, reusable wedding website theme. Every wedding detail — couple names, date, venue address, WhatsApp, phone and email — is entered once in the Customizer and pulled onto the pages via shortcodes, so the same theme can be reused for any wedding without editing a single page. Integrates with exakt Booking (guest accommodation) and exakt Wasdaar (live guest photo sharing).
Version: 1.0.8
Tested up to: 6.8
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: exakt-theme-wedding
Tags: custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready

exakt Theme Wedding WordPress Theme, (C) 2026 exakt
exakt Theme Wedding is distributed under the terms of the GNU GPL.

All colours, fonts and wedding details are controlled via
Customizer > exakt Wedding Theme. Pages must NEVER hardcode a
date, address, phone number or email — use the [wedding] shortcodes.
*/

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

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--w-font-body, Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--w-font-size-body, 17px);
    line-height: 1.75;
    color: var(--w-text, #4A4038);
    background-color: var(--w-bg, #FBF7F1);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--w-primary, #B5623F);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--w-accent, #A24B32);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif);
    color: var(--w-heading, #33291F);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.2em; }

blockquote {
    margin: 2rem 0;
    padding: 0 0 0 1.5rem;
    border-left: 2px solid var(--w-champagne, #D9C0A9);
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--w-muted, #6E6157);
}

hr {
    border: 0;
    border-top: 1px solid var(--w-border, #E4D8C9);
    margin: 2.5rem 0;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */

.w-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 22px;
}

.w-container--narrow {
    max-width: 780px;
}

.w-site-content {
    min-height: 40vh;
}

.w-page {
    padding: 56px 0 72px;
}

.w-page-header {
    text-align: center;
    margin-bottom: 40px;
}

.w-page-title {
    margin-bottom: 12px;
}

.w-entry-content > *:last-child {
    margin-bottom: 0;
}

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

.skip-link:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    z-index: 100000;
    display: block;
    padding: 14px 22px;
    background: var(--w-bg, #FBF7F1);
    color: var(--w-primary, #B5623F);
    left: 8px;
    top: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   ORNAMENTS — the small typographic details that make it feel bridal
   ══════════════════════════════════════════════════════════════════ */

/* Letter-spaced small-caps eyebrow, as on the invitation */
.w-eyebrow {
    display: block;
    font-family: var(--w-font-body, Lato, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
    margin-bottom: 14px;
}

/* Script accent — the couple's names */
.w-script {
    font-family: var(--w-font-script, "Great Vibes", cursive);
    font-weight: 400;
    line-height: 1.1;
    color: var(--w-heading, #33291F);
}

/* Thin rule with a centred diamond, used between sections */
.w-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px auto;
    max-width: 240px;
    color: var(--w-champagne, #D9C0A9);
}

.w-divider::before,
.w-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
}

.w-divider svg {
    width: 13px;
    height: 13px;
    flex: none;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */

.w-btn,
button,
input[type="submit"],
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    font-family: var(--w-font-body, Lato, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w-btn-text, #FFFFFF);
    background: var(--w-btn-bg, #B5623F);
    border: 1px solid var(--w-btn-bg, #B5623F);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-align: center;
}

.w-btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background: var(--w-btn-bg-hover, #A24B32);
    border-color: var(--w-btn-bg-hover, #A24B32);
    color: var(--w-btn-text, #FFFFFF);
}

.w-btn--outline {
    background: transparent;
    color: var(--w-btn-bg, #B5623F);
}

.w-btn--outline:hover {
    background: var(--w-btn-bg, #B5623F);
    color: var(--w-btn-text, #FFFFFF);
}

.w-btn--light {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.7);
}

.w-btn--light:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--w-heading, #33291F);
}

.w-btn--whatsapp {
    background: var(--w-whatsapp, #25D366);
    border-color: var(--w-whatsapp, #25D366);
    color: #FFFFFF;
}

.w-btn--whatsapp:hover {
    background: #1DA851;
    border-color: #1DA851;
    color: #FFFFFF;
}

.w-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ══════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--w-text, #4A4038);
    background: #FFFFFF;
    border: 1px solid var(--w-border, #E4D8C9);
    border-radius: 2px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--w-primary, #B5623F);
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════ */

.w-header {
    background: var(--w-header-bg, #FBF7F1);
    border-bottom: 1px solid var(--w-border, #E4D8C9);
    position: relative;
    z-index: 50;
}

.w-header--sticky {
    position: sticky;
    top: 0;
}

.w-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 84px;
    padding: 14px 0;
}

.w-brand {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    line-height: 1.1;
}

.w-brand img {
    max-height: 62px;
    width: auto;
}

.w-brand-names {
    font-family: var(--w-font-script, "Great Vibes", cursive);
    font-size: 1.9rem;
    color: var(--w-heading, #33291F);
    white-space: nowrap;
}

.w-brand-date {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
}

.w-nav ul {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-nav a {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--w-nav-link, #4A4038);
    white-space: nowrap;
    padding: 6px 0;
    display: block;
    border-bottom: 1px solid transparent;
}

.w-nav a:hover,
.w-nav .current-menu-item > a {
    color: var(--w-nav-link-hover, #B5623F);
    border-bottom-color: var(--w-nav-link-hover, #B5623F);
}

/* Sub-menus */
.w-nav ul ul {
    display: none;
    position: absolute;
    flex-direction: column;
    gap: 0;
    min-width: 210px;
    padding: 8px 0;
    background: var(--w-header-bg, #FBF7F1);
    border: 1px solid var(--w-border, #E4D8C9);
    z-index: 60;
}

.w-nav li {
    position: relative;
}

.w-nav li:hover > ul,
.w-nav li:focus-within > ul {
    display: flex;
}

.w-nav ul ul a {
    padding: 9px 18px;
    border-bottom: 0;
    letter-spacing: 0.1em;
}

.w-nav-toggle {
    display: none;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--w-border, #E4D8C9);
    color: var(--w-heading, #33291F);
}

.w-nav-toggle svg {
    width: 20px;
    height: 20px;
}

.w-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

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

.w-footer {
    background: var(--w-footer-bg, #33291F);
    color: var(--w-footer-text, #D9C0A9);
    padding: 64px 0 0;
    margin-top: 0;
}

.w-footer a {
    color: var(--w-footer-link, #D9C0A9);
}

.w-footer a:hover {
    color: #FFFFFF;
}

.w-footer h2,
.w-footer h3 {
    color: var(--w-footer-heading, #FBF7F1);
}

.w-footer-top {
    text-align: center;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.w-footer-names {
    font-family: var(--w-font-script, "Great Vibes", cursive);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    color: var(--w-footer-heading, #FBF7F1);
    margin-bottom: 6px;
}

.w-footer-date {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.85;
}

.w-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 44px 0;
}

.w-footer-col {
    flex: 1 1 100%;
    max-width: 340px;
}

.w-footer-col h3 {
    font-family: var(--w-font-body, Lato, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.w-footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-footer-col li {
    margin-bottom: 10px;
}

.w-footer-bottom {
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════════
   WEDDING DETAIL SHORTCODE OUTPUT
   ══════════════════════════════════════════════════════════════════ */

/* Contact / address line: icon + label + value */
.w-detail-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-detail {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

.w-detail-icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--w-champagne, #D9C0A9);
    border-radius: 50%;
    color: var(--w-primary, #B5623F);
}

.w-detail-icon svg {
    width: 17px;
    height: 17px;
}

.w-detail-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
    margin-bottom: 3px;
}

.w-detail-value {
    display: block;
    color: var(--w-text, #4A4038);
    line-height: 1.55;
}

.w-detail-value a {
    color: var(--w-text, #4A4038);
    border-bottom: 1px solid var(--w-champagne, #D9C0A9);
}

.w-detail-value a:hover {
    color: var(--w-primary, #B5623F);
}

.w-address {
    font-style: normal;
    line-height: 1.7;
}

/* Countdown */
.w-countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.w-countdown-item {
    flex: 1 1 84px;
    max-width: 130px;
    padding: 20px 10px;
    text-align: center;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--w-champagne, #D9C0A9);
}

.w-countdown-num {
    display: block;
    font-family: var(--w-font-heading, "Playfair Display", Georgia, serif);
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    line-height: 1;
    color: var(--w-heading, #33291F);
    font-variant-numeric: tabular-nums;
}

.w-countdown-label {
    display: block;
    margin-top: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
}

.w-countdown-done {
    font-family: var(--w-font-script, "Great Vibes", cursive);
    font-size: clamp(2rem, 6vw, 3rem);
    color: var(--w-heading, #33291F);
    text-align: center;
    width: 100%;
}

/* Map embed */
.w-map {
    width: 100%;
    border: 1px solid var(--w-border, #E4D8C9);
    overflow: hidden;
}

.w-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* Colour swatch row (dresscode page) */
.w-swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.w-swatch {
    text-align: center;
    width: 96px;
}

.w-swatch-dot {
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.w-swatch-name {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
}

/* Floating WhatsApp button */
.w-wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--w-whatsapp, #25D366);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease;
}

.w-wa-float:hover {
    transform: translateY(-3px);
    color: #FFFFFF;
}

.w-wa-float svg {
    width: 28px;
    height: 28px;
}

/* ══════════════════════════════════════════════════════════════════
   POSTS (blog / updates — optional)
   ══════════════════════════════════════════════════════════════════ */

.w-post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.w-post-card {
    flex: 1 1 100%;
    max-width: 350px;
    background: #FFFFFF;
    border: 1px solid var(--w-border, #E4D8C9);
}

.w-post-card-body {
    padding: 24px;
}

.w-post-meta {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w-muted, #6E6157);
    margin-bottom: 10px;
}

.w-pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
}

.w-pagination .page-numbers {
    padding: 9px 15px;
    border: 1px solid var(--w-border, #E4D8C9);
    color: var(--w-text, #4A4038);
}

.w-pagination .page-numbers.current,
.w-pagination .page-numbers:hover {
    background: var(--w-primary, #B5623F);
    border-color: var(--w-primary, #B5623F);
    color: #FFFFFF;
}

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

/* A wedding menu in Afrikaans runs long (Padaanwysings, Geskenkelys) and
   sits beside an RSVP button — collapse well before the tablet breakpoint. */
@media (max-width: 1140px) {
    .w-nav-toggle {
        display: inline-flex;
    }

    .w-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--w-header-bg, #FBF7F1);
        border-bottom: 1px solid var(--w-border, #E4D8C9);
        padding: 12px 22px 20px;
    }

    .w-nav.is-open {
        display: block;
    }

    .w-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .w-nav a {
        padding: 12px 0;
        border-bottom: 1px solid var(--w-border, #E4D8C9);
    }

    .w-nav ul ul {
        display: flex;
        position: static;
        border: 0;
        padding: 0 0 0 16px;
        background: transparent;
    }
}

@media (max-width: 900px) {
    .w-brand-names {
        font-size: 1.6rem;
    }

    .w-page {
        padding: 40px 0 56px;
    }

    .w-footer-col {
        max-width: 100%;
    }
}