/* =====================================================================
   GuestBook — app.css   (Facebook-inspired palette)
   ---------------------------------------------------------------------
   Color palette mimics Facebook's familiar UX:
     #1877F2  primary blue (links, primary buttons, focus)
     #166FE5  primary blue hover
     #42B72A  action green (signup, create event — high-conversion CTAs)
     #36A420  action green hover
     #F0F2F5  page background (Facebook gray)
     #FFFFFF  surface white (cards, header, content)
     #050505  primary text
     #65676B  secondary text
     #DADDE1  borders
   No red buttons (except destructive admin actions like delete).
   Large body text (18px) for accessibility.
   ===================================================================== */

:root {
    /* Surfaces */
    --color-bg:           #F0F2F5;
    --color-bg-elevated:  #FFFFFF;
    --color-bg-muted:     #F0F2F5;
    --color-bg-hover:     #E4E6EB;

    /* Text */
    --color-text:         #050505;
    --color-text-muted:   #65676B;
    --color-text-inverse: #FFFFFF;
    --color-heading:      #050505;

    /* Borders */
    --color-border:       #DADDE1;
    --color-border-strong:#CED0D4;

    /* Primary blue (links, focus, secondary buttons, info) */
    --color-primary:      #1877F2;
    --color-primary-hover:#166FE5;
    --color-primary-text: #FFFFFF;
    --color-primary-soft: #E7F3FF;

    /* Action green (high-conversion CTAs: sign up, create event, pay) */
    --color-action:       #42B72A;
    --color-action-hover: #36A420;
    --color-action-text:  #FFFFFF;

    /* Status colors */
    --color-success:      #42B72A;
    --color-warning:      #B45309;
    --color-danger:       #DC2626;
    --color-info:         #1877F2;

    /* Typography */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Helvetica, Arial, sans-serif;

    --fs-xs:   13px;
    --fs-sm:   15px;
    --fs-base: 18px;
    --fs-md:   20px;
    --fs-lg:   24px;
    --fs-xl:   32px;
    --fs-2xl:  44px;
    --fs-3xl:  56px;

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Subtle shadows like Facebook surface treatment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.10);

    --container-max: 1120px;
    --header-height: 60px;
}

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video, audio, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1 0 auto; }

/* ---- Container ------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
@media (min-width: 768px) {
    .container { padding: 0 var(--space-6); }
}

/* ---- Typography ----------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-4) 0;
}
h1 { font-size: var(--fs-2xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

@media (min-width: 768px) {
    h1 { font-size: var(--fs-3xl); }
}

p { margin: 0 0 var(--space-4) 0; }

.lead {
    font-size: var(--fs-md);
    color: var(--color-text);
    line-height: 1.5;
}

.muted  { color: var(--color-text-muted); }
.center { text-align: center; }

/* ---- Header / Nav --------------------------------------------------- */
.site-header {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.brand {
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
}

.brand__wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}
.brand__wordmark--sm { font-size: 18px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.site-nav a:not(.btn) {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.site-nav a:not(.btn):hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

@media (max-width: 640px) {
    .site-nav { gap: var(--space-2); }
    .site-nav a:not(.btn) { display: none; }
    .site-nav a.btn { display: inline-flex; }
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s,
                transform 0.05s, box-shadow 0.15s;
    white-space: nowrap;
    box-shadow: var(--shadow-btn);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.55; cursor: not-allowed;
}

/* PRIMARY: Facebook blue. The default "do this" button. */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-text) !important;
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-text) !important;
}

/* ACTION: Facebook green. Use for HIGH-CONVERSION CTAs only:
   "Sign up", "Create your guest book", "Pay $10", "Activate event" */
.btn--action {
    background: var(--color-action);
    color: var(--color-action-text) !important;
    border-color: var(--color-action);
}
.btn--action:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-text) !important;
}

/* ACCENT (back-compat alias for templates still using btn--accent) */
.btn--accent {
    background: var(--color-action);
    color: var(--color-action-text) !important;
    border-color: var(--color-action);
}
.btn--accent:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-action-text) !important;
}

/* SECONDARY: Subtle gray button. For non-destructive secondary actions. */
.btn--secondary {
    background: var(--color-bg-hover);
    color: var(--color-text) !important;
    border-color: var(--color-bg-hover);
}
.btn--secondary:hover {
    background: var(--color-border);
    color: var(--color-text) !important;
    border-color: var(--color-border);
}

/* GHOST: Text-style button for tertiary actions. */
.btn--ghost {
    background: transparent;
    color: var(--color-primary) !important;
    border-color: transparent;
    box-shadow: none;
}
.btn--ghost:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover) !important;
}

/* ADMIN ACTION: Used for non-destructive admin actions */
.btn--admin-action {
    background: var(--color-warning);
    color: #fff !important;
    border-color: var(--color-warning);
}
.btn--admin-action:hover {
    background: #92400E;
    border-color: #92400E;
    color: #fff !important;
}

/* DANGER: Destructive (delete). Only place red is allowed. */
.btn--danger {
    background: var(--color-danger);
    color: #fff !important;
    border-color: var(--color-danger);
}
.btn--danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff !important;
}

/* WAITING/PROCESSING state (used during uploads, etc.)
   Eye-catching red so users don't navigate away. */
.btn--waiting {
    background: var(--color-danger) !important;
    color: #fff !important;
    border-color: var(--color-danger) !important;
    cursor: wait !important;
    opacity: 1 !important;
}

.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-md); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* ---- Forms ---------------------------------------------------------- */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}

.form-help {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.form-error {
    font-size: var(--fs-sm);
    color: var(--color-danger);
    margin-top: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.20);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2365676B' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-7);
}

/* Pretty event-type radio cards */
.event-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}
.event-type-card {
    position: relative;
    cursor: pointer;
}
.event-type-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.event-type-card__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    height: 100%;
}
.event-type-card:hover .event-type-card__inner {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.event-type-card input:checked + .event-type-card__inner {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 2px var(--color-primary);
}
.event-type-card__emoji { font-size: 32px; line-height: 1; }
.event-type-card__name  {
    font-weight: 600;
    color: var(--color-heading);
    font-size: var(--fs-sm);
}

/* ---- Cards ---------------------------------------------------------- */
.card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.card--padded { padding: var(--space-6); }

/* ---- Hero ----------------------------------------------------------- */
.hero {
    padding: var(--space-8) 0 var(--space-7);
    text-align: center;
}
.hero h1 {
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}
.hero__lead {
    max-width: 56ch;
    margin: 0 auto var(--space-6);
    font-size: var(--fs-md);
    color: var(--color-text);
    line-height: 1.5;
}
.hero__cta {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* ---- Flash messages ------------------------------------------------- */
.flash-stack {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: calc(100% - 32px);
    max-width: 480px;
}
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    background: var(--color-primary);
    color: var(--color-primary-text);
    box-shadow: var(--shadow-md);
    animation: flash-in 0.2s ease-out;
}
.flash--success { background: var(--color-success); }
.flash--error   { background: var(--color-danger); }
.flash--info    { background: var(--color-info); }
.flash--warning { background: var(--color-warning); }
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Footer --------------------------------------------------------- */
.site-footer {
    margin-top: var(--space-9);
    padding: var(--space-7) 0;
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
}
.site-footer__inner {
    display: grid;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr;
        align-items: start;
    }
}
.site-footer__tagline {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-2);
}
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.site-footer__links a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.site-footer__links a:hover { color: var(--color-primary); }
.site-footer__copy {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* ---- Page sections -------------------------------------------------- */
.section { padding: var(--space-8) 0; }
.section--muted { background: var(--color-bg); }
.section h2 { text-align: center; margin-bottom: var(--space-6); }

/* ---- Feature grid (used on homepage) -------------------------------- */
.feature-grid {
    display: grid;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature {
    text-align: center;
    padding: var(--space-5);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.feature__emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: var(--space-3);
}
.feature h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.feature p  { color: var(--color-text); font-size: var(--fs-base); margin: 0; }

/* ---- Event-type pill badge ------------------------------------------ */
.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-primary);
}

/* ---- Recorder UI ---------------------------------------------------- */
.recorder {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.recorder__preview {
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 9/16;
    width: 100%;
    max-width: 360px;
    margin: 0 auto var(--space-4);
}
.recorder__preview video { width: 100%; height: 100%; object-fit: cover; }
.recorder__controls {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
@media (min-width: 1024px) {
    .recorder__preview { aspect-ratio: 16/9; max-width: 640px; }
}

/* ---- Gallery -------------------------------------------------------- */
.gallery {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gallery__item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.gallery__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.gallery__item img,
.gallery__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery__item--audio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: 40px;
}
.gallery__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: white;
    font-size: var(--fs-sm);
}

/* ---- Tables (admin) ------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table th, .table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}
.table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table tr:last-child td { border-bottom: none; }
.table a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.table a:hover { text-decoration: underline; }

/* ---- FAQ accordion (used on /help.php) ------------------------------ */
.faq {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.faq summary {
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    font-size: 24px;
    color: var(--color-text-muted);
    line-height: 1;
}
.faq[open] summary::after { content: '−'; }
.faq summary:hover { background: var(--color-bg); }
.faq__body {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text);
    line-height: 1.6;
}

/* ---- Utility -------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.row--center { justify-content: center; }
.row--between { justify-content: space-between; align-items: center; }
.hidden { display: none !important; }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---- Skip-to-main link (accessibility) ------------------------------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-primary);
    color: var(--color-primary-text);
    padding: var(--space-3) var(--space-4);
    z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}