/*
 Theme Name:   Lisa Moudry
 Theme URI:    https://lisamoudry.com/
 Description:  Personal creative space for Lisa Moudry — music, poetry, books, art, studies, and photography. Hand-coded child theme on Astra. Dark editorial design, black & white with hot-pink accents.
 Author:       Lisa Moudry
 Template:     astra
 Version:      0.2.0
 Text Domain:  lisamoudry
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
    --lm-bg:        #0B0B0C;   /* near-black base */
    --lm-black:     #000000;   /* pure black for overlays */
    --lm-white:     #FFFFFF;
    --lm-ash:       #9A9A9A;   /* muted secondary text */
    --lm-line:      rgba(255,255,255,0.10);
    --lm-pink:      #FF2E8A;   /* hot pink accent */
    --lm-pink-soft: #FF8FBE;

    --lm-display: 'Syne', system-ui, sans-serif;
    --lm-body:    'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   GLOBAL BASE
   ========================================================================== */
body {
    background-color: var(--lm-bg);
    color: var(--lm-white);
    font-family: var(--lm-body);
}

h1, h2, h3, h4, h5, h6, .ast-site-title {
    font-family: var(--lm-display);
    color: var(--lm-white);
}

/* Full-bleed breakout: lets a section escape Astra's centered content container. */
.lm-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ==========================================================================
   ASTRA PARENT OVERRIDES — dark editorial shell
   ========================================================================== */
header.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-header-break-point .site-header {
    background-color: var(--lm-bg) !important;
    border-bottom: 1px solid var(--lm-line) !important;
}

.site-title a,
.site-title a:hover,
.site-title a:focus,
.ast-site-identity .site-title a {
    color: var(--lm-white) !important;
    font-family: var(--lm-display) !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-description,
.ast-site-identity .site-description {
    color: var(--lm-pink) !important;
    font-family: var(--lm-body) !important;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.main-header-menu .menu-link,
.main-header-menu .menu-item a,
.ast-header-navigation-arrow {
    color: var(--lm-white) !important;
    font-family: var(--lm-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px !important;
    font-weight: 500;
}

.main-header-menu .menu-link:hover,
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
    color: var(--lm-pink) !important;
}

/* Mobile toggle + off-canvas */
.ast-mobile-menu-buttons-minimal,
button.menu-toggle {
    color: var(--lm-white) !important;
}
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    background-color: var(--lm-bg) !important;
}

/* Content + footer surfaces */
#content,
.site-content,
.ast-container {
    background-color: var(--lm-bg);
}

.site-footer,
footer.site-footer,
.ast-small-footer,
.footer-sml-layout {
    background-color: var(--lm-black) !important;
    color: var(--lm-ash) !important;
    border-top: 1px solid var(--lm-line) !important;
}

.site-footer a { color: var(--lm-ash) !important; }
.site-footer a:hover { color: var(--lm-pink) !important; }

/* Front page: strip Astra's content padding so sections go edge to edge.
   display:block overrides Astra's @media(922px) display:flex on .ast-container,
   which would otherwise render sections side-by-side instead of stacked. */
.home #content,
.home #primary,
.home .site-content > .ast-container,
.home .ast-container {
    padding: 0 !important;
    max-width: 100% !important;
    display: block !important;
}

/* Body background: Astra's .ast-plain-container class selector outspecifies
   the bare `body` rule above, so force the dark base here with !important. */
body.ast-plain-container,
body.ast-page-builder-template {
    background-color: var(--lm-bg) !important;
}
.home .entry-header,
.home .ast-no-thumbnail .entry-header { display: none; }

/* Links inside content default to pink on hover */
a { transition: color 0.25s ease; }

/* ==========================================================================
   GALLERY (Art / Photos) — masonry placeholder + real-image tiles
   ========================================================================== */
.lm-masonry { column-count: 2; column-gap: 14px; }
@media (min-width: 768px) { .lm-masonry { column-count: 3; } }

.lm-tile {
    break-inside: avoid;
    margin-bottom: 14px;
    background: #141416;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: flex-end;
    padding: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.4s ease;
}
.lm-tile:hover { border-color: var(--lm-pink); transform: translateY(-3px); }

.lm-tile-label {
    font-family: var(--lm-body);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 10px;
    color: var(--lm-ash);
}
.lm-tile:hover .lm-tile-label { color: var(--lm-pink); }

/* Real-image gallery tile variant (used once photos/art are uploaded) */
.lm-tile-img { padding: 0; }
.lm-tile-img img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.lm-tile-img:hover img { transform: scale(1.04); }