/* =========================================
   SHARED BASE STYLES
   Variables, resets, typography, buttons,
   and common components used on every page
   ========================================= */

:root {
    --bg-color: #EDE6DD;
    --text-primary: #3D352F;
    --text-secondary: #5A524C;
    --accent-color: #C4937B;
    --accent-hover: #AC7C64;
    --teal: #748868;
    --birds-egg: #AACCB9;
    --dusty-blue: #A3B6BF;
    --taupe: #B3A394;
    --white: #FFFFFF;
    --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --transition-speed: 0.3s;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
body {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-color);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3 { font-family: var(--font-heading); color: var(--text-primary); font-weight: 400; margin-bottom: 1rem; line-height: 1.2; }
a { text-decoration: none; color: var(--text-primary); transition: color var(--transition-speed); }
img { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn {
    display: inline-block;
    background-color: #D88C8C;
    color: var(--white);
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--transition-speed);
    text-align: center;
    margin-top: 1rem;
    cursor: pointer;
    border: 2px solid #D88C8C;
    font-size: 0.95rem;
}
.btn:hover { background-color: #C77B7B; border-color: #C77B7B; color: var(--white); }
.btn-outline { background: transparent; color: var(--birds-egg); border-color: var(--birds-egg); }
.btn-outline:hover { background-color: var(--birds-egg); color: var(--white); border-color: var(--birds-egg); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* Skip Link (accessibility) */
.skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent-color); color: var(--white); padding: 12px 24px; border-radius: 0 0 8px 8px; z-index: 9999; font-weight: 500; }
.skip-link:focus { top: 0; }

/* Trust Banner */
.trust-banner { background-color: #5B8390; padding: 18px 24px; text-align: center; font-size: 0.9rem; color: var(--white); font-weight: 400; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
.trust-banner strong { font-weight: 700; }

/* Page Hero (subpages) */
.page-hero {
    background: url('heroimage.webp') center/cover no-repeat;
    padding: 100px 24px 80px;
    text-align: center;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-hero .container { width: 100%; }
.page-hero h1 { font-size: 2.5rem; color: #5A5A5A; }
.page-hero .tagline { font-size: 1rem; color: #5A5A5A; margin-top: 0.5rem; opacity: 0.9; }

/* Content Sections (subpages) */
.content-section { padding: 60px 0; }
.content-section:nth-child(even) { background-color: var(--white); }
.content-section h2 { font-size: 1.75rem; margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--birds-egg); }
.content-section p { margin-bottom: 1rem; font-size: 1rem; }
.content-section p:last-child { margin-bottom: 0; }
.content-section .highlight { background: #E6EDF0; padding: 24px; border-radius: 8px; border-left: 3px solid var(--accent-color); margin: 1.5rem 0; }
.constellations-disclaimer { font-size: 0.875rem; color: #666; font-style: italic; padding: 24px 0; margin-top: 0; border-top: 1px solid #E6EDF0; }

/* Footer */
footer { background-color: var(--white); padding: 60px 24px; text-align: center; border-top: 3px solid var(--taupe); }
footer h3 { font-size: 2rem; }
footer p { margin-bottom: 20px; }
.footer-cta { margin-bottom: 20px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 40px; padding-top: 36px; border-top: 1px solid #EAEAEA; }
.footer-link { color: var(--text-primary); font-size: 0.9rem; font-weight: 500; }
.footer-link:hover { color: #D88C8C; }
.footer-legal { margin-top: 24px; font-size: 0.875rem; color: #666; }
.footer-credit { font-size: 0.7rem; color: #bbb; margin-top: 8px; letter-spacing: 0.3px; }
.footer-credit a { color: #bbb; text-decoration: none; }
.footer-credit a:hover { color: #999; }

/* Accreditation badges – sitewide footer */
.accreditation-badges { display: flex; justify-content: center; align-items: center; gap: 48px; margin-top: 36px; padding-top: 36px; border-top: 1px solid #EAEAEA; flex-wrap: wrap; }
.accreditation-badges img { height: 85px; width: auto; max-width: 320px; object-fit: contain; opacity: 1; transition: opacity var(--transition-speed); }
.accreditation-badges img:hover { opacity: 0.9; }

/* Footer social links */
.footer-social { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.footer-social a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color var(--transition-speed); }
.footer-social a:hover { color: #D88C8C; }
.footer-social svg { width: 20px; height: 20px; flex-shrink: 0; }

/* WhatsApp Float */
.whatsapp-float { position: fixed; bottom: max(28px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right)); z-index: 998; width: 56px; height: 56px; border-radius: 50%; background-color: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: transform var(--transition-speed), box-shadow var(--transition-speed); transform: translateZ(0); backface-visibility: hidden; }
.whatsapp-float:hover { transform: translateZ(0) scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.whatsapp-float svg { width: 28px; height: 28px; fill: var(--white); }
.whatsapp-float .tooltip { position: absolute; right: 68px; top: 50%; transform: translateY(-50%); background: #151d35; color: var(--white); font-size: 0.875rem; font-weight: 500; padding: 8px 14px; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-speed); pointer-events: none; }
.whatsapp-float .tooltip::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right: none; border-left-color: #151d35; }
.whatsapp-float:hover .tooltip { opacity: 1; visibility: visible; }
@keyframes wa-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.18); } 50% { box-shadow: 0 4px 16px rgba(37,211,102,0.5); } }
.whatsapp-float.pulse { animation: wa-pulse 2s ease 3; }

/* Events Float – symmetrical with WhatsApp */
.events-float { position: fixed; bottom: max(28px, env(safe-area-inset-bottom)); left: max(28px, env(safe-area-inset-left)); z-index: 998; width: 56px; height: 56px; border-radius: 50%; background-color: #5B8390; display: flex; align-items: center; justify-content: center; gap: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: transform var(--transition-speed), box-shadow var(--transition-speed); cursor: pointer; border: none; transform: translateZ(0); backface-visibility: hidden; }
.events-float:hover { transform: translateZ(0) scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.events-float .events-icon { display: flex; align-items: center; justify-content: center; color: var(--white); }
.events-float .events-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.events-float .events-date-hint { display: none; }
.events-float .events-tooltip { position: absolute; left: 68px; top: 50%; transform: translateY(-50%); background: #151d35; color: var(--white); font-size: 0.875rem; font-weight: 500; padding: 8px 14px; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-speed); pointer-events: none; }
.events-float .events-tooltip::after { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left: none; border-right-color: #151d35; }
.events-float:hover .events-tooltip { opacity: 1; visibility: visible; }
.events-float.expanded .events-tooltip { opacity: 0; visibility: hidden; }
.events-float .events-panel { position: absolute; left: 68px; bottom: 0; width: 280px; background: var(--white); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); padding: 20px; opacity: 0; visibility: hidden; transform: translateX(-10px); transition: all var(--transition-speed); pointer-events: none; text-align: left; }
.events-float.expanded .events-panel { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
.events-float .events-panel::before { content: ''; position: absolute; left: -6px; bottom: 20px; border: 6px solid transparent; border-right-color: var(--white); border-left: none; }
.events-float .events-panel h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-primary); margin-bottom: 12px; font-weight: 400; }
.events-float .events-panel .event-detail { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 4px; }
.events-float .events-panel .btn { margin-top: 16px; margin-bottom: 0; display: block; text-align: center; font-size: 0.9rem; padding: 10px 20px; }

/* =========================================
   SHARED RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .trust-banner { flex-direction: column; gap: 8px; font-size: clamp(0.875rem, 2.5vw, 0.9rem); padding: 16px 20px; }
    .page-hero { padding: 60px 20px 50px; }
    .page-hero h1 { font-size: 1.75rem; }
    .content-section { padding: 50px 0; }
    .content-section h2 { font-size: 1.5rem; }
    footer { padding: 50px 20px; }
    .footer-cta { width: 100%; }
    .footer-nav { gap: 10px 24px; }
    .whatsapp-float { bottom: max(20px, env(safe-area-inset-bottom)); right: max(20px, env(safe-area-inset-right)); width: 50px; height: 50px; }
    .whatsapp-float svg { width: 24px; height: 24px; }
    .whatsapp-float .tooltip { display: none; }
    .events-float { bottom: max(20px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); width: auto; min-width: 50px; height: 50px; padding: 0 14px 0 14px; gap: 8px; border-radius: 25px; }
    .events-float .events-icon svg { width: 22px; height: 22px; }
    .events-float .events-date-hint { display: block; font-size: 0.75rem; font-weight: 500; color: var(--white); opacity: 0.95; white-space: nowrap; }
    .events-float .events-panel { left: 58px; width: 260px; padding: 16px; }
    .events-float .events-tooltip { display: none; }
    .footer-link { font-size: 0.9375rem; }
    .footer-legal { font-size: 0.875rem; }
    .accreditation-badges { gap: 28px; }
    .accreditation-badges img { height: 70px; max-width: 260px; }
}

/* Very small screens */
@media (max-width: 400px) {
    html { font-size: 16px; }
    .trust-banner { font-size: 0.875rem; }
    .footer-link { font-size: 0.9375rem; }
    .events-float .events-panel { width: min(260px, calc(100vw - 76px)); left: 58px; }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .whatsapp-float.pulse { animation: none; }
}