/*
Theme Name: Cobalt Extract
Theme URI: 
Author: Theme Studio
Author URI: 
Description: A custom WordPress theme.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cobalt-extract
Tags: blog, custom-menu, featured-images, one-column, two-columns
*/

:root {
    --oe1-primary: #4c1717;
    --oe1-accent: #626262;
    --oe1-bg: #fbfbfb;
    --oe1-bg-alt: #ffffff;
    --oe1-text: #0a0a0a;
    --oe1-text-light: #3d3d3d;
    --oe1-text-heading: #434242;
    --oe1-font-h: 'Alegreya', Georgia, serif;
    --oe1-font-b: 'Cabin', system-ui, sans-serif;
    --oe1-radius: 6px;
    --oe1-max-w: 1200px;
    --oe1-gap: 24px;
    --oe1-section-pad: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--oe1-font-b); color: var(--oe1-text); background: var(--oe1-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--oe1-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--oe1-primary); }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 { font-family: var(--oe1-font-h); color: var(--oe1-text-heading); line-height: 1.25; }

.oe1-wrap { max-width: var(--oe1-max-w); margin: 0 auto; padding: 0 24px; }

/* WordPress nav menu list item reset */
.oe1-nav li,.oe1-sidebar-links li,.oe1-cat-bar li { list-style: none; }
.oe1-nav ul { display: contents; list-style: none; padding: 0; margin: 0; }

.oe1-header { background: var(--oe1-bg); padding: 28px 0 0; text-align: center; border-bottom: 1px solid #e0e0e0; }
.oe1-logo { margin-bottom: 12px; }
.oe1-logo a { font-family: var(--oe1-font-h); font-size: 1.8rem; font-weight: 700; color: var(--oe1-text-heading); }
.oe1-tagline { font-size: .8rem; color: var(--oe1-text-light); margin-bottom: 16px; }
.oe1-nav { display: flex; justify-content: center; gap: 32px; padding: 12px 0; }
.oe1-nav a { font-family: var(--oe1-font-b); font-size: .85rem; font-weight: 500; color: var(--oe1-text-light); text-transform: uppercase; letter-spacing: .8px; }
.oe1-nav a:hover { color: var(--oe1-accent); }
.oe1-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.oe1-burger span { display: block; width: 22px; height: 2px; background: var(--oe1-text); margin: 5px 0; transition: .3s; }

.oe1-mosaic-top { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 2px; }
.oe1-mosaic-main { grid-row: span 2; position: relative; overflow: hidden; min-height: 480px; }
.oe1-mosaic-main img,.oe1-mosaic-side img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.oe1-mosaic-main:hover img,.oe1-mosaic-side:hover img { transform: scale(1.03); }
.oe1-mosaic-side { position: relative; overflow: hidden; min-height: 238px; }
.oe1-mosaic-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; }
.oe1-mosaic-overlay .oe1-m-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--oe1-accent); margin-bottom: 6px; }
.oe1-mosaic-overlay h2,.oe1-mosaic-overlay h3 { color: #fff; }
.oe1-mosaic-main .oe1-mosaic-overlay h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
.oe1-mosaic-side .oe1-mosaic-overlay h3 { font-size: 1rem; }
.oe1-mosaic-overlay .oe1-m-meta { font-size: .78rem; opacity: .7; margin-top: 6px; }

.oe1-section { padding: var(--oe1-section-pad) 24px; }
.oe1-section-inner { max-width: var(--oe1-max-w); margin: 0 auto; }
.oe1-section-title { font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin-bottom: 8px; }
.oe1-section-sub { font-size: .9rem; color: var(--oe1-text-light); margin-bottom: 32px; }

.oe1-main-layout { max-width: var(--oe1-max-w); margin: 0 auto; padding: var(--oe1-section-pad) 24px; display: grid; grid-template-columns: 1fr 340px; gap: 40px; }

.oe1-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--oe1-gap); }
.oe1-card { background: var(--oe1-bg-alt); border-radius: var(--oe1-radius); overflow: hidden; transition: transform .2s, box-shadow .2s; border: 1px solid #eee; }
.oe1-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.oe1-card-thumb { overflow: hidden; aspect-ratio: 16/10; }
.oe1-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.oe1-card:hover .oe1-card-thumb img { transform: scale(1.05); }
.oe1-card-body { padding: 20px; }
.oe1-card-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--oe1-accent); margin-bottom: 8px; }
.oe1-card h3 { font-size: 1.05rem; margin-bottom: 8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oe1-card h3 a { color: var(--oe1-text-heading); }
.oe1-card h3 a:hover { color: var(--oe1-accent); }
.oe1-card-meta { font-size: .78rem; color: var(--oe1-text-light); }
.oe1-card-excerpt { font-size: .88rem; color: var(--oe1-text-light); margin-top: 8px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.oe1-sidebar { }
.oe1-widget { background: var(--oe1-bg-alt); border-radius: var(--oe1-radius); padding: 24px; margin-bottom: 24px; border: 1px solid #eee; }
.oe1-widget-title { font-family: var(--oe1-font-h); font-size: 1rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--oe1-accent); }
.oe1-widget ul { list-style: none; }
.oe1-widget li { padding: 8px 0; border-bottom: 1px solid #eee; font-size: .88rem; }
.oe1-widget li:last-child { border-bottom: none; }
.oe1-widget li a { color: var(--oe1-text); }
.oe1-widget li a:hover { color: var(--oe1-accent); }

.oe1-footer { background: #4c1717; color: rgba(255,255,255,.75); padding: 60px 24px 0; }
.oe1-footer-inner { max-width: var(--oe1-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 24px; }
.oe1-footer h4 { color: #fff; font-family: var(--oe1-font-h); font-size: .95rem; margin-bottom: 16px; }
.oe1-footer ul { list-style: none; }
.oe1-footer li { padding: 4px 0; font-size: .85rem; }
.oe1-footer a { color: rgba(255,255,255,.65); }
.oe1-footer a:hover { color: #fff; }
.oe1-footer ul { list-style: none; padding: 0; margin: 0; }
.oe1-footer li { margin-bottom: 8px; }
.oe1-footer li a { font-size: .88rem; }
.oe1-footer p { font-size: .85rem; line-height: 1.6; }
.oe1-footer-bottom { max-width: var(--oe1-max-w); margin: 40px auto 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: .78rem; color: rgba(255,255,255,.4); }

.oe1-single { max-width: 780px; margin: 0 auto; padding: 48px 24px 80px; }
.oe1-single-header { margin-bottom: 32px; }
.oe1-single-cat { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--oe1-accent); margin-bottom: 12px; }
.oe1-single-header h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 12px; }
.oe1-single-meta { font-size: .85rem; color: var(--oe1-text-light); }
.oe1-single-thumb { border-radius: var(--oe1-radius); overflow: hidden; margin-bottom: 32px; }
.oe1-single-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.oe1-single-content { font-size: 1.05rem; line-height: 1.85; }
.oe1-single-content p { margin-bottom: 1.5em; }
.oe1-single-content h2 { font-size: 1.5rem; margin: 2em 0 .8em; }
.oe1-single-content h3 { font-size: 1.2rem; margin: 1.8em 0 .6em; }
.oe1-single-content blockquote { border-left: 4px solid var(--oe1-accent); padding: 16px 24px; margin: 1.5em 0; background: var(--oe1-bg-alt); border-radius: 0 var(--oe1-radius) var(--oe1-radius) 0; font-style: italic; }
.oe1-single-content img { border-radius: var(--oe1-radius); margin: 1.5em 0; }
.oe1-single-content ul,.oe1-single-content ol { margin: 1em 0; padding-left: 1.5em; }
.oe1-single-content li { margin-bottom: .5em; }
.oe1-post-nav { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 28px; border-top: 1px solid #e0e0e0; }
.oe1-post-nav a { font-size: .88rem; color: var(--oe1-accent); font-weight: 500; }
.oe1-related { margin: 48px 0 0; padding: 0; }
.oe1-related-title { font-family: var(--oe1-font-h); font-size: 1.4rem; margin-bottom: 24px; color: var(--oe1-heading); }
.oe1-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.oe1-related-card { display: block; text-decoration: none; color: inherit; background: var(--oe1-bg-alt); border-radius: var(--oe1-radius); overflow: hidden; transition: transform .2s, box-shadow .2s; border: 1px solid #e8e8e8; }
.oe1-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.oe1-related-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.oe1-related-placeholder { width: 100%; aspect-ratio: 16/10; background: var(--oe1-accent); opacity: .15; }
.oe1-related-info { padding: 14px 16px; }
.oe1-related-info h3 { font-family: var(--oe1-font-h); font-size: .92rem; margin: 0 0 6px; color: var(--oe1-heading); line-height: 1.35; }
.oe1-related-date { font-size: .78rem; color: var(--oe1-muted); }

.oe1-glass { background: rgba(255,255,255,.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); }

.oe1-card { background: transparent; border: 2px solid #e0e0e0; }
.oe1-card:hover { border-color: var(--oe1-accent); }

@media (max-width: 768px) {
    
    .oe1-burger { display: block; }
    .oe1-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--oe1-bg); border-bottom: 1px solid #e0e0e0; padding: 16px 24px; flex-direction: column; gap: 12px; z-index: 99; }
    .oe1-nav.oe1-open { display: flex; }
    
    
    .oe1-mosaic-top { grid-template-columns: 1fr; }
    .oe1-mosaic-main { grid-row: span 1; min-height: 280px; }
    
    .oe1-card-grid,.oe1-mosaic-grid { grid-template-columns: 1fr !important; }
    .oe1-mosaic-grid .oe1-card:first-child { grid-column: span 1; }
    
    .oe1-main-layout { grid-template-columns: 1fr; }
    
    
    
    
    .oe1-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .oe1-related-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .oe1-nav a { color: var(--oe1-text-light); }
}