/* Cynthia Pickens Catering — static site styles
   Recreated to match the original WordPress design: dark sidebar nav,
   sage-green content area, plum page-title bar, olive hairline dividers. */

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

:root {
    --bg-sage: #d7e6cd;
    --sidebar-dark: #2a2a2a;
    --sidebar-text: #f5f5f0;
    --sidebar-muted: #a08cb0;
    --title-bar: #5c4a72;
    --title-text: #ffffff;
    --divider-gold: #83832f;
    --footer-text: #6e6e2a;
    --body-text: #1f1f1f;
    --link-color: #8a3b2b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: var(--body-text);
    background: var(--bg-sage);
    line-height: 1.65;
}

a { color: var(--link-color); text-decoration: underline; }
a:hover { text-decoration: none; }

/* Centers the whole site at the header banner's natural width, like the
   original theme. The 940px here is a fallback used before the banner
   image loads (or if it's missing); a small inline script at the bottom
   of each page replaces it with the image's real natural width once it
   loads. */
.page-wrap {
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg-sage);
}

/* ---------- Top photo banner ---------- */
.banner {
    background: #111;
    line-height: 0;
}

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

/* ---------- Layout: sidebar + content ---------- */
.layout {
    display: flex;
    align-items: flex-start;
    border-top: 3px solid var(--divider-gold);
}

.sidebar {
    flex: 0 0 250px;
    background: var(--sidebar-dark);
    padding: 28px 20px 32px;
    text-align: center;
    min-height: 100%;
}

.site-nav ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.site-nav li a {
    display: block;
    padding: 9px 0;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 1rem;
}

.site-nav li a:hover,
.site-nav li.active a {
    color: var(--sidebar-muted);
    text-decoration: underline;
}

.sidebar-contact {
    color: var(--sidebar-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.fb-link {
    display: inline-block;
}

.fb-link img {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 6px;
}

/* ---------- Main content ---------- */
.content {
    flex: 1 1 auto;
    min-width: 0;
}

.title-bar {
    background: var(--title-bar);
}

.title-bar h2 {
    margin: 0;
    padding: 14px 24px;
    color: var(--title-text);
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}

.content-inner {
    padding: 24px 28px 40px;
}

.content-inner h3 {
    margin-top: 24px;
}

.content-with-image {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 20px;
}

.content-with-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.content-with-image p,
.content-with-image ul {
    flex: 1;
    min-width: 240px;
    margin-top: 0;
}

.hero-photos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

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

.standalone-photo {
    margin: 16px 0;
}

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

/* Photo gallery grids */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s ease;
}

.gallery-item:hover img {
    opacity: 0.85;
}

.gallery-index {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-index li a {
    display: inline-block;
    padding: 4px 0;
}

/* Recipe & links lists */
.recipe-list, .links-list {
    padding-left: 20px;
}

.recipe-list li, .links-list li {
    margin-bottom: 6px;
}

/* ---------- Lightbox (photo galleries) ---------- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 60px 80px;
}

.lightbox-overlay.open {
    display: flex;
}

body.lightbox-locked {
    overflow: hidden;
}

.lightbox-stage {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 82vh;
    display: block;
    margin: 0 auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.lightbox-count {
    color: #ececec;
    margin: 12px 0 0;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 10px 16px;
    border-radius: 4px;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox-close {
    top: 18px;
    right: 18px;
    font-size: 1.8rem;
    padding: 4px 12px;
}

.lightbox-prev {
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 700px) {
    .lightbox-overlay { padding: 50px 16px; }
    .lightbox-prev, .lightbox-next { padding: 8px 12px; font-size: 1.2rem; }
    .lightbox-close { top: 10px; right: 10px; }
}

/* ---------- Contact form ---------- */
.contact-form {
    max-width: 460px;
    margin-top: 16px;
}

.form-row {
    margin-bottom: 16px;
}

.form-row label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.form-row input,
.form-row textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #9fae95;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--title-bar);
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
}

.contact-form button {
    background: var(--title-bar);
    color: #fff;
    border: none;
    padding: 11px 26px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
}

.contact-form button:hover {
    background: #4a3b5c;
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 3px solid var(--divider-gold);
    background: var(--bg-sage);
    color: var(--footer-text);
    padding: 14px 0;
    text-align: center;
    font-size: 0.85rem;
}

.site-footer p { margin: 0; }

/* ---------- Simple utility pages (PHP error states) ---------- */
.simple-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px;
}

.simple-page .title-bar {
    margin-bottom: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    .layout {
        flex-direction: column;
    }
    .sidebar {
        flex: 1 1 auto;
        width: 100%;
        padding: 20px;
    }
    .site-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 18px;
        margin-bottom: 18px;
    }
    .site-nav li a { padding: 6px 0; }
    .content-inner { padding: 20px 18px 32px; }
}

@media (max-width: 620px) {
    .content-with-image { flex-direction: column; }
}