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

/* =========================================
COLOR PALETTE
========================================= */

:root {

--color-gold: #c9a21a;
--color-gold-dark: #a88414;

--color-blue: #4a74b8;
--color-green: #4f8a4f;
--color-purple: #8a5fbf;
--color-brown: #8b7355;
--color-burgundy: #8b3f3f;

--color-text: #222;
--color-muted: #777;

--card-bg: rgba(255,255,255,.92);

}

/* =========================================
BODY
========================================= */

body {
margin: 0;
padding: 0;
min-height: 100vh;

font-family: Arial, Helvetica, sans-serif;

background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

}

/* =========================================
PAGE BACKGROUNDS
========================================= */

body.bg-default {
background-image: url('/assets/images/background/1320HOSBG00001.jpg');
}

body.bg-movie {
background-image: url('/assets/images/background/1320HOSBG00002.jpg');
}

body.bg-tv {
background-image: url('/assets/images/background/1320HOSBG00003.jpg');
}

body.bg-actor {
background-image: url('/assets/images/background/1320HOSBG00004.jpg');
}

body.bg-search {
background-image: url('/assets/images/background/1320HOSBG00006.jpg');
}

/* Holiday image injected by CFML */
body.bg-holiday {
}

/* =========================================
TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-text);
margin-top: 0;
}

p {
color: #333;
line-height: 1.6;
}

a {
color: inherit;
}

/* =========================================
SECTION TITLES
========================================= */

.page-title {

    margin-bottom: 5px;

    text-align: center;

    font-size: 2rem;

    font-weight: 700;

    color: #2c3e50;
}

.page-subtitle {

    margin-bottom: 25px;

    text-align: center;

    font-size: 1rem;

    font-style: italic;

    color: #666;
}

/* =========================================
SECTION TITLES
========================================= */

.section-title {

position: relative;

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

margin-bottom: 12px;
padding-bottom: 6px;

letter-spacing: .5px;
color: var(--color-text);

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

}

.section-title::after {

content: "";

position: absolute;

left: 0;
bottom: -1px;

width: 36px;
height: 3px;

background: linear-gradient(
    90deg,
    var(--color-gold),
    transparent
);

}

/* =========================================
CARD SYSTEM
========================================= */

.card {

background: var(--card-bg);

border-radius: 12px;

padding: 16px;

box-shadow:
    0 4px 12px rgba(0,0,0,.15);

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

}

.card:hover {

transform: translateY(-3px);

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

}

/* Featured Card */

.card.featured {

border: 1px solid rgba(255,215,0,.4);

box-shadow:
    0 4px 12px rgba(0,0,0,.15),
    0 0 8px rgba(255,215,0,.25);

}

/* =========================================
BUTTON SYSTEM
========================================= */

.btn-primary {

background: var(--color-gold);
color: #fff;

border: none;
border-radius: 6px;

cursor: pointer;

transition: background .2s ease;

}

.btn-primary:hover {
background: var(--color-gold-dark);
}

/* =========================================
UTILITIES
========================================= */

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

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

.hidden {
display: none;
}

.mt-10 {
margin-top: 10px;
}

.mt-20 {
margin-top: 20px;
}

.mb-10 {
margin-bottom: 10px;
}

.mb-20 {
margin-bottom: 20px;
}