/* =====================================================================
   The Totality of Ygg — brand pass
   Loaded after main.css; overrides the leftover generic-template colors
   and type with the actual brand (sampled from the logo) and adds the
   homepage hero/portal-card styles.
   ===================================================================== */

:root {
    --toy-bg: #121212;
    --toy-accent: #8c4d77;       /* sampled from the logo circle */
    --toy-accent-light: #b97ea0; /* lightened for text on dark backgrounds */
    --toy-ink: #1a1a1a;
    --toy-paper: #f3ece8;
}

html {
    background-color: var(--toy-bg);
}

html, body {
    font-family: 'EB Garamond', Georgia, serif;
}

h1, h2, h3, h4, h5,
#nav-menu ul a,
.portal-card h3,
.tagline {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
}

/* ---------- Top-level nav ---------- */

/* .top-header > .container has a FIXED height (120px, 80px once
   .sticky) with line-height set to match, so a single line of nav
   items sits vertically centered -- but if the items don't fit on one
   line, the wrapped second line silently overflows past the bottom of
   that fixed-height box rather than growing it, which would make a
   wrapped second line even worse. Forcing nowrap here keeps the row
   single-line (overflowing horizontally in the rare case it doesn't
   fit, which is far less broken-looking than a dropped second line).
   Added after the Blog link made the top-level item count hit 5. The
   actual logo/nav overlap turned out to be a separate, pre-existing
   issue -- see the #main-img margin-top note below. */
#nav-menu > ul {
    white-space: nowrap;
}

/* Claw back some of the room the 5th (Blog) item took, so nowrap above
   rarely has to fall back to horizontal overflow at all. main.css's
   default is 0 20px; this only touches top-level items, not the
   dropdown panels (those use a separate #nav-menu ul ul a rule). */
#nav-menu > ul > li > a {
    padding: 0 14px;
}

#nav-menu ul a {
    color: var(--toy-accent-light);
}

#nav-menu li.selected > a,
#nav-menu ul a:hover {
    color: #ffffff;
}

#nav-menu > ul > li.selected > a:after,
#nav-menu ul a:hover:after {
    border-bottom-color: var(--toy-accent);
}

/* ---------- Dropdown panels ---------- */

#nav-menu > ul > li > ul,
#nav-menu ul ul ul {
    background-color: var(--toy-paper);
}

#nav-menu ul ul a {
    color: var(--toy-ink);
}

#nav-menu ul ul a:before {
    color: var(--toy-accent);
}

#nav-menu > ul > li li.selected a,
#nav-menu ul ul a:hover {
    background-color: var(--toy-accent);
    color: #ffffff;
}

#nav-menu ul ul a:hover:before {
    color: #ffffff;
}

/* ---------- Hero ---------- */

/* The nav bar (.top-header) is position:fixed, so it's removed from
   normal flow and takes up no space of its own -- #main-img, right
   after it in the markup, starts at the very top of the page with
   nothing pushing it down. The logo artwork runs solid right to its
   own top edge (no blank buffer), so it was always going to sit
   directly under the 120px-tall (80px once .sticky) nav bar; a wider
   nav just made the overlap with the leftmost item more visible.
   Same fix characters.css already applies via .char-gen's
   padding-top: reserve space equal to the nav bar's height. */
#main-img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 150px auto 0;
}

@media (max-width: 767px) {
    #main-img { margin-top: 110px; }
}

.tagline {
    text-align: center;
    color: var(--toy-accent-light);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 2.5rem;
    padding: 0 1rem;
}

.divider-logo {
    display: block;
    width: 100%;
    max-width: 90px;
    height: auto;
    margin: 0 auto 2.5rem;
    opacity: 0.9;
}

/* ---------- Portal cards ---------- */

#portal {
    background-color: var(--toy-bg);
    padding: 1rem 0 4rem;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.portal-card {
    background-color: var(--toy-ink);
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.portal-card h3 {
    color: var(--toy-accent-light);
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}

.portal-card p {
    color: #cfc8c6;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.portal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.portal-links a {
    display: inline-block;
    color: var(--toy-accent-light);
    border: 1px solid var(--toy-accent);
    border-radius: 3px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.portal-links a:hover {
    background-color: var(--toy-accent);
    color: #ffffff;
}

@media (max-width: 600px) {
    .portal-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Footer / contact ---------- */

.site-footer {
    background-color: var(--toy-ink);
    border-top: 1px solid #2a2a2a;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.footer-contact {
    color: #cfc8c6;
    font-size: 0.95rem;
    margin: 0;
    text-align: center;
}

.contact-email {
    color: var(--toy-accent-light);
    text-decoration: underline;
}

.contact-email:hover {
    color: #ffffff;
}