/* Elva Elu. by Elixir
/* ========== Theme tokens (colors, fonts, sizing) ========== */
:root { 
	--ee-bg: #f5f1e8; 
	--ee-text: #222; 
	--ee-ink: #000; 
	--ee-link: #333; 
	--ee-link-underline: rgba(0,0,0,.25); 
	--ee-link-underline-hover: rgba(0,0,0,.6); 
	--ee-dash: rgba(0,0,0,.35);
	--ee-weather-bg: #d8eee2;	
	--ee-weather-text: #222;	
    --ee-muted: #2b323c;
    --ee-muted-text: #e9e6df;
	--ee-accent: #3a6078; 
	--ee-white: #fff;
	--ee-font-body: "Lora", serif; 
	--ee-font-head: "Poppins", sans-serif; 
	--ee-radius: .25rem; 
	--ee-icon-wght: 300; 
	--ee-icon-opsz: 20; 
    --ee-font-scale: 1;
}

/* ===== Dark mode overrides (just tokens) ===== */
html.ee-dark {
    --ee-bg: #222;
    --ee-text: #f5f1e8;
    --ee-ink: #f5f1e8;

    --ee-link: #f1eee6;
    --ee-link-underline: rgba(255,255,255,.25);
    --ee-link-underline-hover: rgba(255,255,255,.6);

    --ee-dash: #777;
	
	--ee-weather-bg: #d8eee2;
	--ee-weather-text: #222;

    --ee-accent: #9cc3dd;
    --ee-white: #2b323c;
}

/* ===== Large text toggle ===== */
html.ee-text-lg {
    --ee-font-scale: 1.25; /* ~20px base */
}

/* ========== Base / typography ========== */
html { font-size: calc(16px * var(--ee-font-scale)); }
body { background-color: var(--ee-bg); color: var(--ee-text); line-height: 1.7; font-family: var(--ee-font-body); font-weight: 400; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ee-font-head); font-weight: 700; }

/* ========== Links ========== */
a { color: var(--ee-link); text-decoration-color: var(--ee-link-underline); text-underline-offset: .15em; }
a:hover { color: var(--ee-ink); text-decoration-color: var(--ee-link-underline-hover); }

/* ========== Global utilities ========== */
hr { border: 0; border-top: 1px dashed var(--ee-dash); margin: 2rem 0; opacity:1;}
.ee-hr { border-bottom: 1px dashed var(--ee-dash); }
.ee-footer-hr {border-bottom: 1px dashed #777;}
.ee-hr-double { border-bottom: 3px solid var(--ee-ink); }
.ee-full-border { border: 1px solid var(--ee-ink); }
.wp-element-caption {color:var(--ee-ink);}

/* ========== Header / topbar ========== */
.elvaelu-logo { width: 350px; }
.elvaelu-logo-footer { width: 250px; }
.ee-logo-dark { display: none; }
html.ee-dark .ee-logo-light { display: none; }
html.ee-dark .ee-logo-dark { display: block; }

.ee-pagetop { background-color: var(--ee-ink); color: var(--ee-white); font-family: var(--ee-font-head); font-weight: 400; }
.ee-pagetop a { color: var(--ee-white); }

/* ========== Navbar (desktop + shared) ========== */
.ee-navbar { border-top: 4px solid var(--ee-ink); border-bottom: 1px solid var(--ee-ink); padding-top: .5rem; padding-bottom: .5rem; gap: 1.4rem; width: 100%; font-family: var(--ee-font-head); }
.ee-navbar .nav-link { color: var(--ee-ink); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; padding: 0; margin: 0; white-space: nowrap; font-weight: 700; }
.ee-navbar .nav-link:hover {
    color: var(--ee-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ee-navbar .dropdown-menu a {color: var(--ee-ink);}
/* underline only the top-level link (dropdown toggle / normal link) */
.ee-navbar .nav-item.active > a.nav-link {
    color: var(--ee-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ee-navbar .dropdown-menu li.active > a.dropdown-item {
    color: var(--ee-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Navbar: toggler buttons (mobile) */
.ee-nav-toggler { border: 0; display: flex; align-items: center; gap: .4rem; font-family: var(--ee-font-head); font-weight: 600; color: var(--ee-ink); background: none; }
.ee-nav-toggler:focus { box-shadow: none; }
.ee-nav-toggler .material-symbols-outlined { font-size: 26px; line-height: 1; }
.ee-nav-toggler-label { letter-spacing: .04em; text-transform: uppercase; font-size: 1rem; }
.ee-navbar-mobile { font-family: var(--ee-font-head); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }

/* Navbar: dropdowns */
.ee-dropdown-menu { border: 1px solid var(--ee-ink); font-size: .85rem; text-transform: uppercase; background-color: var(--ee-bg); }
.ee-dropdown-menu .dropdown-item { font-weight: 700; }
.ee-dropdown-menu .dropdown-item:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }

/* ========== Post cards / thumbs / meta ========== */
.ee-thumb-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ee-post-title { color: var(--ee-link); text-decoration-color: var(--ee-link-underline); text-underline-offset: .15em; }
article:hover .ee-post-title { color: var(--ee-ink); text-decoration-color: var(--ee-link-underline-hover); }
.ee-post-category { font-family: var(--ee-font-head); text-transform: uppercase; font-weight: 500; font-size: .8rem; letter-spacing: .08em; color: var(--ee-accent); }

/* Entry header/meta */
.entry-header { border-bottom: 1px dashed var(--ee-dash); padding-bottom: 1rem; }
.entry-meta, .entry-header .small { font-family: var(--ee-font-head); font-weight: 400; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }

/* Hero media (IMPORTANT: prevent stretched images) */
.ee-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ee-hero-thumb img.ee-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ========== Entry content (single) ========== */
.entry-content p { margin-bottom: .75rem; text-align: justify; hyphens: auto; }
.entry-content p:first-of-type {font-weight:700; text-indent: 1.5em; }
.entry-content img { border-radius: var(--ee-radius); }
.entry-content .wp-block-gallery img { margin: 0; }

/* Blockquote */
.entry-content blockquote { position: relative; margin: 2rem 0; padding: 2rem 2.5rem 2rem 3.5rem; background: var(--ee-muted); border-left: none; line-height: 1.6; color: var(--ee-muted-text); border-radius: var(--ee-radius); }
.entry-content blockquote::before { content: "“"; position: absolute; top: .5rem; left: 1rem; font-family: var(--ee-font-head); font-size: 5rem; line-height: 1; font-weight: 700; color: var(--ee-muted-text); pointer-events: none; }
.entry-content blockquote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .9rem; opacity: .7; }

/* Category badges inside content */
.entry-categories .badge { display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: .65rem; padding: .25rem .6rem; background-color: transparent; color: var(--ee-ink); border: 1px solid var(--ee-ink); border-radius: 4px; }
.entry-categories .badge:hover, .entry-categories .badge.active { background-color: var(--ee-ink); color: var(--ee-bg); border-color: var(--ee-ink); text-decoration: none; }

/* ========== Buttons / badges (editorial style) ========== */
.btn, .badge { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; border-radius: 0; border: 1px solid var(--ee-ink); background-color: transparent; color: var(--ee-ink); padding: .4rem .9rem; }
.btn-primary { background-color: var(--ee-ink); border-color: var(--ee-ink); color: var(--ee-bg); }
.btn-primary:hover, .btn-primary:active { background-color: var(--ee-bg) !important; border-color: var(--ee-ink) !important; color: var(--ee-ink) !important; }
.btn-secondary { background-color: transparent; border-color: var(--ee-ink); color: var(--ee-ink); }
.btn-secondary:hover, .btn-secondary:active { background-color: var(--ee-ink) !important; color: var(--ee-bg) !important; }


/* ========== Modals (search/menu) ========== */
.ee-modal { background-color: var(--ee-bg); color: var(--ee-text); }
.ee-search-hero { border-bottom: 2px solid var(--ee-ink); padding-bottom: .75rem; max-width: 100%; }
.ee-search-input { border: 0; outline: none; box-shadow: none; background: transparent; font-size: clamp(1.4rem, 4vw, 2.4rem); line-height: 1.3; padding: 0; color: var(--ee-ink); }
.ee-search-input::placeholder { color: var(--ee-ink); opacity: .9; }
.ee-search-submit { border: 0; background: transparent; padding: 0; color: var(--ee-ink); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ee-search-submit .material-symbols-outlined { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
.ee-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ee-search-input:focus, .ee-search-submit:focus { outline: none; box-shadow: none; }

/* ========== Sidebar / thumbs / separators ========== */
.ee-weather {font-family: var(--ee-font-head); }
.ee-weather-card {background: var(--ee-weather-bg); color:var(--ee-weather-text);}
.ee-sidebar-blast { border: 2px solid var(--ee-ink);  }
.ee-sidebar-blast-head {background:var(--ee-ink); color:var(--ee-white); font-family: var(--ee-font-head);}
.ee-blast-img {
    filter:
        grayscale(100%)
        contrast(115%)
        brightness(92%)
        sepia(18%)
        saturate(60%);
}

/* subtle print wear */
.ee-blast-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.04) 0px,
            rgba(0,0,0,0.04) 1px,
            transparent 1px,
            transparent 3px
        );
}
.ee-blast-wrap {
    position: relative;
    overflow: hidden;
}


.ee-event-thumb { width: 100px; height: 100px; overflow: hidden; }
.ee-event-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ee-recent-separator { border-bottom: 1px dashed var(--ee-dash); }
.ee-recent-separator:last-child { display: none; }

/* ========== Classifieds ========== */
.form-label, legend {font-family: var(--ee-font-head);}
.ee-obituaries {border: 5px solid var(--ee-ink); border-radius:0;}
.ee-hr-obituary-up {border-top: 1px solid var(--ee-ink); border-bottom: 5px solid var(--ee-ink); height: 12px;}
.ee-hr-obituary-down {border-top: 5px solid var(--ee-ink); border-bottom: 1px solid var(--ee-ink); height: 12px;}


/* ========== API provider renders ========== */
.ee-cls-card {background: var(--ee-white); color:var(--ee-ink);}
.ee-job-card-header { background:var(--ee-white); border-bottom:1px dashed rgba(0,0,0,.15); }
.ee-job-card-logo { max-height:100px; max-width:100%; object-fit:contain; display:block; margin:0 auto; }
.ee-job-card-body { background:transparent; }

/* ========== Categories collapse (sidebar) ========== */
.ee-cat-link { color: inherit; }
.ee-cat-toggle .material-symbols-outlined { display: inline-block; transition: transform .15s ease; transform: translateY(-1px); }
.ee-cat-toggle[aria-expanded="true"] .material-symbols-outlined { transform: rotate(90deg) translateY(-1px); }
.ee-cat-toggle-spacer { width: 24px; display: inline-block; }

/* ========== Material Symbols tuning ========== */
.material-symbols-outlined.ee-icon { font-size: 1.5rem; line-height: 1; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; margin-right: 0; font-variation-settings: "FILL" 0, "wght" var(--ee-icon-wght), "GRAD" 0, "opsz" var(--ee-icon-opsz); }
.material-symbols-outlined.ee-icon-small { font-size: 1.2rem; }
.material-symbols-outlined.ee-icon-lg { font-size: 2rem; }
.material-symbols-outlined.ee-icon-accent { color: var(--ee-accent); }
.material-symbols-outlined.ee-icon-search { font-size: 1.8rem; color: var(--ee-ink); }
.ee-icon-btn { color: inherit; text-decoration: none; border: 0; background: transparent; line-height: 1; }
.ee-icon-btn:focus { box-shadow: none; }

/* ========== Footer ========== */
.ee-footer { background: var(--ee-muted); color: var(--ee-muted-text); }
.ee-footer a, .ee-footer-copy { color: var(--ee-muted-text) !important; text-decoration: none; font-family: var(--ee-font-head);}
.ee-footer a:hover { text-decoration: underline; }

/* ========== Bootstrap ratio helpers ========== */
.ratio-3x2 { --bs-aspect-ratio: 66.6667%; }

/* ========== Masonry ========== */
.ee-masonry { margin-left: -1.5rem; top:-0.5rem;}
.ee-masonry-item, .ee-grid-sizer { padding-left: 1.5rem; margin-bottom: 1.5rem; width: 33%; }
.ee-masonry-item.is-featured { width: 66%; } 
.ee-masonry-item.is-featured .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }

/* ========== Viewport rules (end) ========== */
/* Large screens */
@media (max-width: 991px) { 
	.ee-grid-sizer { width: 50%; } 
	.ee-masonry-item { width: 50%; } 
	.ee-masonry-item.is-featured { width: 50%; } 
}

/* Smaller devices (put max-width rules at the very end) */
@media (max-width: 575.98px) { 
	.elvaelu-logo { width: 80%; } 
}