/*
Theme Name: Ana Lu Masi — Clean Archive
Theme URI: https://analumasi.com.br
Description: Tema mínimo de arquivo para o blog Ana Lu Masi — restauração baseada no Wayback Machine. Paleta dourado/bege extraída do snapshot WM 2023-07-29 (tema Ashley/ThemeFlower).
Author: Auro
Version: 1.15
Text Domain: analumasi-clean
*/

:root {
    --accent:        #ddbe86; /* dourado/bege — primary (nav, more-link, accents) */
    --accent-soft:   #f3eab5; /* creme amarelado — cat-links sobre overlay */
    --accent-light:  #fbf6e6; /* creme muito claro — hover bg, sub-menu hover */
    --accent-dark:   #b8945a; /* dourado escuro — hover de link primary */
    --text:          #404040; /* Ashley body color */
    --text-dark:     #1d1c1c; /* títulos em cards */
    --text-mute:     #888;
    --bg:            #ffffff;
    --bg-content:    #ffffff;
    --bg-topnav:     #ececec; /* cinza claro WM top-nav */
    --topnav-link:   #4c4848; /* cinza escuro WM top-nav link */
    --line:          #e6e3df;
    --maxw-chrome:   1140px;  /* WM container width */
    --maxw-content:   720px;  /* single post reading column */
    --sidebar-w:      300px;  /* WM sidebar width */
    --grid-gap:        50px;  /* WM main↔sidebar gap */
}

* { box-sizing: border-box; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.archive-header {
    margin: 0.5em 0 1.2em;
    padding-bottom: 0.6em;
    border-bottom: 1px solid var(--line);
}
.archive-title {
    font-family: 'Cardo', Georgia, serif;
    font-size: 2.2em;
    font-weight: 400;
    margin: 0;
    color: var(--text-dark);
}
.archive-description {
    margin-top: 0.5em;
    color: var(--text-mute);
    font-size: 0.95em;
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Lora", Georgia, serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    /* Prevents the .home-carousel-wrap viewport-width breakout from leaking
       horizontal scroll into the page. */
    overflow-x: hidden;
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3, h4, h5, h6 {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text);
}
h1 { font-size: 2.2em; margin: 0.6em 0 0.4em; }
h2 { font-size: 1.6em; margin: 1.4em 0 0.5em; }
h3 { font-size: 1.25em; margin: 1.2em 0 0.4em; font-weight: 700; }
h4 { font-size: 1.1em; margin: 1.1em 0 0.4em; font-weight: 700; }
h5, h6 { font-size: 1em; font-weight: 700; }

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

/* ---- Top nav (pages: Home / Sobre / Câmera / Contato) ---- */
.top-nav-wrapper {
    background: var(--bg-topnav);
    border-bottom: 1px solid var(--line);
}
.top-nav-inner {
    max-width: var(--maxw-chrome);
    margin: 0 auto;
    padding: 0.6em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
}
.top-nav-inner .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5em; }
.top-nav-inner .menu a {
    color: var(--topnav-link);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: 600;
}
.top-nav-inner .menu a:hover { color: var(--accent-dark); border-bottom: none; }

/* ---- Site branding (logo) ---- */
.site-branding {
    max-width: var(--maxw-chrome);
    margin: 0 auto;
    padding: 35px 1em 10px;
    text-align: center;
}
.site-branding img { max-height: 180px; width: auto; }
.custom-logo-link,
.custom-logo-link:hover { border-bottom: none; }
.site-title {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: 2.6em;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0;
}
.site-title a { color: var(--text); border-bottom: none; }
.site-title a:hover { color: var(--accent); border-bottom: none; }
.site-description {
    /* WM 2023-07-29 snapshot does not expose the site description below the
       logo. Kept the element in markup for SEO/a11y; hidden visually. */
    display: none;
}

/* ---- Main nav (categories hierarchical) ---- */
.main-navigation {
    background: var(--bg-content);
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
}
.main-navigation .menu-wrap {
    max-width: var(--maxw-chrome);
    margin: 0 auto;
    padding: 0 1em;
}
.main-navigation .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 1.6em;
}
.main-navigation .menu > li { position: relative; padding: 1em 0; }
.main-navigation .menu > li > a {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 600;
    border-bottom: none;
    padding: 0 11px;
}
.main-navigation .menu > li > a:hover { color: var(--accent-dark); }
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bg-content);
    border: 1px solid var(--line);
    list-style: none;
    margin: 0;
    padding: 0.5em 0;
    z-index: 10;
}
.main-navigation .menu > li:hover .sub-menu,
.main-navigation .menu > li:focus-within .sub-menu { display: block; }
.main-navigation .sub-menu li { padding: 0; }
.main-navigation .sub-menu a {
    display: block;
    padding: 0.5em 1em;
    color: var(--text);
    font-size: 0.9em;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.main-navigation .sub-menu a:hover {
    background: var(--accent-light);
    border-bottom: none;
}

/* ---- Socials ---- */
.site-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.8em;
}
.site-socials a {
    color: var(--text-mute);
    font-size: 1.1em;
    border-bottom: none;
}
.site-socials a:hover { color: var(--accent); }

/* ---- Home carousel (3-up scroll-snap, replaces grid in v1.4) ---- */
/* .home-carousel-wrap is a viewport-width breakout. The parent .site-main
   constrains content to 720px (--maxw-content); the carousel needs to span
   up to 1100px (--maxw-chrome) like the WM original. The 100vw + negative
   margin centers the wrap on the viewport, then .home-carousel itself caps
   the visual at --maxw-chrome. body { overflow-x: hidden } above prevents
   any horizontal scroll leakage. */
.home-carousel-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 1.5em;
    margin-bottom: 2.5em;
    position: relative;
}
.home-carousel {
    /* Fluid: spans the full viewport (parent .home-carousel-wrap is already
       100vw via breakout). Three items per page therefore stretch with the
       viewport, mirroring the WM cover-magazine feel on wide screens. */
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* Edge legacy */
}
.home-carousel::-webkit-scrollbar { display: none; }
.home-carousel-item {
    /* gap is now 0 — items butt against each other for seamless fluid look. */
    flex: 0 0 calc(100% / 3);
    scroll-snap-align: start;
    overflow: hidden;
    position: relative;
    background: var(--text-dark);
    transition: transform 0.2s ease;
}
.home-carousel-item:hover { transform: translateY(-2px); }

/* Hero overlay style: image fills the card; overlay darkens; caption sits
   absolutely at the bottom over a translucent overlay, in white text. Mirrors
   the WM 2023-07-29 .featured-posts.owl-carousel item layout. */
.home-carousel-thumb {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--text-dark);
    border-bottom: none;
}
.home-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    transition: transform 0.4s ease;
}
.home-carousel-item:hover .home-carousel-thumb img {
    transform: scale(1.03);
}
/* Subtle flat dim across the whole card — mirrors WM Ashley
   `.background-overlay { background: #000; opacity: .3 }` (the WM ".tarja"
   gradient lives on .home-carousel-body, not here). */
.home-carousel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: background 0.2s ease;
}
.home-carousel-item:hover .home-carousel-overlay {
    background: rgba(0, 0, 0, 0.1);
}
/* "Tarja" — bottom-anchored full-width caption strip, mirrors WM Ashley
   `.featured-posts .post-thumbnail .entry-header` (width 100%, bottom 0,
   linear-gradient transparent → rgba(0,0,0,.85), text-align left, padding
   0 30px, height 150px). Adapted: padding uses em so it scales with type;
   height auto so longer titles don't truncate at fluid widths. */
.home-carousel-body {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    padding: 5em 1.8em 1.4em;
    color: #fff;
    text-align: left;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.home-carousel-cat {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    color: var(--accent-soft);
    font-weight: 700;
    margin-bottom: 0.6em;
    line-height: 1.2;
}
.home-carousel-cat a, .home-carousel-cat a:hover {
    color: inherit;
    border-bottom: none;
}
.home-carousel-title {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: clamp(1.05em, 1.5vw, 1.6em);
    margin: 0 0 0.35em;
    line-height: 1.25;
    color: #fff;
    font-weight: 400;
}
.home-carousel-meta {
    color: #fff;
    font-size: 0.78em;
    opacity: 0.85;
    line-height: 1.3;
}

/* Carousel controls (prev/next buttons positioned over the deck). Fluid —
   matches the new .home-carousel which is also full-viewport. Buttons sit
   at the right edge of the viewport for visual continuity with the deck. */
.home-carousel-controls {
    width: 100%;
    margin: 0.6em 0 0;
    padding: 0 1.2em;
    display: flex;
    justify-content: flex-end;
    gap: 0.4em;
}
.home-carousel-prev,
.home-carousel-next {
    background: var(--bg-content);
    border: 1px solid var(--line);
    color: var(--text-mute);
    width: 2.2em;
    height: 2.2em;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}
.home-carousel-prev:hover,
.home-carousel-next:hover {
    background: var(--accent-light);
    color: var(--text);
    border-color: var(--accent-soft);
}

/* Responsive: 2-up tablet, 1-up mobile */
@media (max-width: 900px) {
    .home-carousel-item { flex-basis: calc((100% - 1em) / 2); }
}
@media (max-width: 600px) {
    .home-carousel-item { flex-basis: 92%; }
}

/* ---- Main content ----
 * Default: 720px reading column for single posts and pages.
 * Home/archive/search: expands to 1140px grid with sidebar (see below). */
.site-main {
    max-width: var(--maxw-content);
    margin: 0 auto;
    padding: 1em 1em 3em;
}
.site-main article.post,
.site-main article.page {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--line);
}
.site-main article.post:last-child,
.site-main article.page:last-child { border-bottom: none; }

/* Grid 2-col for list views — main list + 300px sidebar. The carousel,
   breadcrumbs and pagination span both columns; .post-list and .widget-area
   take col 1 and col 2 respectively. */
@media (min-width: 900px) {
    body.home .site-main,
    body.blog .site-main,
    body.archive .site-main,
    body.search .site-main {
        max-width: var(--maxw-chrome);
        display: grid;
        grid-template-columns: 1fr var(--sidebar-w);
        gap: var(--grid-gap);
        padding: 1em 1em 3em;
    }
    body.home .home-carousel-wrap,
    body.home .breadcrumbs,
    body.home .pagination,
    body.blog .breadcrumbs,
    body.blog .pagination,
    body.archive .breadcrumbs,
    body.archive .pagination,
    body.search .breadcrumbs,
    body.search .pagination { grid-column: 1 / -1; }
    .post-list { grid-column: 1; min-width: 0; }
    .widget-area { grid-column: 2; }
}

.post-list { /* baseline so single-col layouts behave naturally */
    display: block;
}

.entry-header { margin-bottom: 1.5em; }
.entry-title { margin-bottom: 0.3em; }
.entry-title a { color: var(--text); border-bottom: none; }
.entry-title a:hover { color: var(--accent); }
.entry-meta {
    color: var(--text-mute);
    font-size: 0.85em;
    margin-bottom: 1.5em;
}
.entry-meta a { color: var(--text-mute); }
.entry-meta .byline { font-style: italic; }

/* Single post — full-width gray title banner.
 * Same viewport-width breakout pattern as .home-carousel-wrap (escapes the
 * 720px .site-main constraint defined by --maxw-content). Mirrors the WM
 * Ashley `.archive-header` look (background #F5F3F3, 4em vertical padding)
 * but lives under its own class to avoid colliding with .archive-header
 * already defined for archive.php (which is a thin border-bottom header). */
.single-post-header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 1em;
    margin-bottom: 2em;
    padding: 3.5em 1em;
    background: #F5F3F3;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.single-post-header-inner {
    max-width: var(--maxw-chrome);
    margin: 0 auto;
    padding: 0 1em;
}
.single-post-header .entry-title {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: clamp(1.7em, 3vw, 2.3em);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 0.4em;
    color: var(--text-dark);
    letter-spacing: 0.02em;
}
.single-post-header .entry-meta {
    color: var(--text-mute);
    font-size: 0.88em;
    margin: 0;
}
.single-post-header .entry-meta a { color: var(--text-mute); }
.single-post-header .entry-meta a:hover { color: var(--accent); }
.single-post-header .entry-meta .byline { font-style: italic; }

/* Featured image hero (single) */
.featured-image {
    margin: 0 0 1.8em;
}
.featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Single post navigation (prev / next) — mirror of WM Ashley
 * .post-navigations.rich-post-navigation: two 50/50 cards, 150px tall,
 * with optional background-image (post thumbnail), dark overlay, white
 * "Anterior"/"Próximo" label (h6) underlined in --accent, and the linked
 * post title (h4) centered. Viewport-width breakout so the nav can span
 * up to --maxw-chrome regardless of the 720px .site-main reading column. */
.post-navigations {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 3em;
    margin-bottom: 0;
    max-width: 100vw;
}
.post-navigations a {
    text-decoration: none;
    border-bottom: none;
    display: block;
    float: left;
    width: 50%;
    height: 150px;
}
.post-navigations a:only-child { width: 100%; }
.post-navigations a:hover { border-bottom: none; }
.post-navigations::after {
    content: "";
    display: table;
    clear: both;
}
.post-navigations .post-navigation {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--text-dark);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    transition: filter 0.2s ease;
}
.post-navigations .post-navigation:hover { filter: brightness(1.1); }
.post-navigations .post-navigation::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.post-navigations .post-navigation.no-thumbnail-image {
    background-color: var(--text-dark);
}
.post-navigations .post-navigation h6 {
    position: absolute;
    top: 28px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--accent);
    z-index: 1;
}
.post-navigations .post-navigation h4 {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 28px;
    display: flex;
    align-items: center;
    color: #fff;
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.3;
    z-index: 1;
}
.post-navigations .previous-post h6 { left: 28px; }
.post-navigations .previous-post h4 { justify-content: flex-start; text-align: left; }
.post-navigations .next-post h6 { right: 28px; }
.post-navigations .next-post h4 { justify-content: flex-end; text-align: right; }

@media (max-width: 600px) {
    .post-navigations { margin-top: 2em; }
    .post-navigations a {
        float: none;
        width: 100% !important;
        height: 120px;
    }
    .post-navigations .post-navigation h4 { font-size: 1em; padding: 20px; }
    .post-navigations .post-navigation h6 { top: 20px; }
    .post-navigations .previous-post h6 { left: 20px; }
    .post-navigations .next-post h6 { right: 20px; }
}

/* Tag footer at end of single post */
.entry-tags {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--line);
    color: var(--text-mute);
    font-size: 0.85em;
}
.entry-tags .tags-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.8em;
    margin-right: 0.4em;
}
.entry-tags a { color: var(--text-mute); }
.entry-tags a:hover { color: var(--accent); }

/* Post card — hero image with title block centered below.
   Image uses object-position center 30% to favor the upper-center region
   (good focal point for portraits / people in maternity photos). */
.post-card {
    margin-bottom: 3.5em;
    padding: 0;
    border-bottom: none !important; /* override .site-main article.post baseline */
}
.post-card-cat {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    margin: 0 0 1em;
    text-align: center;
}
.post-card-cat a { color: inherit; border-bottom: none; }
.post-card-cat a:hover { color: var(--accent-dark); }
/* Wraps thumb + caption. Relative anchor so the caption overlays the image. */
.post-card-thumb-wrap {
    position: relative;
    margin-bottom: 1.5em;
}
.post-card-thumb {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--text-dark);
    border-bottom: none;
}
.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.4s ease;
}
.post-card:hover .post-card-thumb img { transform: scale(1.02); }
.post-card-thumb-empty {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--accent-light);
}
/* Caption overlay — centered white-translucent box, mirror of WM Ashley
 * `.post-thumbnail .entry-header { position:absolute; top:50%; left:50%;
 * transform:translate(-50%,-50%); width:500px; padding:30px; background:#fff;
 * opacity:.9 }`. The title is uppercase Cardo with 2px letter-spacing — the
 * WM Ashley signature treatment scoped to post-card so other entry-titles
 * (single, archive) don't pick up the uppercase. */
.post-card-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2.4em);
    max-width: 500px;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 1.8em 1.5em;
    margin: 0;
    z-index: 1;
    transition: background-color 0.2s ease;
}
.post-card:hover .post-card-caption {
    background: rgba(255, 255, 255, 0.95);
}
.post-card-caption .entry-title {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: clamp(1.1em, 1.6vw, 1.7em);
    line-height: 1.25;
    margin: 0 0 0.6em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
}
.post-card-caption .entry-title a {
    color: var(--text-dark);
    border-bottom: none;
}
.post-card-caption .entry-title a:hover { color: var(--accent-dark); }
.post-card-caption .entry-meta {
    color: var(--text-mute);
    font-size: 0.85em;
    margin: 0;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}
.post-card-caption .entry-meta time { font-style: normal; }
/* No-thumbnail fallback: caption keeps overlay position but on the cream
 * placeholder bg (still readable). Future enhancement: skip overlay entirely
 * when no image, but kept symmetrical for now — Sessão 8 will fill featured
 * images so most cards will have a real photo to overlay anyway. */
.post-card-excerpt {
    margin-top: 0.6em;
    color: var(--text);
    font-size: 1em;
    line-height: 1.7;
    text-align: center;
}
.post-card-excerpt p { margin: 0 0 0.8em; }
.post-card .custom-more-link {
    margin: 0.8em 0 0;
    text-align: center;
}
.post-card .custom-more-link a {
    color: var(--accent);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
}
.post-card .custom-more-link a:hover { color: var(--accent-dark); }

@media (max-width: 720px) {
    .post-card { margin-bottom: 2.5em; }
    .post-card-caption {
        width: calc(100% - 1.5em);
        padding: 1.2em 1em;
    }
    .post-card-caption .entry-title { font-size: 1.1em; letter-spacing: 1.5px; }
    .post-card-thumb { aspect-ratio: 16 / 9; }
}
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
}
.entry-content p { margin: 1em 0; }
.entry-content ul,
.entry-content ol {
    margin: 1em 0 1em 1.4em;
    padding: 0;
}
.entry-content li { margin: 0.3em 0; }
.entry-content li > ul,
.entry-content li > ol { margin: 0.3em 0 0.3em 1.2em; }

.entry-content blockquote {
    border-left: 4px solid var(--accent);
    background: var(--accent-light);
    padding: 0.8em 1.2em;
    color: var(--text);
    font-style: italic;
    margin: 1.6em 0;
    position: relative;
}
.entry-content blockquote p:first-child { margin-top: 0; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-size: 0.85em;
    color: var(--text-mute);
    font-style: normal;
}

.entry-content hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2em auto;
    max-width: 200px;
}

.entry-content code {
    background: var(--accent-light);
    padding: 0.1em 0.35em;
    border-radius: 2px;
    font-size: 0.92em;
}

/* ---- WordPress image alignment + captions ---- */
.alignleft,
.entry-content .alignleft {
    float: left;
    margin: 0.3em 1.5em 1em 0;
    max-width: 50%;
}
.alignright,
.entry-content .alignright {
    float: right;
    margin: 0.3em 0 1em 1.5em;
    max-width: 50%;
}
.aligncenter,
.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}
.alignnone,
.entry-content .alignnone {
    display: block;
    margin: 1.5em auto;
}

.wp-caption,
.entry-content figure {
    margin: 1.5em auto;
    max-width: 100%;
}
.wp-caption img,
.entry-content figure img { margin: 0 auto; }

.wp-caption-text,
.entry-content figcaption {
    font-size: 0.85em;
    color: var(--text-mute);
    text-align: center;
    font-style: italic;
    margin-top: 0.5em;
    line-height: 1.4;
}

.entry-content .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5em;
    margin: 1.5em 0;
}
.entry-content .gallery-item img { margin: 0; width: 100%; }
.entry-content .gallery-caption {
    font-size: 0.8em;
    color: var(--text-mute);
    text-align: center;
}

/* Clearfix for aligned floats inside articles */
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

.pagination {
    text-align: center;
    margin: 3em 0;
}
.pagination a, .pagination span,
.pagination .page-numbers {
    display: inline-block;
    padding: 0.4em 0.9em;
    margin: 0 0.15em;
    border: 1px solid var(--line);
    color: var(--text-mute);
    background: var(--bg-content);
    font-size: 0.9em;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pagination a:hover {
    background: var(--accent-light);
    color: var(--text);
    border-color: var(--accent-soft);
}
.pagination .current,
.pagination span.current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.breadcrumbs {
    color: var(--text-mute);
    font-size: 0.85em;
    margin: 1em 0;
}
.breadcrumbs a { color: var(--text-mute); }

/* ---- Sidebar (widget area) ---- */
.widget-area {
    font-size: 0.95em;
}
.widget-area .widget {
    margin-bottom: 2.5em;
}
.widget-area .widget-title {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.widget-area .widget a {
    color: var(--text);
    border-bottom: none;
}
.widget-area .widget a:hover { color: var(--accent-dark); }

/* Search widget */
.widget-area .widget_search .search-form {
    display: flex;
    border: 1px solid var(--line);
    background: var(--bg-content);
}
.widget-area .widget_search .search-field {
    flex: 1 1 auto;
    border: 0;
    padding: 0.6em 0.8em;
    font: inherit;
    background: transparent;
    color: var(--text);
    min-width: 0;
}
.widget-area .widget_search .search-submit {
    border: 0;
    background: var(--accent);
    color: #fff;
    padding: 0 1em;
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.widget-area .widget_search .search-submit:hover { background: var(--accent-dark); }

/* Text/embed widget */
.widget-area .widget_text .textwidget iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

/* Calendar widget */
.widget-area .widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    text-align: center;
}
.widget-area .widget_calendar caption {
    padding: 0.4em 0;
    color: var(--text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.widget-area .widget_calendar th,
.widget-area .widget_calendar td {
    padding: 0.35em 0;
    border: 1px solid var(--line);
}
.widget-area .widget_calendar th {
    background: var(--accent-light);
    color: var(--text);
}
.widget-area .widget_calendar td a {
    display: block;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.widget-area .widget_calendar td a:hover { background: var(--accent-dark); }
.widget-area .widget_calendar nav {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4em;
    font-size: 0.9em;
}

/* Aside-posts (custom): list of category-filtered posts with thumbnail */
.widget-area .aside-posts ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget-area .aside-posts li {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.8em;
    margin-bottom: 1em;
    align-items: start;
}
.widget-area .aside-posts li:last-child { margin-bottom: 0; }
.widget-area .aside-posts .aside-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--accent-light);
    border-bottom: none;
}
.widget-area .aside-posts .aside-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.widget-area .aside-posts .aside-title {
    font-family: "Cardo", "Lora", Georgia, serif;
    font-size: 0.95em;
    line-height: 1.3;
    margin: 0 0 0.2em;
    font-weight: 400;
}
.widget-area .aside-posts .aside-title a { color: var(--text-dark); }
.widget-area .aside-posts .aside-title a:hover { color: var(--accent-dark); }
.widget-area .aside-posts .aside-date {
    color: var(--text-mute);
    font-size: 0.8em;
}

/* Mobile: sidebar stacks below content */
@media (max-width: 899px) {
    .widget-area {
        margin-top: 2em;
        padding-top: 2em;
        border-top: 1px solid var(--line);
    }
}

/* ---- Footer ---- */
.site-footer {
    text-align: center;
    padding: 3em 1em;
    margin-top: 4em;
    border-top: 1px solid var(--line);
    color: var(--text-mute);
    font-size: 0.9em;
    background: var(--bg-content);
}
.site-footer .site-socials {
    justify-content: center;
    margin: 1em 0;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
    body { font-size: 16px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.35em; }
    .main-navigation .menu { flex-direction: column; align-items: center; gap: 0; }
    .main-navigation .menu > li { padding: 0.4em 0; width: 100%; text-align: center; }
    .main-navigation .sub-menu {
        position: static;
        border: none;
        background: var(--bg);
        padding: 0;
    }
    .top-nav-inner { flex-direction: column; }
    .top-nav-inner .menu { flex-wrap: wrap; justify-content: center; }
    .alignleft, .alignright,
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        margin: 1.5em auto;
        max-width: 100%;
        display: block;
    }
}

/* ---- Print ---- */
@media print {
    .top-nav-wrapper,
    .main-navigation,
    .site-socials,
    .site-footer,
    .pagination,
    .breadcrumbs { display: none !important; }
    body {
        font-size: 12pt;
        background: #fff;
        color: #000;
    }
    a { color: #000; border-bottom: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
    .site-main { max-width: 100%; padding: 0; }
    .entry-content img { max-width: 100%; page-break-inside: avoid; }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
    p, blockquote, ul, ol { page-break-inside: avoid; }
}