/* NotAlterra custom overrides — survives theme changes */
/* Place this file in user/data/custom.css */
/* Include via theme template override or Grav's asset pipeline. */

/* Subheadings follow the same thin/light style */
body.title-h1h2 h2 {
    font-weight: 300;
    font-size: 1.4rem;
    margin-bottom: .5rem;
}
body.title-h1h2 h3 {
    font-weight: 400;
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

/* Consistent h1 size across all pages — 2rem is the new default */
.title-center h1 {
    font-size: 2rem;
}
body.title-h1h2 h1 {
    font-weight: 100 !important;
    margin-bottom: 2.5rem;
}
/* Prevent h1+h2 overlap on project sub-pages */
body.title-h1h2 h1 + h2 {
    margin-top: 1rem !important;
}

/* Page-specific: spacing below title, left-aligned */
.page-about h1,
.page-about h2,
.page-projects h1,
.page-projects h2,
body.title-h1h2 h1,
body.title-h1h2 h2 {
    text-align: left;
}
.page-about h1,
.page-projects h1 {
    margin-bottom: 1.5rem;
}


/* Invert logo on transparent header — only before Quark's scroll JS
   adds the "scrolled" class to #header (which activates the opaque bg) */
body.header-transparent #header:not(.scrolled) .logo img {
    filter: invert(1);
}

/* Mobile menu — invert the dark logo against the dark overlay */
.mobile-logo img {
    filter: invert(1);
}

/* Hamburger toggle — match neon green from NotAlterra accent */
.mobile-menu .button_container span {
    background: #39d2c0;
}
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .bottom {
    background: #39d2c0;
}

/* Overlay menu links — cyan family, clearly distinct */
.overlay-menu ul.tree li a {
    color: #14b8a6 !important;
}
.overlay-menu ul.tree li a:hover {
    color: #5eead4 !important;
}
.overlay-menu ul.tree li a:focus {
    color: #67e8f9 !important;
}
.overlay-menu ul.tree li a.active {
    color: #155e75 !important;
}

/* Top menu — replace blue with cyan */
.dropmenu ul li a:hover,
.dropmenu ul li a:focus,
.dropmenu ul li a.active {
    color: #14b8a6 !important;
}
.header-dark #header:not(.scrolled) .dropmenu ul ul a {
    color: #14b8a6 !important;
}

/* Inline code — aqua blue instead of pink */
code {
    color: #155e75;
    background: #dbeafe;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* Bullet lists — square, dark cyan */
ul {
    list-style-type: square;
}
ul li::marker {
    color: #0f766e;
}

/* Horizontal rules — thin, subdued, centered */
hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2rem auto;
    width: 50%;
}

/* Content links — matching cyan palette */
#body-wrapper a:not(.btn):not(.badge) {
    color: #14b8a6;
}
#body-wrapper a:not(.btn):not(.badge):hover {
    color: #5eead4;
}
#body-wrapper a:not(.btn):not(.badge):focus {
    color: #67e8f9;
}
#body-wrapper a:not(.btn):not(.badge):active {
    color: #155e75;
}

/* Footer: consistent background + muted text */
#footer {
    background: #f5fff5 !important;
}
#footer p {
    font-size: 0.65rem;
    color: #555;
}

/* Modular hero — reduce oversized title */
.modular-hero h1 {
    font-size: 3rem;
    font-weight: 100 !important;
    margin: 20vh 0 0 0;
}

/* Modular text module — tighter spacing, white background */
.modular-text {
    padding-top: 1.5rem !important;
    background: #fff !important;
}
.modular-text h1 {
    font-size: 2rem;
    font-weight: 100;
    text-align: left !important;
    margin-top: 0;
}

/* Subtitle weight — keep at 300 (matched to body.title-h1h2 h2 rule) */
body.title-h1h2 h1 + h2,
.title-center h1 + h2 {
    font-weight: 300;
}