/* =========================================
   HOUSE OF STAPLETON
   COMPONENTS.CSS
========================================= */

/* =========================================
   MASTHEAD / BANNER
========================================= */

.masthead {
    text-align: center;
}

.topbar {
    width: 100%;
    padding: 8px 0;

    text-align: center;

    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

/* =========================================
   HELLO COMPONENT
========================================= */

.welcome-banner {

    text-align: center;

    margin: 15px 0 30px;

    padding: 15px;

    background: linear-gradient(
        to right,
        #faf7ef,
        #fffdf5,
        #faf7ef
    );

    border-top: 2px solid #c49a6c;
    border-bottom: 2px solid #c49a6c;
}

.welcome-time {

    font-size: 1.8rem;
    font-weight: 600;

    color: var(--color-blue);
}

.welcome-message {

    margin-top: 5px;

    font-size: 1.1rem;

    font-style: italic;

    color: #666;
}

/* =========================================
   FOOTER
========================================= */

.site-footer {

    background: #f8f8f8;

    border-top: 1px solid #ddd;

    padding: 15px 20px;

    font-size: 14px;
}

.footer-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.brand {

    color: #990033;

    font-weight: bold;
}

.footer-links {

    display: flex;

    align-items: center;
}

.footer-links img {

    height: 30px;

    width: auto;

    padding-left: 15px;
}

.footer-links a {

    margin-left: 18px;
}

/* =========================================
   SIDEBAR
========================================= */

.sidebar {
    padding: 0;
}

.sidebar-section {

    display: flex;

    flex-direction: column;
}

.sidebar-section + .sidebar-section {

    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid rgba(0,0,0,.10);
}

.sidebar a {

    display: block;

    padding: 8px 12px;

    text-decoration: none;

    color: #222;

    font-size: .95rem;

    border-radius: 6px;

    transition: all .2s ease;
}

.sidebar a:hover {

    background: rgba(0,0,0,.05);

    color: var(--color-gold);
}

.sidebar-section:first-child a {
    font-weight: 600;
}

/* =========================================
   HOLIDAY COMPONENT
========================================= */

.holiday-card {

    text-align: center;

    padding: 10px;
}

.holiday-image {

    width: 200px;
    max-width: 100%;
    height: auto;

    border-radius: 4px;

    transition: transform .2s ease;
}

.holiday-image:hover {
    transform: scale(1.03);
}

.holiday-title {

    margin-top: 8px;

    font-size: .95rem;

    font-weight: 600;

    color: #555;
}

/* =========================================
   POSTERS
========================================= */

.poster,
.mposter {

    height: auto;

    object-fit: cover;

    border-radius: 10px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.30);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.poster:hover,
.mposter:hover {

    transform: scale(1.04);

    box-shadow:
        0 16px 32px rgba(0,0,0,.45);
}

/* Movie poster sizes */

.poster--lg {
    width: 260px;
}

.poster--sm {
    width: 90px;
}

.poster--watching {
    width: 140px;
}

/* Music poster sizes */

.mposter--lg {
    width: 300px;
    height: 300px;
}

/* =========================================
   SPOTLIGHT MOVIE
========================================= */

.spotlight-movie {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}

.poster-link {
    display: block;
}

.movie-title a {

    text-decoration: none;

    color: #111;

    font-weight: 600;

    font-size: 1.1rem;

    transition: color .2s ease;
}

.movie-title a:hover {
    color: var(--color-gold);
}

.movie-year {
    color: #777;
}

.movie-actions {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 12px;
}

.movie-actions a {

    text-decoration: none;

    color: #444;

    font-size: .9rem;

    padding: 6px 10px;

    border-radius: 6px;

    border: 1px solid rgba(0,0,0,.08);

    background: rgba(0,0,0,.04);

    transition: all .2s ease;
}

.movie-actions a:hover {

    background: rgba(0,0,0,.08);

    color: var(--color-gold);
}

/* =========================================
   EVENT CARD
========================================= */

.event-card {
    text-align: center;
}

.event-title {

    font-size: 1.2rem;

    font-weight: 600;
}

.event-subtitle {

    font-size: .85rem;

    color: #777;
}

.event-date {

    font-size: .85rem;

    color: #999;
}

.event-quote {

    margin: 10px 0;

    font-size: .9rem;

    font-style: italic;

    color: #555;
}

.event-image img {

    width: 120px;

    display: block;

    margin: 10px auto;

    border-radius: 8px;
}

.event-movies {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;
}

.event-movies img {

    width: 140px;

    border-radius: 6px;

    transition: transform .2s ease;
}

.event-movies img:hover {
    transform: scale(1.05);
}

/* =========================================
   NOW WATCHING
========================================= */

.now-watching {
    text-align: center;
}

.watching-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;
}

/* =========================================
   TRIVIA HALL HEADER
========================================= */

.games-header {

    width: calc(100% - 280px);

    margin-bottom: 25px;

    text-align: center;
    
    background: rgba(128, 0, 32, 1);

    border-left: 6px solid #9f1d35;
    
    border-radius: 12px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.25);

}

.games-title {

    font-family: 'Rye', serif;

    font-size: 3rem;

    font-weight: normal;

    color: #ffd700;

    text-align: center;

    letter-spacing: 2px;

    margin-bottom: 8px;

    text-shadow:
        2px 2px 0 rgba(255,255,255,.4),
        3px 3px 6px rgba(0,0,0,.25);
}

.games-subtitle {

    text-align: center;

    font-size: 1.05rem;

    font-style: italic;

    color: #f0f0f0;

    text-shadow:
        1px 1px 3px rgba(0,0,0,.6);

    margin-top: 5px;
}

/* =========================================
TRIVIA COMPONENTS
========================================= */

.trivia {

display: flex;

flex-direction: column;

gap: 10px;

}

.trivia-select {

padding: 8px;

font-size: .95rem;

border: 1px solid rgba(0,0,0,.20);

border-radius: 6px;

background: rgba(255,255,255,.90);

}

.trivia-details {

margin-top: 10px;

padding: 12px;

font-size: .9rem;

line-height: 1.5;

border-radius: 8px;

background: rgba(255,255,255,.55);

}

/* =========================================
STATE FLAGS
========================================= */

.state-flags {
display: none;
}

.state-flag {

width: 260px;

height: auto;

display: block;

margin: 12px auto;

border-radius: 6px;

box-shadow:
    0 6px 14px rgba(0,0,0,.25);

}

/* =========================================
GAME THEMES
========================================= */

/* STATES */

.card.trivia-state {

background: #dcecff;

border-left: 8px solid #005fcc;

}

.card.trivia-state .trivia-details {

background: rgba(0,95,204,.10);

}

/* SPACE */

.card.trivia-space {

background: #1f2950;

color: #ffffff;

border-left: 8px solid #6fb3ff;

}

.card.trivia-state,
.card.trivia-space,
.card.trivia-history,
.card.trivia-country {

    box-shadow:
        0 6px 16px rgba(0,0,0,.25);
}

.card.trivia-space .section-title,
.card.trivia-space label,
.card.trivia-space p {

color: #ffffff;

}

.card.trivia-space .trivia-select {

background: #2f3b70;

color: #ffffff;

border-color: #6fb3ff;

}

.card.trivia-space .trivia-details {

background: rgba(255,255,255,.10);

color: #ffffff;

}

/* HISTORICAL FIGURES */

.card.trivia-history {

background: #ffe4a8;

border-left: 8px solid #b56700;

}

.card.trivia-history .trivia-details {

background: rgba(181,103,0,.10);

}

/* COUNTRIES */

.card.trivia-country {

background: #d8ffe2;

border-left: 8px solid #1f8a3a;

}

.card.trivia-country .trivia-details {

background: rgba(31,138,58,.10);

}


/* =========================================
   MEDIA SOURCE ICONS
========================================= */

.image-row {

    width: 50%;

    margin: 0 auto;

    padding-top: 15px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 10px;
}

.image-row img {

    max-width: 100%;

    height: auto;
}

.img1 {

    grid-column: 1;

    justify-self: start;
}

.img2 {

    grid-column: 2;

    justify-self: end;
}

.source {

    width: 30px;

    height: auto;

    justify-self: center;
}

/* =========================================
   ADMIN HOME PAGE
========================================= */

.admin-card {

    max-width: 500px;

    margin: 0 auto;

    text-align: center;
}

.admin-links {

    display: flex;

    flex-direction: column;

    gap: 25px;

    margin-top: 15px;
}

.admin-links a {

    text-decoration: none;

    color: #111;

    font-weight: 600;

    padding: 8px 10px;

    border-radius: 6px;

    background: rgba(0,0,0,.04);

    border: 1px solid rgba(0,0,0,.08);

    transition: all .2s ease;
}

.admin-links a:hover {

    background: rgba(0,0,0,.08);

    color: var(--color-gold);
}