/* Gale Miami Hotel & Residences — Breeze microsite theme
   No hosted assets needed: the cream ground and gold stripe footer are drawn in CSS.
   Upload the logo through the event's normal logo setting. */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');

:root {
    --gale-cream: #F6F2E7;
    --gale-navy: #1F2F3E;
    --gale-gold: #B2801F;
    --gale-font: 'Josefin Sans', 'Montserrat', 'Raleway', sans-serif;
}

/* ---------- Page ---------- */
html body {
    background-color: var(--gale-cream) !important;
    background-image: none !important;
    color: var(--gale-navy) !important;
    font-family: var(--gale-font) !important;
    margin: 0;
}

body .session-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Header: logo, title, short rule ---------- */
body .header {
    width: 100%;
    text-align: center;
    padding: 28px 20px 0;
    box-sizing: border-box;
}

body .gallery-header {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body .logo-wrapper img,
body .event-logo {
    max-height: 150px !important;
    max-width: 70vw;
    height: auto;
    width: auto;
}

body .event-title h1,
body .event-title h1 a,
body .event-title h2,
body .event-title a {
    font-family: var(--gale-font) !important;
    color: var(--gale-navy) !important;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

body .event-title h1 {
    font-size: 18px !important;
    letter-spacing: 0.32em;
    margin-top: 18px;
    padding-left: 0.32em; /* optically re-centre tracked caps */
}

body .event-title h2 {
    font-size: 13px !important;
    letter-spacing: 0.26em;
    margin-top: 8px;
}

/* the short navy rule under the logo lock-up */
body .event-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: var(--gale-navy);
    margin: 20px auto 24px;
}

/* ---------- Photo / video cards ---------- */
body .card {
    width: calc(100% - 40px);
    max-width: 520px;
    margin: 0 auto 28px;
    background: #fff;
    border: 2px solid var(--gale-navy);
    border-radius: 14px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: none;
}

body .card-body figure {
    margin: 0;
}

body .card-body img.preview,
body .card-body video,
body .card-body .plyr {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

body .plyr {
    --plyr-color-main: var(--gale-gold);
}

/* ---------- Share + download row ---------- */
body .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6px 4px;
    background: transparent;
    border: 0;
}

body .social-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
}

body .card-footer .button,
body .fa-pinterest,
body .fa-linkedin,
body .fa-facebook-f,
body .fa-x-twitter,
body .fa-copy,
body .fa-arrow-up-from-bracket {
    color: var(--gale-navy) !important;
    cursor: pointer;
    transition: color .15s ease;
}

body .card-footer .button:hover {
    color: var(--gale-gold) !important;
}

/* download = the one filled control, echoing the kiosk's navy pill */
body .action-buttons form {
    margin: 0;
}

body .action-buttons button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--gale-navy);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 0 3px var(--gale-cream), 0 0 0 5px var(--gale-navy);
    margin-right: 5px;
}

body .action-buttons button .button,
body .action-buttons .fa-download {
    color: var(--gale-cream) !important;
}

body .action-buttons button:hover {
    background: var(--gale-gold);
    box-shadow: 0 0 0 3px var(--gale-cream), 0 0 0 5px var(--gale-gold);
}

body .action-buttons button:hover .button {
    color: var(--gale-cream) !important;
}

body .virtual-booth-actions .btn {
    background-color: var(--gale-navy) !important;
    color: var(--gale-cream) !important;
    font-family: var(--gale-font);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* ---------- Footer: credit line over the gold stripe band ---------- */
body .footer {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--gale-cream) !important;
}

body .footer-content,
body .footer-content a {
    font-family: var(--gale-font) !important;
    color: var(--gale-navy) !important;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

body .footer::after {
    content: '';
    display: block;
    height: 46px;
    background: repeating-linear-gradient(
        -45deg,
        var(--gale-gold) 0 34px,
        var(--gale-cream) 34px 68px
    );
}

/* ---------- Toast ---------- */
#toast-container > .toast-success {
    background-color: var(--gale-navy);
    color: var(--gale-cream);
    font-family: var(--gale-font);
    box-shadow: none;
    opacity: 1;
}