/* C:\Users\abush\OneDrive\Documents\W26\static\css\style.css */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Montserrat:wght@400;600;700&display=swap');

/* Theme palette (Thailand wedding) */
:root {
    --pink: #ff00cc;
    --pink50: #ff00cc8e;
    --coral: #f70;
    --coral50: #ff77008e;
    --yellow: #ffec17;
    --yellow50: #ffec178e;
    --blue: #29a7ff;
    --blue50: #29a7ff8e;
    --teal: #00ffee;
    --teal50: #00ffee8e;
    --green: #00d100;
    --green50: #00d1008e;
    
    --sand: #f6e8d5;
    --ink: #005252;
    --white: #ffffff;
    --magenta: #ff00cc; /* alias for neon/pink usage */
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

/* Global body styling */
body {
    font-family: "gala", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    /* Global background image */
    background: var(--sand) url('../core/img/background.jpg') center / cover no-repeat fixed;
    line-height: 1.6;
}

/* Ensure section title areas sit on sand background (masking global image) */
.section-title { background: transparent !important; }
.section-title h2, .section-title h3, .section-title h4 {
    display:inline-block;
    background-color: var(--sand);
    padding:0 .75rem;
    border-radius:8px;
}

/* Typography */
h1, h2, h3 {
    font-family: "alana-smooth", cursive;
    color: var(--pink);
}

h4,
h5,
h6 {
    font-family: "Dancing Script", cursive;
    color: var(--pink);
    font-weight: 300;
    line-height: 1.1;
}

h1 { font-size: 5rem; }
h2 { font-size: 3.5rem; }
h3 { font-size: 2.5rem; }
/* Note: h4 and h5 are overridden in style2.css for homepage-specific cards */

/* Alt heading variant */
.alt-heading { color: var(--coral) !important; }

p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Navbar styling */
.navbar {
    background-color: var(--sand) !important;
    width:100%;
    margin-right: auto;
    margin-left: auto;
}
/* Slightly tighter navbar on desktop to reduce overall height */
@media (min-width: 992px) { /* Bootstrap lg breakpoint */
    .navbar { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .navbar-brand { width: 100px; height: 100px; }
}

.navbar h2 {
    text-align: center;;
}

/* New 3-column flex layout for navbar */
.nav-layout { display:flex; align-items:center; width:100%; }
/* Three-column proportions: Left 25%, Center 50%, Right 25% */
.nav-third { display:flex; align-items:center; min-height:100%; }
.nav-third.left, .nav-third.right { flex:0 0 25%; max-width:25%; }
.nav-third.center { flex:0 0 50%; max-width:50%; justify-content:center; }
.nav-third.left { justify-content:flex-start; }
.nav-third.right { justify-content:flex-end; gap:1rem; }
.nav-third.center h2 { width:100%; text-align:center; }
.nav-third.right .rsvp-img img { height:60px; width:auto; }

@media (max-width: 767.98px) {
    .nav-third.right .rsvp-img img { height:50px; }
    .admin-links { display:none !important; }
}

.navbar-brand {
    background-image: url('../core/img/logo.png');
    background-size: cover;
    width: 120px;
    height: 120px;
    /* Override text-based styles */
    color: transparent !important;
}

.navbar-nav .nav-link {
    color: var(--ink) !important;
    font-weight: 600;
    transition: color 0.3s ease;
}

.navbar-brand:hover, .navbar-nav .nav-link:hover {
    color: var(--pink) !important;
}

.rsvp-img img {
    width: 40px;
    height: 40px;
}


.card {
    border: none; /* Remove default Bootstrap card border */
    border-radius: 25px; /* Softer rounded corners */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* More prominent shadow */
}

.card-title {
    color: #7a52a3; /* Use the brand color for titles */
    font-weight: 700;
}

/* Buttons */
.btn-primary {
    background-color: rgb(187, 69, 167);
    border-color: rgb(187, 69, 167);
}
.btn-primary:hover {
    background-color: rgb(187, 69, 167); /* Darker plum on hover */
    border-color: rgb(187, 69, 167);
}

.btn-success {
    background-color: #5cb85c; /* Default green, you can change this */
    border-color: #5cb85c;
}
.btn-success:hover {
    background-color: #4cae4c;
    border-color: #4cae4c;
}

/* Form specific styles */
.form-group label {
    font-weight: 500;
    margin-bottom: .5rem;
}

.form-control {
    border-radius: 8px; /* Slightly rounded input fields */
}

/* Specific to RSVP form dynamic guest fields */
.guest-form-row {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.guest-form-row h5 {
    color: rgb(187, 69, 167);
    margin-bottom: 15px;
}

/* --- Custom Button Styles --- */

.btn-wedding-primary {
    background-color: #ee6b0e; 
    color: #fff; /* White text */
    border: 1px solid #ee6b0e;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    padding: 0.75rem 1.25rem; /* Make buttons a bit larger */
    border-radius: 0.3rem; /* Slightly rounded corners */
    font-weight: bold;
}

.btn-wedding-primary:hover {
    background-color: #1db1ce; 
    border-color: #1db1ce;
    color: #fff;
}

.btn-wedding-secondary {
    background-color: #f1b722; /* Example: Tan */
    color: #333; /* Dark text */
    border: 1px solid #D2B48C;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    padding: 0.75rem 1.25rem;
    border-radius: 0.3rem;
    font-weight: bold;
}

.btn-wedding-secondary:hover {
    background-color: #E0BF9A; 
    border-color: #E0BF9A;
    color: #333;
}

/* General Bootstrap override for focus outline if desired */
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus,
.btn:active.focus, .btn.active.focus {
    box-shadow: 0 0 0 0.25rem rgba(139, 69, 19, 0.25); 
}

/* Ensures all images within the card have a consistent height and aspect ratio */
.article-card .card-img-top {
    height: 25%; /* Or your preferred height */
    object-fit: cover;
    width: 100%;
}

/* Optional: Improves readability of the text snippet */
.article-card .card-body p {
    /* This will allow text to display up to 3 lines before truncating */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gallery-specific styles */
.gallery-img {
    width: 100%;
    height: 300px; /* Adjust this height as needed for your desired aspect ratio */
    object-fit: cover; /* This is key for uniform image sizes */
}


/* Remove top/bottom padding from navbar container on mobile */
@media (max-width: 576px) {
    .navbar, .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Responsive navbar consistency (shared across all pages) */
@media (max-width: 767.98px) {
    .navbar-brand { width: 50px; height: 50px; }
    /* Make navbar heading more prominent on mobile */
    .navbar h2 { font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.1; }
    .nav-link.rsvp-img img { height: 50px; width: auto; }
    .navbar .nav-link img[alt='RSVP'] { height: 50px; width: auto; }
}