/**
 * V&T Event Design — Component Styles
 * Royal Emerald Design System
 * 
 * Satisfies: AC-01, AC-02, AC-03, AC-04, AC-05, AC-06, AC-07
 */

/* =========================================
   Buttons
   ========================================= */

/* AC-01: Primary buttons use antique champagne gold background with dark text */
.vt-btn-primary {
    display: inline-block;
    background-color: #c9a96e;
    color: #1a3a2a;
    font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    border: 2px solid #c9a96e;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.2;
}

/* AC-06: Hover state for primary button */
.vt-btn-primary:hover {
    background-color: #b8955d;
    border-color: #b8955d;
    color: #0f241a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.3);
}

.vt-btn-primary:active,
.vt-btn-secondary:active {
    transform: translateY(1px) scale(0.98);
}

/* AC-07: Focus indicator for primary button */
.vt-btn-primary:focus-visible {
    outline: 3px solid #f5f0e8;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(245, 240, 232, 0.4);
}

/* AC-02: Secondary buttons use outlined/emerald styling */
.vt-btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: #f5f0e8;
    font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    border: 2px solid #1a3a2a;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.2;
}

/* AC-06: Hover state for secondary button */
.vt-btn-secondary:hover {
    background-color: #1a3a2a;
    color: #f5f0e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 58, 42, 0.2);
}

/* AC-07: Focus indicator for secondary button */
.vt-btn-secondary:focus-visible {
    outline: 3px solid #c9a96e;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(201, 169, 110, 0.4);
}

/* AC-03: Secondary button variant for light backgrounds */
.vt-btn-secondary--light { color: #1a3a2a; border-color: #1a3a2a; }
.vt-btn-secondary--light:hover { background-color: #1a3a2a; color: #f5f0e8; }

.wp-block-button__link {
    overflow-wrap: anywhere;
}

/* =========================================
   Cards
   ========================================= */

/* AC-04: Card component with subtle borders/shadows, cream background, refined padding */
.vt-card {
    background-color: #faf8f3;
    border: 1px solid rgba(201, 169, 110, 0.2);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(26, 58, 42, 0.05);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* AC-06: Hover state for cards */
.vt-card:hover {
    box-shadow: 0 8px 24px rgba(26, 58, 42, 0.1);
    transform: translateY(-4px);
    border-color: rgba(201, 169, 110, 0.4);
}

/* =========================================
   Dividers
   ========================================= */

/* AC-05: Divider with thin gold/emerald line and generous spacing */
.vt-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a96e, transparent);
    margin: 3rem auto;
    width: 60%;
    max-width: 400px;
}

/* Alternative emerald divider variant */
.vt-divider--emerald {
    background: linear-gradient(90deg, transparent, #1a3a2a, transparent);
}

/* Short divider variant */
.vt-divider--short {
    width: 30%;
    max-width: 200px;
}

/* =========================================
   Theme Language Sync
   ========================================= */
body.page-template-default:not(.home) {
    background: linear-gradient(180deg, #fbf8f2 0%, #f6f0e6 100%);
    color: #1a3a2a;
}

body.page-template-default:not(.home) main.wp-block-group {
    --vt-theme-gold: #c9a96e;
    --vt-theme-emerald: #1a3a2a;
    --vt-theme-card: rgba(255, 255, 255, 0.52);
    --vt-theme-shadow: 0 18px 40px rgba(15, 36, 26, 0.08);
}

body.page-template-default:not(.home) .entry-content h1,
body.page-template-default:not(.home) .entry-content h2,
body.page-template-default:not(.home) .entry-content h3,
body.page-template-default:not(.home) .entry-content .hostinger-ai-title {
    font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', serif);
    color: var(--vt-theme-emerald);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

body.page-template-default:not(.home) .entry-content h1 {
    font-size: clamp(2.8rem, 5vw, 4.75rem);
}

body.page-template-default:not(.home) .entry-content h2,
body.page-template-default:not(.home) .entry-content .hostinger-ai-title {
    font-size: clamp(2.35rem, 4.5vw, 4rem);
}

body.page-template-default:not(.home) .entry-content h3 {
    font-size: clamp(1.85rem, 3vw, 2.8rem);
}

body.page-template-default:not(.home) .entry-content p,
body.page-template-default:not(.home) .entry-content li,
body.page-template-default:not(.home) .entry-content label,
body.page-template-default:not(.home) .entry-content input,
body.page-template-default:not(.home) .entry-content textarea,
body.page-template-default:not(.home) .entry-content select {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    line-height: 1.7;
}

body.page-template-default:not(.home) .entry-content > p:not(:empty),
body.page-template-default:not(.home) .entry-content > ul,
body.page-template-default:not(.home) .entry-content > ol,
body.page-template-default:not(.home) .entry-content .hostinger-ai-description {
    max-width: 62ch;
    margin-inline: auto;
}

body.page-template-default:not(.home) .entry-content .wp-block-separator {
    border: none;
    height: 1px;
    width: min(72px, 100%);
    max-width: 72px;
    background: linear-gradient(90deg, transparent, var(--vt-theme-gold), transparent);
    opacity: 0.92;
}

body.page-template-default:not(.home) .entry-content .wp-block-separator.is-style-wide {
    width: min(88px, 100%);
    max-width: 88px;
}

body.page-template-default:not(.home) .entry-content .wp-block-button__link,
body.page-template-default:not(.home) .entry-content .ff-btn.ff-btn-submit {
    background-color: var(--vt-theme-gold);
    color: var(--vt-theme-emerald);
    border: 1px solid rgba(15, 36, 26, 0.12);
    box-shadow: 0 10px 24px rgba(15, 36, 26, 0.12);
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.page-template-default:not(.home) .entry-content .wp-block-button__link:hover,
body.page-template-default:not(.home) .entry-content .wp-block-button__link:focus-visible,
body.page-template-default:not(.home) .entry-content .ff-btn.ff-btn-submit:hover,
body.page-template-default:not(.home) .entry-content .ff-btn.ff-btn-submit:focus-visible {
    background-color: #f5f0e8;
    color: var(--vt-theme-emerald);
    border-color: rgba(201, 169, 110, 0.85);
}

body.page-template-default:not(.home) .entry-content > .wp-block-group.alignwide,
body.page-template-default:not(.home) .entry-content > .wp-block-group.alignfull > .alignwide,
body.page-template-default:not(.home) .entry-content > .wp-block-columns.alignwide {
    padding-inline: clamp(1.35rem, 3vw, 2.25rem);
}

body.page-template-default:not(.home) .entry-content img,
body.page-template-default:not(.home) .entry-content video,
body.page-template-default:not(.home) .entry-content iframe {
    border-radius: 18px;
}

body.page-template-default:not(.home) .entry-content .wpsr-feed-wrap,
body.page-template-default:not(.home) .entry-content .wpsr_content {
    width: min(calc(100% - 3rem), 1120px);
    max-width: 1120px;
    margin-inline: auto;
}

body.page-template-default:not(.home) .entry-content .wpsr_content {
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--vt-theme-card);
    border: 1px solid rgba(26, 58, 42, 0.08);
    border-radius: 24px;
    box-shadow: var(--vt-theme-shadow);
}

body.page-template-default:not(.home) .entry-content .wpsr_more,
body.page-template-default:not(.home) .entry-content .wpsr-load-more-default {
    background: var(--vt-theme-gold) !important;
    color: var(--vt-theme-emerald) !important;
    border: 1px solid rgba(15, 36, 26, 0.12) !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 24px rgba(15, 36, 26, 0.12) !important;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.95rem 2.2rem !important;
}

body.page-template-default:not(.home) .entry-content .wpsr_more:hover,
body.page-template-default:not(.home) .entry-content .wpsr_more:focus-visible,
body.page-template-default:not(.home) .entry-content .wpsr-load-more-default:hover,
body.page-template-default:not(.home) .entry-content .wpsr-load-more-default:focus-visible {
    background: #f5f0e8 !important;
    color: var(--vt-theme-emerald) !important;
    border-color: rgba(201, 169, 110, 0.85) !important;
}

/* =========================================
   Inner Page Consistency System
   ========================================= */
body.page-template-default main.wp-block-group {
    --vt-page-max: 1120px;
    --vt-page-narrow: 960px;
    --vt-page-pad: clamp(1.5rem, 4vw, 2.5rem);
    --vt-page-gap: clamp(2.5rem, 5vw, 4.5rem);
    padding-top: clamp(3rem, 5vw, 4.75rem);
    padding-bottom: clamp(4rem, 6vw, 6rem);
}

body.page-template-default main.wp-block-group > .entry-content {
    display: grid;
    gap: var(--vt-page-gap);
}

body.page-template-default main.wp-block-group > .entry-content > .wp-block-spacer:first-child {
    height: clamp(1rem, 3vw, 2.25rem) !important;
}

body.page-template-default main.wp-block-group > .entry-content > * {
    box-sizing: border-box;
    margin-block: 0;
}

body.page-template-default main.wp-block-group > .entry-content > :not(.alignfull):not(.alignwide) {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), var(--vt-page-narrow));
    max-width: var(--vt-page-narrow);
    margin-inline: auto;
}

body.page-template-default main.wp-block-group > .entry-content > .alignwide,
body.page-template-default main.wp-block-group > .entry-content > .wp-block-group.alignwide,
body.page-template-default main.wp-block-group > .entry-content > .wp-block-columns.alignwide {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), var(--vt-page-max));
    max-width: var(--vt-page-max);
    margin-inline: auto;
}

body.page-template-default main.wp-block-group > .entry-content > .alignfull {
    width: 100%;
}

body.page-template-default main.wp-block-group > .entry-content > .alignfull > .alignwide,
body.page-template-default main.wp-block-group > .entry-content > .alignfull .alignwide {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), var(--vt-page-max));
    max-width: var(--vt-page-max);
    margin-inline: auto;
}

body.page-template-default .entry-content h2 {
    color: var(--wp--preset--color--emerald, #1a3a2a);
    font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', serif);
    font-size: clamp(2.35rem, 4.5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

body.page-template-default .entry-content p,
body.page-template-default .entry-content li {
    color: rgba(26, 58, 42, 0.88);
}

body.page-template-default .entry-content .wp-block-separator {
    max-width: 320px;
    margin-inline: auto;
}

body.page-template-default .entry-content .wp-block-button__link,
body.page-template-default .entry-content .ff-btn.ff-btn-submit {
    border-radius: 4px;
    min-height: 48px;
    padding: 0.9rem 1.5rem;
}

body.page-template-default .entry-content .hostinger-ai-fade-up.alignfull,
body.page-template-default .entry-content .hostinger-ai-fade-up.alignwide {
    border-radius: 0;
}

body.page-template-default .entry-content .hostinger-ai-title,
body.page-template-default .entry-content .wp-block-heading.has-x-large-font-size {
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

body.page-template-default .entry-content img {
    border-radius: 18px;
}

.page-id-8 .frm-fluent-form {
    width: min(100%, 760px);
    max-width: 760px;
    margin-inline: auto;
}

.page-id-8 .frm-fluent-form .ff-el-group,
.page-id-8 .frm-fluent-form .ff-t-cell,
.page-id-8 .frm-fluent-form .ff-el-input--content,
.page-id-8 .frm-fluent-form input,
.page-id-8 .frm-fluent-form textarea,
.page-id-8 .frm-fluent-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-id-8 .frm-fluent-form .ff-btn.ff-btn-submit {
    background-color: var(--wp--preset--color--gold, #c9a96e);
    color: var(--wp--preset--color--emerald, #1a3a2a);
    border: 1px solid rgba(15, 36, 26, 0.12);
    box-shadow: 0 8px 18px rgba(15, 36, 26, 0.12);
}

.page-id-5 .entry-content {
    justify-items: center;
}

.page-id-5 .entry-content > figure.wp-block-image:first-of-type {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), 680px);
    max-width: 680px;
    margin-inline: auto;
    filter: drop-shadow(0 22px 40px rgba(15, 36, 26, 0.12));
}

.page-id-5 .entry-content > p:not(:empty) {
    max-width: 860px;
    margin-inline: auto;
}

.page-id-5 .entry-content > figure.wp-block-video {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), 1040px);
    max-width: 1040px;
    margin-inline: auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 44px rgba(15, 36, 26, 0.12);
}

.page-id-8 .entry-content > .hostinger-ai-fade-up.alignfull,
.page-id-8 .entry-content > .hostinger-ai-our-location-2 {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), 1120px);
    max-width: 1120px;
    margin-inline: auto;
}

.page-id-8 .entry-content > .hostinger-ai-fade-up.alignfull > .alignwide,
.page-id-8 .entry-content > .hostinger-ai-our-location-2 > .alignwide {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(26, 58, 42, 0.1);
    border-radius: 26px;
    box-shadow: 0 18px 40px rgba(15, 36, 26, 0.08);
    backdrop-filter: blur(4px);
}

.page-id-8 .entry-content > .hostinger-ai-fade-up.alignfull > .alignwide {
    justify-content: center;
}

.page-id-8 .frm-fluent-form {
    width: min(100%, 860px);
    max-width: 860px;
}

.page-id-8 .entry-content > .hostinger-ai-our-location-2 > .alignwide {
    text-align: center;
}

.page-id-8 .entry-content > .hostinger-ai-our-location-2 iframe {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(15, 36, 26, 0.12);
}

.page-id-584 .entry-content {
    justify-items: center;
    text-align: center;
}

.page-id-584 .entry-content > * {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), 980px) !important;
    max-width: 980px !important;
    margin-inline: auto;
}

.page-id-584 .entry-content a {
    color: var(--wp--preset--color--emerald, #1a3a2a);
    text-decoration-thickness: 2px;
}

.page-id-584 .entry-content > h2:first-child {
    max-width: 11ch;
    color: var(--wp--preset--color--emerald, #1a3a2a) !important;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.page-id-584 .entry-content > h3 {
    color: var(--wp--preset--color--emerald, #1a3a2a);
    font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', serif);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.04;
    text-decoration: none;
}

.page-id-584 .entry-content > figure.wp-block-video,
.page-id-584 .entry-content > figure.wp-block-gallery {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), 1080px) !important;
    max-width: 1080px !important;
    margin-inline: auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 42px rgba(15, 36, 26, 0.12);
}

.page-id-584 .entry-content > figure.wp-block-video {
    aspect-ratio: 16 / 9;
    background: #e8decc;
}

.page-id-584 .entry-content > figure.wp-block-video video {
    width: 100% !important;
    height: 100% !important;
    max-height: min(68vh, 720px);
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
    display: block;
    background: url('https://vteventdesign.com/wp-content/uploads/2026/02/IMG_8267-1-1024x768.jpg') center center / cover no-repeat;
}

.page-id-584 .entry-content > figure.wp-block-gallery {
    gap: 1rem;
}

.page-id-584 .entry-content > figure.wp-block-gallery img {
    border-radius: 18px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.page-id-584 .entry-content > h2:not(:first-child) {
    margin-top: 1rem;
    color: var(--wp--preset--color--emerald, #1a3a2a);
}

.page-id-584 .entry-content > p.has-medium-font-size {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    text-decoration: line-through;
    text-decoration-color: rgba(26, 58, 42, 0.45);
    text-decoration-thickness: 2px;
    opacity: 0.8;
}

.page-id-584 .entry-content > p.has-vivid-red-color {
    color: #b5483b !important;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 700;
}

.page-id-584 .entry-content > p:not(.has-medium-font-size):not(.has-vivid-red-color):not(:empty) {
    max-width: 820px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(26, 58, 42, 0.74);
}

.page-id-584 .entry-content > p:not(.has-medium-font-size):not(:empty) {
    max-width: 820px;
}

.page-id-584 .entry-content > ul {
    width: min(calc(100% - (var(--vt-page-pad) * 2)), 820px) !important;
    max-width: 820px !important;
    margin-inline: auto;
    padding: 1.5rem 1.75rem 1.5rem 2.5rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(26, 58, 42, 0.1);
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(15, 36, 26, 0.08);
    column-count: 2;
    column-gap: 2rem;
}

.page-id-584 .entry-content > ul li + li {
    margin-top: 0.7rem;
}

@media (max-width: 781px) {
    body.page-template-default main.wp-block-group {
        --vt-page-pad: 1.25rem;
        --vt-page-gap: 2.25rem;
        padding-top: 2.25rem;
        padding-bottom: 4rem;
    }

    body.page-template-default .entry-content h2 {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    body.page-template-default .entry-content > :not(.alignfull):not(.alignwide),
    body.page-template-default .entry-content > .alignwide,
    body.page-template-default .entry-content > .wp-block-group.alignwide,
    body.page-template-default .entry-content > .wp-block-columns.alignwide {
        width: min(calc(100% - (var(--vt-page-pad) * 2)), 100%);
    }

    .page-id-5 .entry-content > figure.wp-block-image:first-of-type {
        width: min(calc(100% - (var(--vt-page-pad) * 2)), 100%);
    }

    .page-id-8 .entry-content > .hostinger-ai-fade-up.alignfull > .alignwide,
    .page-id-8 .entry-content > .hostinger-ai-our-location-2 > .alignwide,
    .page-id-584 .entry-content > ul {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .page-id-584 .entry-content > h2:first-child {
        max-width: 12ch;
        font-size: clamp(2.35rem, 10vw, 3.6rem);
    }

    .page-id-584 .entry-content > h3 {
        font-size: clamp(1.9rem, 8vw, 2.7rem);
    }

    .page-id-584 .entry-content > figure.wp-block-video video {
        max-height: none;
        aspect-ratio: 4 / 5 !important;
    }

    .page-id-584 .entry-content > ul {
        column-count: 1;
    }

    body.page-template-default:not(.home) .entry-content .wpsr-feed-wrap,
    body.page-template-default:not(.home) .entry-content .wpsr_content {
        width: min(calc(100% - 2rem), 100%);
        padding: 1rem;
        border-radius: 20px;
    }
}

/* =========================================
   Mobile Overflow Fixes
   ========================================= */
@media (max-width: 781px) {
    .page-id-8 .hostinger-ai-fade-up.alignwide,
    .page-id-8 .hostinger-ai-fade-up .wp-block-columns,
    .page-id-8 .hostinger-ai-fade-up .wp-block-column,
    .page-id-8 .our-location-column,
    .page-id-8 .our-location-column > *,
    .page-id-8 .hostinger-ai-fade-up iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box;
    }

    .page-id-8 .hostinger-ai-fade-up.alignwide {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-id-8 .hostinger-ai-fade-up .wp-block-columns {
        display: block !important;
    }

    .page-id-8 .hostinger-ai-fade-up iframe {
        display: block;
        height: min(70vw, 320px) !important;
    }
}