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

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --color-bg:        #14032d;
    --color-text:      #ffffff;
    --color-primary:   #F5C842;
    --color-secondary: #8B7FA0;
    --color-accent:    #F5C842;
    --color-header-bg: #0D021A;
    --color-footer-bg: #0D021A;
    --color-nav-text:  #a8aabb;
    --color-nav-hover: #F5C842;
    --border-radius:   4px;
    --max-width:       1100px;
    --font-heading:    'Playfair Display', sans-serif;
    --font-display:    var(--font-heading);
    --font-body:       'DM Sans', sans-serif;
    --card-bg:         rgba(255,255,255,0.03);
    --card-border:     rgba(245,200,66,0.15);
    --card-accent:     #F5C842;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.8;
}

.site-container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

h1 {
    font-size:   3rem;
    font-weight: 700;
    color:       #f5c842;
    line-height: 1.2;
}
h2 {
    font-size:   2.25rem;
    font-weight: 700;
    color:       #f5c842;
    line-height: 1.25;
}
h3 {
    font-size:   1.4rem;
    font-weight: 600;
    color:       #ffffff;
    line-height: 1.3;
}
p {
    font-size:   1.05rem;
    font-weight: 400;
    color:       #ffffff;
    line-height: 1.8;
    margin-bottom: 1em;
}
p:last-child { margin-bottom: 0; }

a {
    color: #F5C842;
    text-decoration: none;
}
a:hover {
    color: #00C9A7;
    text-decoration: none;
    opacity: 1;
}

img { max-width: 100%; height: auto; display: block; }

/* ── Header — top layout ────────────────────────────────────────────────── */
.site-header {
    background: var(--color-header-bg);
    color: var(--color-nav-text);
    position: sticky; top: 0; z-index: 500;}

.site-header .site-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .875rem;
    padding-bottom: .875rem;
}

.site-logo img  { max-height: 48px; width: auto; }
.site-logo span { font-size: 1.25rem; font-weight: 700; color: var(--color-nav-text); font-family: var(--font-heading); }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.site-nav { display: flex; align-items: center; gap: 0; list-style: none; }

.site-nav > li { position: relative; }

.site-nav > li > a {
    display: block;
    padding: .5rem .875rem;
    color: var(--color-nav-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: color .15s;
}
.site-nav > li > a:hover,
.site-nav > li > a.active { color: var(--color-nav-hover); }

/* Dropdown */
.site-nav .dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--color-header-bg); border-top: 2px solid var(--color-accent); list-style: none; z-index: 100; }
.site-nav li:hover > .dropdown { display: block; }
.site-nav .dropdown li a { display: block; padding: .5rem .875rem; color: var(--color-nav-text); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.site-nav .dropdown li a:hover { background: rgba(255,255,255,.08); color: var(--color-nav-hover); }

/* Mobile hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-nav-text); margin: 5px 0; transition: .2s; }

/* ── Side nav layouts ────────────────────────────────────────────────────── */
.layout-side-left  .site-wrapper,
.layout-side-right .site-wrapper { display: flex; min-height: 100vh; }

.layout-side-left  .site-sidebar,
.layout-side-right .site-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--color-header-bg);
    color: var(--color-nav-text);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;}

.layout-side-left  .site-content,
.layout-side-right .site-content { flex: 1; min-width: 0; }

.layout-side-left  .site-sidebar { order: 1; }
.layout-side-left  .site-content { order: 2; }
.layout-side-right .site-sidebar { order: 2; }
.layout-side-right .site-content { order: 1; }

.side-nav { list-style: none; padding: 1rem 0; }
.side-nav li a {
    display: block;
    padding: .6rem 1.5rem;
    color: var(--color-nav-text);
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s, color .15s;
}
.side-nav li a:hover,
.side-nav li a.active { background: rgba(255,255,255,.08); color: var(--color-nav-hover); }

.side-logo { padding: 0 1.5rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.side-logo span { font-size: 1.1rem; font-weight: 700; color: var(--color-nav-text); font-family: var(--font-heading); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--color-footer-bg);
    color: rgba(255,255,255,.7);
    padding: 3rem 0 1.5rem;
    font-size: .875rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-grid h4 { color: #fff; font-size: .9rem; font-weight: 700; margin-bottom: .75rem; font-family: var(--font-heading); }
.footer-grid a  { color: rgba(255,255,255,.65); text-decoration: none; display: block; margin-bottom: .35rem; }
.footer-grid a:hover { color: #fff; }

.footer-copy {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 1.25rem;
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: .8rem;
}
.footer-hosted-by {
    text-align: center;
    margin-top: .5rem;
    color: rgba(255,255,255,.4);
    font-size: .8rem;
    line-height: 1.6;
}
.footer-hosted-by a   { color: rgba(255,255,255,.4); text-decoration: none; }
.footer-hosted-by a:hover { color: rgba(255,255,255,.7); }
.footer-hosted-by img { max-height: 36px; width: auto; display: inline-block; opacity: .5; transition: opacity .15s; vertical-align: middle; }
.footer-hosted-by img:hover { opacity: .85; }

/* ── Page content area ───────────────────────────────────────────────────── */
.page-blocks { padding: 0; }

/* ── Buttons (front-end) ─────────────────────────────────────────────────── */
.fb-btn {
    display: inline-block;
    padding: .7rem 1.5rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-body);
}
.fb-btn:hover { opacity: .88; color: #fff; }
.fb-btn-accent { background: var(--color-accent); }
.fb-btn-outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.fb-btn-outline:hover { background: var(--color-primary); color: #fff; opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-header-bg); padding: .5rem 0; }
    .site-nav.open { display: flex; }
    .site-nav > li > a { padding: .6rem 1.25rem; }
    .site-nav .dropdown { position: static; display: none; background: rgba(0,0,0,.15); }
    .site-nav li.open > .dropdown { display: block; }
    .nav-toggle { display: block; }

    .layout-side-left  .site-wrapper,
    .layout-side-right .site-wrapper { flex-direction: column; }
    .layout-side-left  .site-sidebar,
    .layout-side-right .site-sidebar { width: 100%; height: auto; position: static; order: 1; }
    .layout-side-left  .site-content,
    .layout-side-right .site-content { order: 2; }

    .footer-grid { grid-template-columns: 1fr; }

    h1 { font-size: calc(3rem * .75); }
    h2 { font-size: calc(2.25rem   * .8); }
}

/* ── Hero banner — theme-driven gradient & overlay ──────────────────────── */
.fb-block--hero-banner {
    background: linear-gradient(160deg, #0f0520 0%, #1e0645 40%, #2d0a6b 70%, #1a0930 100%);
    position: relative;
    overflow: hidden;
}
.fb-block--hero-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #F5C842, transparent);
    z-index: 2;
}
.fb-block--hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(123,63,216,0.35) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 80% 80%, #F5C8421f 0%, transparent 60%), radial-gradient(ellipse 30% 20% at 10% 70%, #F5C8421a 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.fb-block--hero-banner .fb-hero-spotlight {
    position: absolute;
    top: -10%; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 700px;
    background: conic-gradient(from 175deg at 50% 0%, transparent 0deg, rgba(245,200,66,0.08) 5deg, rgba(245,200,66,0.13) 10deg, rgba(245,200,66,0.08) 15deg, transparent 20deg);
    pointer-events: none;
    z-index: 0;
}
.fb-block--hero-banner .fb-stage-curtain {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: repeating-linear-gradient(90deg, #8B1A1A 0px, #8B1A1A 40px, #6B1010 40px, #6B1010 80px);
    z-index: 2;
}
.fb-block--hero-banner .site-container { position: relative; z-index: 1; }