/* ========================================
   Ethiopian-American Wedding Website
   Color Palette: Gold, Black, Cream, Green
   ======================================== */

/* CSS Variables */
:root {
    --gold: #D4AF37;
    --gold-light: #E8C860;
    --gold-dark: #B8962E;
    --black: #1A1A1A;
    --black-soft: #2D2D2D;
    --cream: #F5F0E6;
    --cream-dark: #E8E0D0;
    --green: #2E5339;
    --green-light: #3D6B4A;
    --white: #FFFFFF;
    --text-dark: #1A1A1A;
    --text-light: #F5F0E6;
    --text-muted: #6B6B6B;
    --western-brown: #8B4513;
    --western-tan: #D2B48C;
    --western-rust: #A0522D;
    
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    
    --transition: all 0.3s ease;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-gold: 0 10px 40px rgba(212, 175, 55, 0.2);
}

/* Ethiopian Embroidery Pattern - Traditional Netela Diamond/Geometric Pattern */
.ethiopian-embroidery {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Central diamond --%3E%3Crect x='30' y='30' width='20' height='20' transform='rotate(45 40 40)' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Crect x='33' y='33' width='14' height='14' transform='rotate(45 40 40)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='36' y='36' width='8' height='8' transform='rotate(45 40 40)' fill='%23D4AF37' fill-opacity='0.4'/%3E%3C!-- Corner diamonds --%3E%3Crect x='5' y='5' width='12' height='12' transform='rotate(45 11 11)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='63' y='5' width='12' height='12' transform='rotate(45 69 11)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='5' y='63' width='12' height='12' transform='rotate(45 11 69)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='63' y='63' width='12' height='12' transform='rotate(45 69 69)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3C!-- Cross-stitch connecting lines --%3E%3Cpath d='M11 20 L11 26 M8 23 L14 23' stroke='%23D4AF37' stroke-width='1'/%3E%3Cpath d='M69 20 L69 26 M66 23 L72 23' stroke='%23D4AF37' stroke-width='1'/%3E%3Cpath d='M11 54 L11 60 M8 57 L14 57' stroke='%23D4AF37' stroke-width='1'/%3E%3Cpath d='M69 54 L69 60 M66 57 L72 57' stroke='%23D4AF37' stroke-width='1'/%3E%3C!-- Decorative dots --%3E%3Ccircle cx='40' cy='12' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='40' cy='68' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='12' cy='40' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='68' cy='40' r='2' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Western Cowboy/Leather Tooling Pattern */
.western-tooling {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Cowboy hat silhouette --%3E%3Cpath d='M30 55 Q25 50 28 45 L35 40 Q40 35, 50 35 Q60 35, 65 40 L72 45 Q75 50 70 55 L68 55 Q65 48 50 48 Q35 48 32 55 Z' fill='%238B4513' fill-opacity='0.12'/%3E%3Cellipse cx='50' cy='56' rx='22' ry='4' fill='%238B4513' fill-opacity='0.08'/%3E%3C!-- Leather stitching/tooling lines --%3E%3Cpath d='M15 15 Q25 10 35 15 T55 15 T75 15 T95 15' stroke='%238B4513' stroke-width='1' fill='none' stroke-opacity='0.15' stroke-dasharray='3,3'/%3E%3Cpath d='M5 85 Q15 80 25 85 T45 85 T65 85 T85 85' stroke='%238B4513' stroke-width='1' fill='none' stroke-opacity='0.15' stroke-dasharray='3,3'/%3E%3C!-- Decorative flourish corners --%3E%3Cpath d='M10 70 Q5 65 10 60 Q15 55 20 60' stroke='%238B4513' stroke-width='1.5' fill='none' stroke-opacity='0.1'/%3E%3Cpath d='M90 70 Q95 65 90 60 Q85 55 80 60' stroke='%238B4513' stroke-width='1.5' fill='none' stroke-opacity='0.1'/%3E%3C!-- Small accent stars --%3E%3Cpath d='M85 25 L86 28 L89 28 L87 30 L88 33 L85 31 L82 33 L83 30 L81 28 L84 28 Z' fill='%23D4AF37' fill-opacity='0.2'/%3E%3Cpath d='M15 25 L16 28 L19 28 L17 30 L18 33 L15 31 L12 33 L13 30 L11 28 L14 28 Z' fill='%23D4AF37' fill-opacity='0.2'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--cream);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* ========================================
   Navigation
   ======================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
    background: transparent;
}

.nav.scrolled {
    background: rgba(26, 26, 26, 0.95);
    padding: 15px 0;
    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 3px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-menu a {
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: var(--transition);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--gold);
    transition: var(--transition);
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:    linear-gradient(
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.55)
    ), url('../images/jacob_i.jpeg') center 1%/cover;

    /* background: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1920&h=1080&fit=crop') center/cover; */
    opacity: 0.3;
}

.hero-pattern {
    position: absolute;
    opacity: 0.08;
}

.ethiopian-pattern {
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Central diamond --%3E%3Crect x='30' y='30' width='20' height='20' transform='rotate(45 40 40)' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Crect x='33' y='33' width='14' height='14' transform='rotate(45 40 40)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='36' y='36' width='8' height='8' transform='rotate(45 40 40)' fill='%23D4AF37' fill-opacity='0.4'/%3E%3C!-- Corner diamonds --%3E%3Crect x='5' y='5' width='12' height='12' transform='rotate(45 11 11)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='63' y='5' width='12' height='12' transform='rotate(45 69 11)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='5' y='63' width='12' height='12' transform='rotate(45 11 69)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='63' y='63' width='12' height='12' transform='rotate(45 69 69)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3C!-- Cross-stitch connecting lines --%3E%3Cpath d='M11 20 L11 26 M8 23 L14 23' stroke='%23D4AF37' stroke-width='1'/%3E%3Cpath d='M69 20 L69 26 M66 23 L72 23' stroke='%23D4AF37' stroke-width='1'/%3E%3Cpath d='M11 54 L11 60 M8 57 L14 57' stroke='%23D4AF37' stroke-width='1'/%3E%3Cpath d='M69 54 L69 60 M66 57 L72 57' stroke='%23D4AF37' stroke-width='1'/%3E%3C!-- Decorative dots --%3E%3Ccircle cx='40' cy='12' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='40' cy='68' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='12' cy='40' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='68' cy='40' r='2' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    
    
    opacity: 0.5;
}


/* .american-pattern {
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Cowboy hat silhouette --%3E%3Cpath d='M30 55 Q25 50 28 45 L35 40 Q40 35, 50 35 Q60 35, 65 40 L72 45 Q75 50 70 55 L68 55 Q65 48 50 48 Q35 48 32 55 Z' fill='%238B4513' fill-opacity='0.15'/%3E%3Cellipse cx='50' cy='56' rx='22' ry='4' fill='%238B4513' fill-opacity='0.1'/%3E%3C!-- Leather stitching lines --%3E%3Cpath d='M15 15 Q25 10 35 15 T55 15 T75 15 T95 15' stroke='%238B4513' stroke-width='1' fill='none' stroke-opacity='0.18' stroke-dasharray='3,3'/%3E%3Cpath d='M5 85 Q15 80 25 85 T45 85 T65 85 T85 85' stroke='%238B4513' stroke-width='1' fill='none' stroke-opacity='0.18' stroke-dasharray='3,3'/%3E%3C!-- Decorative flourish corners --%3E%3Cpath d='M10 70 Q5 65 10 60 Q15 55 20 60' stroke='%238B4513' stroke-width='1.5' fill='none' stroke-opacity='0.12'/%3E%3Cpath d='M90 70 Q95 65 90 60 Q85 55 80 60' stroke='%238B4513' stroke-width='1.5' fill='none' stroke-opacity='0.12'/%3E%3C!-- Small accent stars --%3E%3Cpath d='M85 25 L86 28 L89 28 L87 30 L88 33 L85 31 L82 33 L83 30 L81 28 L84 28 Z' fill='%23D4AF37' fill-opacity='0.25'/%3E%3Cpath d='M15 25 L16 28 L19 28 L17 30 L18 33 L15 31 L12 33 L13 30 L11 28 L14 28 Z' fill='%23D4AF37' fill-opacity='0.25'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    opacity: 0.5;
} */

.hero-content {
    text-align: center;
    z-index: 10;
    padding: 40px;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 20px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 10vw, 120px);
    font-weight: 400;
    color: var(--white);
    letter-spacing: 8px;
    line-height: 1.1;
    margin-bottom: 30px;
}

.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.ethiopian-cross,
.american-star,
.mesob-icon {
    color: var(--gold);
    font-size: 24px;
    transition: var(--transition);
}

.ethiopian-cross:hover {
    color: var(--green);
    transform: rotate(45deg);
}

.mesob-icon {
    font-size: 20px;
    color: var(--gold-light);
}

.mesob-icon:hover {
    color: var(--green);
}

.american-star:hover {
    color: var(--western-rust);
    transform: scale(1.2);
}

.divider-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero-date {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: var(--cream);
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.hero-location {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 40px;
}

.hero-cta {
    display: inline-block;
    padding: 18px 50px;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: var(--transition);
}

.hero-cta:hover {
    background: var(--gold);
    color: var(--black);
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--gold-light);
    animation: float 2s ease-in-out infinite;
}

.scroll-indicator span {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: rotate(45deg);
    margin: 0 auto;
}

@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ========================================
   Section Headers
   ======================================== */
.section-header {
    text-align: center;
    margin-bottom: 20px;
}

.section-header.light {
    color: var(--cream);
}

.section-header.light .section-tag {
    color: var(--gold-light);
}

.section-header.light .section-title {
    color: var(--cream);
}

.section-tag {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 15px;
    display: block;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    color: var(--black);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.section-divider {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 20px;
}

.section-description {
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted);
}

.section-header.light .section-description {
    color: var(--cream-dark);
}

/* ========================================
   Story Section
   ======================================== */
.story {
    padding: 120px 0;
    background: var(--cream);
    position: relative;
    overflow: hidden;
}

.story::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='30' y='30' width='20' height='20' transform='rotate(45 40 40)' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Crect x='33' y='33' width='14' height='14' transform='rotate(45 40 40)' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3Crect x='36' y='36' width='8' height='8' transform='rotate(45 40 40)' fill='%23D4AF37' fill-opacity='0.3'/%3E%3Crect x='5' y='5' width='12' height='12' transform='rotate(45 11 11)' fill='none' stroke='%23D4AF37' stroke-width='1'/%3E%3Crect x='63' y='5' width='12' height='12' transform='rotate(45 69 11)' fill='none' stroke='%23D4AF37' stroke-width='1'/%3E%3Crect x='5' y='63' width='12' height='12' transform='rotate(45 11 69)' fill='none' stroke='%23D4AF37' stroke-width='1'/%3E%3Crect x='63' y='63' width='12' height='12' transform='rotate(45 69 69)' fill='none' stroke='%23D4AF37' stroke-width='1'/%3E%3Ccircle cx='40' cy='12' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='40' cy='68' r='2' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    opacity: 0.12;
    pointer-events: none;
}

.story::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 55 Q25 50 28 45 L35 40 Q40 35, 50 35 Q60 35, 65 40 L72 45 Q75 50 70 55 L68 55 Q65 48 50 48 Q35 48 32 55 Z' fill='%238B4513' fill-opacity='0.2'/%3E%3Cellipse cx='50' cy='56' rx='22' ry='4' fill='%238B4513' fill-opacity='0.15'/%3E%3Cpath d='M15 15 Q25 10 35 15 T55 15 T75 15 T95 15' stroke='%238B4513' stroke-width='1' fill='none' stroke-opacity='0.2' stroke-dasharray='3,3'/%3E%3Cpath d='M5 85 Q15 80 25 85 T45 85 T65 85 T85 85' stroke='%238B4513' stroke-width='1' fill='none' stroke-opacity='0.2' stroke-dasharray='3,3'/%3E%3Cpath d='M10 70 Q5 65 10 60 Q15 55 20 60' stroke='%238B4513' stroke-width='1.5' fill='none' stroke-opacity='0.15'/%3E%3Cpath d='M90 70 Q95 65 90 60 Q85 55 80 60' stroke='%238B4513' stroke-width='1.5' fill='none' stroke-opacity='0.15'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    opacity: 0.12;
    pointer-events: none;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr; /* single column; slideshow fills width */
    gap: 80px;
    align-items: start; /* align content to top */
}

.image-frame {
    position: relative;
    overflow: hidden;
}

.gold-frame {
    padding: 15px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
}

.gold-frame img {
    width: 100%;
    height: auto; /* let images size naturally */
    object-fit: contain;
    max-height: 520px; /* safety cap for large screens */
    /* aspect-ratio: 4/3; */
} 

/* Story slideshow styles */
.story-slideshow {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    width: 60%;
    max-width: 1000px; /* change to desired max width */
    margin: 0 auto;
    /* Fixed height to keep the slideshow consistent across slides */
    height: 100%;
    max-height:  100%;
    background: var(--black);
} 

.story-slideshow .slides {
    position: relative;
    /* Slides fill the fixed slideshow height */
    height: 100%;
}

.story-slideshow .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-slideshow .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black); /* letterbox background when using contain */
}

.story-slideshow .slide img {
    object-fit: contain; /* fill container, cropping as needed to avoid letterbox */
    object-position: center center; /* keep subject centered */
    width: 60%;
    max-width: 60%;
    height: 50%;
    max-height: 50%;
    display: block;
} 

.story-slideshow .slide.active { opacity: 1; position: relative; }

.story-slideshow .sl-prev,
.story-slideshow .sl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.story-slideshow .sl-prev { left: 12px; }
.story-slideshow .sl-next { right: 12px; }

.story-slideshow .sl-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    max-width: 70%;
}

.story-slideshow .sl-date { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.story-slideshow .sl-desc { font-size: 13px; opacity: 0.95; }

.story-slideshow .sl-dots { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 8px; }
.story-slideshow .sl-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; }
.story-slideshow .sl-dot.active { background: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,0.12) inset; }

@media (max-width: 768px) {
    .story-grid { grid-template-columns: 1fr; }
    .gold-frame img { max-height: 300px; }
    .story-slideshow { height: 300px; max-height: 300px; }
    .story-slideshow .slides { height: 100%; max-height: 100%; }
    .story-slideshow .sl-caption { max-width: 90%; font-size: 13px; }
    .story-content { order: -1; } /* move text above slideshow on small screens */
}

.story-content {
    padding: 20px 0;
}

.story-text {
    font-size: 17px;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.6;

    /* visually clamp to two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-quote {
    position: relative;
    padding: 30px 40px;
    background: var(--white);
    margin: 40px 0;
    border-left: 3px solid var(--gold);
}

.quote-mark {
    font-family: var(--font-display);
    font-size: 60px;
    color: var(--gold);
    position: absolute;
    top: 10px;
    left: 20px;
    line-height: 1;
}

.story-quote p {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    color: var(--black);
    padding-left: 30px;
}

.cultural-icons {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

.culture-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 25px;
    background: var(--white);
    border: 1px solid var(--cream-dark);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.culture-badge.ethiopian::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold), var(--green), var(--gold));
}

.culture-badge.western::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--western-brown), var(--gold), var(--western-rust));
}

.culture-badge:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}

.culture-icon {
    font-size: 24px;
}

.culture-name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--black);
}

/* Cultural Visual Cards */
.cultural-visuals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.cultural-card {
    background: var(--white);
    padding: 40px;
    text-align: center;
    border: 1px solid var(--cream-dark);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.cultural-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-gold);
}

.cultural-card.ethiopian {
    border-top: 4px solid var(--green);
}

.cultural-card.ethiopian::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q10 10, 20 20 T40 20' stroke='%232E5339' stroke-width='2' fill='none' opacity='0.15'/%3E%3Cpath d='M0 30 Q10 20, 20 30 T40 30' stroke='%232E5339' stroke-width='2' fill='none' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    pointer-events: none;
}

.cultural-card.western {
    border-top: 4px solid var(--western-brown);
}

.cultural-card.western::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q15 5, 30 15 T60 15' stroke='%238B4513' stroke-width='2' fill='none' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 60px 30px;
    pointer-events: none;
}

.cultural-card-icon {
    font-size: 60px;
    margin-bottom: 20px;
    display: block;
}

.cultural-card h4 {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--black);
    margin-bottom: 10px;
}

.cultural-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ========================================
   Itinerary Section
   ======================================== */
.itinerary {
    padding: 120px 0;
    background: var(--black);
    position: relative;
    overflow: hidden;
}

.itinerary::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/desing_3.png");
    /* background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Ethiopian cross subtle --%3E%3Cpath d='M60 20 L64 30 L74 30 L66 37 L69 47 L60 41 L51 47 L54 37 L46 30 L56 30 Z' fill='%23D4AF37' fill-opacity='0.04'/%3E%3C!-- Western star subtle --%3E%3Cpath d='M30 80 L32 86 L38 86 L33 90 L35 96 L30 92 L25 96 L27 90 L22 86 L28 86 Z' fill='%23D4AF37' fill-opacity='0.03'/%3E%3Cpath d='M90 80 L92 86 L98 86 L93 90 L95 96 L90 92 L85 96 L87 90 L82 86 L88 86 Z' fill='%23D4AF37' fill-opacity='0.03'/%3E%3C/svg%3E"); */
    /* background-size: 250px 250px; */
  opacity: 0.10; /* pattern translucency */
   /* background-repeat: no-repeat;
  background-position: center; */
    background-size: 400px 400px;

  pointer-events: none;
  z-index: 1;}

.itinerary-days {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    position: relative;
    z-index: 1;
}

.day-card {
    background: var(--black-soft);
    padding: 40px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.day-card:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
}

.day-card:first-child::after {
    content: '☕';
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    opacity: 0.3;
}

.day-card.featured {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--black-soft) 0%, rgba(212, 175, 55, 0.05) 100%);
}

.day-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--western-brown), var(--gold), var(--western-brown));
}

.day-card.featured::after {
    content: '★';
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    opacity: 0.3;
    color: var(--gold);
}

.day-header {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 30px;
}

.day-number {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
}

.day-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--cream);
    margin: 15px 0 10px;
}

.day-date {
    font-size: 14px;
    color: var(--gold-light);
    letter-spacing: 1px;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.event {
    display: flex;
    gap: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 5px;
    transition: var(--transition);
}

.event:hover {
    background: rgba(212, 175, 55, 0.05);
}

.event.highlight {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.event-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    min-width: 80px;
    letter-spacing: 0.5px;
}

.event-details h4 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--cream);
    margin-bottom: 8px;
}

.event-details p {
    font-size: 14px;
    color: rgba(245, 240, 230, 0.7);
    margin-bottom: 10px;
}

.event-location,
.event-dress {
    font-size: 12px;
    color: var(--gold-light);
    display: block;
    margin-top: 5px;
}

/* ========================================
   Location Section
   ======================================== */
.location {
    padding: 120px 0;
    background: var(--cream);
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.venue-card {
    background: var(--white);
    padding: 50px;
    box-shadow: var(--shadow);
}

.venue-name {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--black);
    margin-bottom: 20px;
}

.venue-description {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
}

.venue-details p {
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.7;
}

.venue-details strong {
    color: var(--gold-dark);
    font-weight: 600;
}

.venue-directions {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
    letter-spacing: 1px;
    padding-top: 20px;
    border-top: 1px solid var(--cream-dark);
    width: 100%;
}

.venue-directions:hover {
    color: var(--black);
}

.map-container {
    border: 10px solid var(--white);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.map-container iframe {
    display: block;
}

/* ========================================
   Hotels Section
   ======================================== */
.hotels {
    padding: 120px 0;
    background: var(--green);
    position: relative; /* positioning context for bottom decorations */
}

.hotels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

    /* Decorative image near the "Where to Stay" header (top-left/right) */
    .hotels .section-header {
        position: relative; /* create positioning context */
        overflow: visible;
    }

    .hotels .section-header::before {
        content: '';
        position: absolute;
        top: -100px;
        left: 100px; /* mirrors the right-side image */
        width: 200px;
        height: 200px;
        background: url("../images/sefed_photo_2.png") no-repeat center/cover;
        background-size: cover;
        opacity: 0.5; /* adjust to taste */
        pointer-events: none;
        z-index: 0;
        transform: translate(-12px, -6px); /* subtle offset so it sits a bit outside */
    }

    .hotels .section-header::after {
        content: '';
        position: absolute;
        top: -100px;
        right: 100px; /* nudges toward the corner */
        width: 200px;
        height: 200px;
        background: url("../images/sefed_photo_2.png") no-repeat center/cover;
        background-size: cover;
        opacity: 0.5; /* adjust to taste */
        pointer-events: none;
        z-index: 0;
        transform: translate(12px, -6px); /* subtle offset so it sits a bit outside */
    }

    /* Decorative images at the bottom-left and bottom-right of the section */
    .hotels::before {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 1px;
        width: 160px;
        height: 300px;
        background: url("../images/goldenrod_photo.png") no-repeat center/cover;
        background-size: cover;
        opacity: 0.45;
        pointer-events: none;
        z-index: 0;
        transform: translate(-12px, 6px) rotate(25deg);   transform-origin: center;
    }

    .hotels::after {
        content: '';
        position: absolute;
        bottom: 0px;
        right: 1px;
        width: 160px;
        height: 300px;
        background: url("../images/goldenrod_photo.png") no-repeat center/cover;
        background-size: cover;
        opacity: 0.45;
        pointer-events: none;
        z-index: 0;
        transform: translate(12px, 6px) rotate(-25deg);   transform-origin: center;
    }

    /* keep header content above the decorative images */
    .hotels .section-header > * {
        position: relative;
        z-index: 1;
    }

    /* hide or scale back on smaller screens */
    @media (max-width: 768px) {
        .hotels .section-header::after,
        .hotels .section-header::before,
        .hotels::before,
        .hotels::after {
            display: none;
        }
    }

    /* hide or scale back on smaller screens */
    @media (max-width: 768px) {
        .hotels .section-header::after,
        .hotels .section-header::before {
            display: none;
        }
    }


.hotel-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.hotel-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.hotel-card:hover .hotel-image img {
    transform: scale(1.1);
}

.hotel-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gold);
    color: var(--black);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
}

.hotel-info {
    padding: 25px;
}

.hotel-info h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--black);
    margin-bottom: 8px;
}

.hotel-rating {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hotel-distance {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.hotel-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 5px;
}

.hotel-code {
    font-size: 11px;
    color: var(--gold-dark);
    font-weight: 500;
    margin-bottom: 15px;
}

.hotel-book {
    display: inline-block;
    padding: 12px 25px;
    background: var(--black);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: var(--transition);
}

.hotel-book:hover {
    background: var(--gold);
    color: var(--black);
}

/* Coming soon state for hotel cards */
.hotel-card.coming-soon > * {
    filter: blur(4px) grayscale(30%);
    transform: scale(0.995);
    pointer-events: none; /* disable interactions */
    user-select: none;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.hotel-card.coming-soon::after {
    content: "To be announced soon";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
    pointer-events: none;
}

/* explicitly hide book button when coming soon */
.hotel-card.coming-soon .hotel-book {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}

/* Generic coming-soon utility for sections */
.coming-soon {
    position: relative;
}
.coming-soon > * {
    filter: blur(4px) grayscale(30%);
    pointer-events: none;
    user-select: none;
    transition: filter 0.25s ease, transform 0.25s ease;
}
.coming-soon::after {
    content: "To be announced soon";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
    pointer-events: none;
}

/* ========================================
   RSVP Section
   ======================================== */
.rsvp {
    padding: 120px 0;
    background: var(--cream);
    justify-content: center;
        align-items:center;

}

.rsvp-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
        justify-content: center;

    justify-items: center; /* center the middle form column */
} 

.rsvp-lookup,
.rsvp-form-container {
    background: var(--white);
    padding: 50px;
    box-shadow: var(--shadow);
}

.rsvp-form-container {
    max-width: 700px;
    width: 100%;
}

.rsvp-lookup h3,
.rsvp-form-container h3 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--black);
    margin-bottom: 10px;
}

.rsvp-lookup p,
.rsvp-form-container p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.search-box {
    display: flex;
    gap: 10px;
}

.search-box input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid var(--cream-dark);
    font-family: var(--font-body);
    font-size: 14px;
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--gold);
}

.search-btn {
    padding: 15px 30px;
    background: var(--gold);
    color: var(--black);
    border: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.search-btn:hover {
    background: var(--gold-dark);
}

.search-results {
    margin-top: 20px;
}

.guest-result {
    padding: 20px;
    background: var(--cream);
    margin-bottom: 10px;
    border-left: 3px solid var(--gold);
    animation: fadeIn 0.3s ease;
}

.guest-result h4 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--black);
    margin-bottom: 5px;
}

.guest-result p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.guest-result button {
    padding: 10px 25px;
    background: var(--green);
    color: var(--white);
    border: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.guest-result button:hover {
    background: var(--green-light);
}

.no-results {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.rsvp-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}

.rsvp-divider span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-muted);
    background: var(--cream);
    padding: 15px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 15px 20px;
    border: 1px solid var(--cream-dark);
    font-family: var(--font-body);
    font-size: 14px;
    transition: var(--transition);
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.submit-btn {
    padding: 18px 40px;
    background: var(--gold);
    color: var(--black);
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 10px;
}

.submit-btn:hover {
    background: var(--gold-dark);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   Registry Section
   ======================================== */
.registry {
    padding: 120px 0;
    background: var(--black);
}

.registry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.registry-card {
    background: var(--black-soft);
    padding: 40px 30px;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: var(--transition);
}

.registry-card:hover {
    border-color: var(--gold);
    transform: translateY(-5px);
}

.registry-card.honeymoon {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-light) 100%);
    border-color: var(--green);
}

.registry-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.registry-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--cream);
    margin-bottom: 10px;
}

.registry-card p {
    font-size: 13px;
    color: rgba(245, 240, 230, 0.7);
    margin-bottom: 20px;
}

.registry-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1px;
}

.ethiopian-tradition {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 50px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.ethiopian-tradition::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L45 15 L37 22 L40 32 L30 26 L20 32 L23 22 L15 15 L25 15 Z' fill='%23D4AF37' fill-opacity='0.06'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
}

.tradition-icon {
    font-size: 50px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ethiopian-tradition h3 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--gold);
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.ethiopian-tradition p {
    font-size: 15px;
    color: var(--cream);
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

/* ========================================
   Footer
   ======================================== */
.footer {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--black) 0%, #0A0A0A 100%);
    position: relative;
    overflow: hidden;
}

.ethiopian-footer-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Ethiopian cross --%3E%3Cpath d='M25 25 L27 30 L32 30 L28 33 L30 38 L25 35 L20 38 L22 33 L18 30 L23 30 Z' fill='%23D4AF37' fill-opacity='0.05'/%3E%3C!-- Western star --%3E%3Cpath d='M75 25 L77 30 L82 30 L78 33 L80 38 L75 35 L70 38 L72 33 L68 30 L73 30 Z' fill='%23D4AF37' fill-opacity='0.05'/%3E%3C!-- Mesob weave --%3E%3Cpath d='M10 70 Q30 60, 50 70 T90 70' stroke='%23D4AF37' stroke-width='1' fill='none' opacity='0.04'/%3E%3Cpath d='M10 80 Q30 70, 50 80 T90 80' stroke='%23D4AF37' stroke-width='1' fill='none' opacity='0.03'/%3E%3C!-- Horseshoe --%3E%3Cpath d='M40 50 Q35 35, 50 30 Q65 35, 60 50' fill='none' stroke='%238B4513' stroke-width='1.5' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

.american-footer-pattern {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 50px,
        rgba(212, 175, 55, 0.02) 50px,
        rgba(212, 175, 55, 0.02) 51px
    );
}

.footer-content {
    position: relative;
    text-align: center;
}

.footer-names {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--gold);
    letter-spacing: 5px;
    margin-bottom: 10px;
}

.footer-date {
    font-size: 16px;
    color: var(--cream);
    letter-spacing: 3px;
    margin-bottom: 30px;
}

.footer-message p {
    font-family: var(--font-display);
    font-size: 24px;
    font-style: italic;
    color: var(--gold-light);
    margin-bottom: 30px;
}

.footer-credit {
    margin-top: 8px;
}

.footer-credit p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--cream);
    opacity: 0.95;
    letter-spacing: 0.4px;
    margin: 0;
}

.footer-credit p strong {
    color: var(--gold);
    font-weight: 600;
}

.footer-credit a.footer-credit-link {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

.footer-credit a.footer-credit-link:hover {
    text-decoration: underline;
}

.footer-credit .copyright {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    margin-top: 6px;
    opacity: 0.95;
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.social-link {
    font-size: 13px;
    color: var(--cream);
    letter-spacing: 1px;
}

.social-link:hover {
    color: var(--gold);
}

.social-divider {
    color: var(--gold);
}

.footer-hashtag {
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 2px;
}

.footer-cultural-icons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-icon {
    font-size: 28px;
    opacity: 0.6;
    transition: var(--transition);
}

.footer-icon:hover {
    opacity: 1;
    transform: scale(1.2);
}

.footer-western-message {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--cream);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
    opacity: 0.7;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
    .hotels-grid,
    .registry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .itinerary-days {
        grid-template-columns: 1fr;
    }
    
    .location-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(26, 26, 26, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transform: translateX(100%);
        transition: var(--transition);
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    .nav-menu a {
        font-size: 18px;
    }
    
    .nav-toggle {
        display: flex;
        z-index: 1001;
    }
    
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .gold-frame img {
        height: 400px;
    }
    
    .rsvp-container {
        grid-template-columns: 1fr;
    }
    
    .rsvp-divider {
        padding: 30px 0;
    }
    
    .hotels-grid,
    .registry-grid {
        grid-template-columns: 1fr;
    }
    
    .cultural-icons {
        flex-direction: column;
    }
    
    .cultural-visuals {
        grid-template-columns: 1fr;
    }
    
    .hero-pattern {
        display: none;
    }
    
    .story::before,
    .story::after {
        width: 100px;
        opacity: 0.5;
    }
    
    section {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .hero-title {
        letter-spacing: 3px;
    }
    
    .hero-cta {
        padding: 15px 35px;
    }
    
    .day-card,
    .venue-card,
    .rsvp-lookup,
    .rsvp-form-container {
        padding: 30px 20px;
    }
    
    .event {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-box {
        flex-direction: column;
    }
}

.registry {
  position: relative;
}
.registry::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
              url("../images/fireworks.png") center/cover no-repeat;
  opacity: 0.25; /* adjust darkness */
  pointer-events: none;
  z-index: 0;
}
.registry > * { position: relative; z-index: 1; }

/* Decorative fireworks next to the Registry header (left and right) */
.registry .section-header {
  position: relative; /* positioning context */
  overflow: visible;
}

.registry .section-header::before {
  content: '';
  position: absolute;
  top: -110px;
  left: -350px;
  width: 800px;
  height: 800px;
  background: url("../images/fireworks.png") no-repeat center/cover;
  background-size: cover;
  opacity: 0.25; /* visible but subtle */
  pointer-events: none;
  z-index: 0;
  transform: translate(-10px, -6px) rotate(-20deg);
}

.registry .section-header::after {
  content: '';
  position: absolute;
   top: -110px;
  left: 700px;
  width: 800px;
  height: 800px;
  background: url("../images/fireworks.png") no-repeat center/cover;
  background-size: cover;
  opacity: 0.25; /* visible but subtle */
  pointer-events: none;
  z-index: 0;
  transform: translate(10px, -6px) rotate(20deg);
}

/* keep header content above the fireworks */
.registry .section-header > * {
  position: relative;
  z-index: 1;
}

/* hide on smaller screens to avoid overlap */
@media (max-width: 768px) {
  .registry .section-header::before,
  .registry .section-header::after {
    display: none;
  }
}