/*
Theme Name: Jurnalist Pescari
Theme URI: https://pescari.net
Author: GitHub Copilot
Description: Lightweight editorial theme for fishing content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: jurnalist-editorial
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Reset & base ─────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--font-sans:  'Inter', system-ui, -apple-system, sans-serif;
--font-serif: 'DM Serif Display', Georgia, serif;

--white:   #ffffff;
--off:     #f0f4f8;
--border:  #c8d8e8;
--muted:   #7a92a8;
--dark:    #0a2236;
--body:    #1a3a52;
--accent:  #f59e0b;
--accent2: #0077b6;

--shell: min(1200px, calc(100vw - 40px));
--r: 6px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
font-family: var(--font-sans);
background: var(--white);
color: var(--body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--r); }

/* ─── Layout shell ────────────────────────────────────────── */
.shell {
width: var(--shell);
margin-inline: auto;
}

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}

.header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 14px 0;
}

.site-brand {
display: flex;
flex-direction: column;
gap: 1px;
flex-shrink: 0;
}

.brand-name {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--dark);
letter-spacing: -0.02em;
line-height: 1;
}

.brand-tagline {
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 400;
}

.header-search {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
background: var(--off);
}

.header-search input {
border: none;
background: transparent;
padding: 8px 16px;
font-size: .82rem;
font-family: var(--font-sans);
color: var(--dark);
width: 220px;
outline: none;
}

.header-search input::placeholder { color: var(--muted); }

.header-search button {
border: none;
background: var(--accent);
color: #fff;
padding: 8px 18px;
font-size: .78rem;
font-family: var(--font-sans);
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background .15s;
}

.header-search button:hover { background: #d4870a; }

.cat-nav {
display: flex;
gap: 4px;
padding: 8px 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-pill {
display: inline-block;
padding: 4px 13px;
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
color: var(--body);
background: var(--off);
border: 1px solid var(--border);
transition: background .12s, color .12s, border-color .12s;
}
.cat-pill:hover,
.cat-pill--active {
background: var(--dark);
color: var(--white);
border-color: var(--dark);
}

/* ─── Page shell ───────────────────────────────────────────── */
.page-wrap { padding-bottom: 80px; }

/* ─── Hero strip ───────────────────────────────────────────── */
.hero-strip {
border-top: 1px solid var(--dark);
border-bottom: 1px solid var(--dark);
padding: 0 0 36px;
text-align: center;
}

.hero-brand {
display: inline-flex;
align-items: baseline;
gap: 0;
margin-bottom: 14px;
}

.hero-jurnalist {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 18vw, 17rem);
font-weight: 400;
color: var(--dark);
line-height: 1;
letter-spacing: -0.02em;
}

.hero-dot {
font-family: var(--font-serif);
font-size: clamp(.8rem, 5.2vw, 4.8rem);
font-weight: 400;
color: var(--accent);
line-height: 1;
align-self: flex-end;
margin-bottom: .08em;
}

.hero-biz-word {
font-family: var(--font-serif);
font-size: clamp(.6rem, 2.6vw, 2.4rem);
font-weight: 400;
color: var(--dark);
letter-spacing: -0.02em;
line-height: 1;
align-self: flex-end;
margin-bottom: .15em;
}

.hero-tagline {
display: inline-block;
font-size: clamp(.85rem, 1.6vw, 1.35rem);
color: var(--muted);
max-width: none;
white-space: nowrap;
margin: 0 0 32px;
line-height: 1.5;
font-weight: 400;
border-top: 2px solid var(--accent);
padding-top: 10px;
}

.hero-cats {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding-top: 28px;
border-top: 1px solid var(--border);
}

.hero-cat-link {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
color: var(--body);
background: var(--off);
border: 1px solid var(--border);
transition: background .12s, color .12s, border-color .12s;
}

.hero-cat-link:hover {
background: var(--dark);
color: var(--white);
border-color: var(--dark);
}

/* ─── CU JUSTIȚIA PRIN ȚARĂ — tricolor românesc ─────────────── */
.hero-cat-link--tricolor {
  background: linear-gradient(90deg, #002B7F 33.33%, #FCD116 33.33% 66.66%, #CE1126 66.66%);
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.hero-cat-link--tricolor:hover {
  background: linear-gradient(90deg, #001e5c 33.33%, #e0b800 33.33% 66.66%, #a50e1e 66.66%);
  color: #fff;
  border-color: transparent;
}

/* ─── Section head ─────────────────────────────────────────── */
.sec-head {
display: flex;
align-items: baseline;
gap: 14px;
margin: 44px 0 24px;
border-bottom: 2px solid var(--dark);
padding-bottom: 10px;
}

.sec-head--bar {
align-items: center;
justify-content: space-between;
}

.sec-head-left {
display: flex;
align-items: baseline;
gap: 14px;
}

.sec-head h2 {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 400;
color: var(--dark);
letter-spacing: -.02em;
}

.sec-badge {
font-size: .65rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
background: var(--accent);
color: #fff;
padding: 3px 9px;
border-radius: 3px;
}

/* ─── Article of the Week card ────────────────────────── */
.aow-card {
display: block;
position: relative;
border-radius: var(--r);
overflow: hidden;
margin-bottom: 12px;
}

.aow-img {
position: relative;
width: 100%;
aspect-ratio: 16/7;
background: var(--dark) center/cover no-repeat;
}

.aow-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
  to right,
  rgba(0,0,0,0.08) 0%,
  rgba(0,0,0,0.35) 40%,
  rgba(0,0,0,0.78) 100%
);
}

.aow-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding: clamp(16px, 4vw, 48px);
text-align: right;
gap: clamp(6px, 1.2vw, 14px);
}

.aow-cat {
font-size: clamp(.6rem, 1.1vw, .72rem);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: var(--accent);
padding: 4px 12px;
border-radius: 999px;
}

.aow-title {
font-family: var(--font-serif);
font-size: clamp(1.3rem, 3.8vw, 3rem);
font-weight: 400;
line-height: 1.15;
letter-spacing: -.025em;
color: #f0f0ec;
text-shadow: 0 2px 18px rgba(0,0,0,.55);
max-width: min(720px, 75%);
}

.aow-cta {
font-size: clamp(.7rem, 1.1vw, .82rem);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
border-bottom: 1px solid rgba(255,255,255,.4);
padding-bottom: 2px;
transition: color .15s, border-color .15s;
}

.aow-card:hover .aow-cta {
color: #fff;
border-color: rgba(255,255,255,.9);
}

.img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8e8e5 0%, #d0d0cc 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
}

.post-read {
font-size: .72rem;
color: var(--muted);
font-weight: 500;
letter-spacing: .04em;
}

.post-cat a {
font-size: .68rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 2px solid var(--accent);
padding-bottom: 2px;
}
.post-cat a:hover { color: var(--dark); border-color: var(--dark); }

/* ─── Post grid ────────────────────────────────────────────── */
.post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 24px;
}

.post-card {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
background: var(--white);
transition: box-shadow .2s, transform .2s;
}

.post-card:hover {
box-shadow: 0 6px 24px rgba(0,0,0,.09);
transform: translateY(-2px);
}

.card-img {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--off);
}

.card-img img { width: 100%; height: 100%; object-fit: cover; }

.card-body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}

.card-body h3 {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 400;
color: var(--dark);
line-height: 1.3;
letter-spacing: -.01em;
}

.card-body h3 a:hover { color: var(--accent); }

.card-excerpt {
font-size: .82rem;
color: var(--muted);
line-height: 1.55;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* ─── Category strip on homepage ───────────────────────────── */
.cat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 20px;
}

.cat-block {
border: 1px solid var(--border);
border-radius: var(--r);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--off);
transition: background .15s, border-color .15s;
}

.cat-block:hover { background: var(--dark); border-color: var(--dark); }
.cat-block:hover .cat-block-name { color: var(--white); }
.cat-block:hover .cat-block-desc { color: rgba(255,255,255,.55); }

.cat-block-icon { font-size: 1.4rem; line-height: 1; }
.cat-block-name {
font-size: .9rem;
font-weight: 700;
color: var(--dark);
letter-spacing: -.01em;
}
.cat-block-desc {
font-size: .75rem;
color: var(--muted);
line-height: 1.45;
}

/* ─── Pagination ────────────────────────────────────────────── */
.pagination {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 48px;
}

.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: var(--r);
font-size: .82rem;
font-weight: 600;
color: var(--body);
transition: background .15s, color .15s, border-color .15s;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
background: var(--dark);
color: var(--white);
border-color: var(--dark);
}

.pagination .page-numbers.dots {
background: transparent;
border: none;
color: var(--muted);
}

.pagination .next,
.pagination .prev {
width: auto;
padding: 0 16px;
}

/* ─── Single article ────────────────────────────────────────── */
.single-wrap {
display: grid;
grid-template-columns: 1fr min(820px, 100%) 1fr;
padding: 48px 0 80px;
}

.single-wrap > * { grid-column: 2; }

.single-kicker {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}

.single-cat a {
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 2px solid var(--accent);
padding-bottom: 2px;
}

.single-cat a:hover { color: var(--dark); border-color: var(--dark); }

.single-meta {
font-size: .72rem;
color: var(--muted);
font-weight: 500;
letter-spacing: .04em;
}

.single-title {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: clamp(1.9rem, 4vw, 2.9rem);
font-weight: 400;
color: var(--dark);
line-height: 1.15;
letter-spacing: -.035em;
margin-bottom: 18px;
}

.single-excerpt {
font-size: 1.12rem;
color: var(--muted);
line-height: 1.65;
border-left: 3px solid var(--accent);
padding-left: 18px;
margin-bottom: 28px;
font-style: italic;
}

.single-thumb {
margin-bottom: 36px;
border-radius: var(--r);
overflow: hidden;
}

.single-thumb img { width: 100%; }

.single-content {
font-size: 1.05rem;
line-height: 1.65;
color: var(--body);
text-align: justify;
}

/* H1 din continutul generat de AI — ascuns, titlul real e .single-title */
.single-content h1 {
display: none;
}

.single-content h2 {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 400;
color: var(--dark);
margin-top: 1.6em;
margin-bottom: .5em;
letter-spacing: -.02em;
}

.single-content h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
color: var(--dark);
margin-top: 1.3em;
margin-bottom: .4em;
letter-spacing: -.01em;
}

.single-content h4,
.single-content h5,
.single-content h6 {
font-family: var(--font-serif);
font-weight: 400;
color: var(--dark);
margin-top: 1.1em;
margin-bottom: .35em;
}

.single-content p { margin-bottom: .9em; }

.single-content ul,
.single-content ol {
padding-left: 1.6em;
margin-bottom: 1.4em;
}

.single-content li { margin-bottom: .5em; }

.single-content strong { color: var(--dark); font-weight: 700; }

.single-content a {
color: var(--accent2);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}

.single-content a:hover { color: var(--accent); }

.single-content blockquote {
border-left: 3px solid var(--border);
padding-left: 20px;
margin: 2em 0;
color: var(--muted);
font-style: italic;
}

.single-divider {
border: none;
border-top: 1px solid var(--border);
margin: 48px 0;
}

/* ─── Related articles ──────────────────────────────────────── */
.related-section {
padding: 0 0 80px;
}

.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.related-card {
border: 1px solid var(--border);
border-radius: var(--r);
padding: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
background: var(--white);
transition: box-shadow .2s;
}

.related-card__body {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}

.related-card__thumb {
flex: 0 0 90px;
width: 90px;
align-self: flex-start;
border-radius: calc(var(--r) - 4px);
overflow: hidden;
margin-top: 4px;
}

.related-card__thumb img {
display: block;
width: 100%;
height: 90px;
object-fit: cover;
}

.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.related-card h3 {
font-family: var(--font-serif);
font-size: .97rem;
font-weight: 400;
color: var(--dark);
line-height: 1.3;
letter-spacing: -.01em;
}

.related-card h3 a:hover { color: var(--accent); }

.related-card p {
font-size: .8rem;
color: var(--muted);
line-height: 1.5;
}

/* ─── Archive / Category page ───────────────────────────────── */
.archive-head {
padding: 40px 0 28px;
border-bottom: 3px solid var(--dark);
margin-bottom: 36px;
}

.archive-kicker {
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}

.archive-head h1 {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 400;
color: var(--dark);
letter-spacing: -.03em;
}

.archive-desc {
margin-top: 10px;
font-size: .9rem;
color: var(--muted);
max-width: 600px;
}

/* ─── Search page ───────────────────────────────────────────── */
.search-head {
padding: 40px 0 28px;
border-bottom: 3px solid var(--dark);
margin-bottom: 36px;
}

.search-head h1 {
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 400;
color: var(--dark);
}

.search-head span {
color: var(--accent);
}

/* ─── Footer ────────────────────────────────────────────────── */
.site-footer {
background: var(--dark);
color: rgba(255,255,255,.5);
border-top: 1px solid rgba(255,255,255,.06);
}

.footer-inner {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 48px;
padding: 52px 0 40px;
}

.footer-brand-name {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
color: var(--white);
line-height: 1;
margin-bottom: 10px;
}

.footer-tagline {
font-size: .8rem;
line-height: 1.55;
color: rgba(255,255,255,.4);
}

.footer-group h4 {
font-size: .65rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-bottom: 14px;
}

.footer-group ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}

.footer-group ul li a {
font-size: .83rem;
color: rgba(255,255,255,.55);
transition: color .12s;
}

.footer-group ul li a:hover { color: var(--white); }

.footer-bar {
border-top: 1px solid rgba(255,255,255,.07);
padding: 16px 0;
font-size: .74rem;
color: rgba(255,255,255,.3);
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
align-items: center;
}

.footer-credit {
color: rgba(255,255,255,.22);
}

.footer-credit a {
color: rgba(255,255,255,.4);
text-decoration: none;
transition: color .15s;
}

.footer-credit a:hover {
color: var(--accent);
}

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


/* ─── Inner header (paginile interioare) ───────────────────── */
.inner-header {
border-bottom: none;
}

.inner-brand-name {
position: relative;
font-size: 1.4rem;
padding-bottom: 6px;
}

.inner-brand-name::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: var(--accent);
border-radius: 2px;
}

/* ─── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
position: sticky;
top: 57px;
z-index: 99;
background: var(--white);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 14px 0;
font-size: .78rem;
color: var(--muted);
border-bottom: 1px solid var(--border);
margin-bottom: 32px;
}

.breadcrumb-home,
.breadcrumb-cat {
color: var(--muted);
font-weight: 500;
transition: color .12s;
}

.breadcrumb-home:hover,
.breadcrumb-cat:hover {
color: var(--accent);
}

.breadcrumb-sep {
color: var(--border);
font-size: .7rem;
}

.breadcrumb-current {
color: var(--dark);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.post-grid { grid-template-columns: repeat(2, 1fr); }
.cat-row { grid-template-columns: repeat(2, 1fr); }
.footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
.aow-img { aspect-ratio: 16/8; }
.aow-title { max-width: 90%; }
.hero-cats { gap: 6px; }
.header-search input { width: 150px; }
.single-wrap { padding: 32px 0 60px; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
:root { --shell: calc(100vw - 32px); }
.hero-tagline { white-space: normal; font-size: .85rem; max-width: 100%; }
.hero-strip { padding-bottom: 24px; }
.post-grid { grid-template-columns: 1fr; }
.aow-img { aspect-ratio: 4/3; }
.aow-title { font-size: clamp(1.1rem, 6vw, 1.6rem); max-width: 100%; }
.aow-content { align-items: flex-start; text-align: left; }
.aow-overlay { background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 60%, transparent 100%); }
.cat-row { grid-template-columns: repeat(2, 1fr); }
.header-top { flex-wrap: wrap; }
.header-search { width: 100%; }
.header-search input { flex: 1; width: auto; }
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
.related-grid { grid-template-columns: 1fr; }
}