/*
Theme Name: Roditeljski Portal
Theme URI: https://example.com
Author: Vaš sajt
Description: Lagana, samostalna tema za porodični/roditeljski portal. Naslovna sa istaknutim člankom, kategorijama i bočnom trakom. Bez ijedne zavisnosti od page builder-a — sav sadržaj se uređuje kroz standardni WordPress admin (Članci, Kategorije, Meniji, Widgeti, Customizer).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rp
*/

/* =========================================================
   0. TOKENI (boje, tipografija, razmaci)
   ========================================================= */
:root{
	/* Paleta: topla, "porodična" ali ne kliše krem/terakota.
	   Duboko bobičasto ljubičasta kao nosilac identiteta,
	   kajsija kao topla protivteža, kadulja kao treći, mirniji akcenat. */
	--rp-accent: #7a3b63;        /* bobičasto ljubičasta - primarni akcenat */
	--rp-accent-dark: #5c2a4a;
	--rp-apricot: #e08a4f;       /* kajsija - sekundarni akcenat / oznake */
	--rp-sage: #6f8f6a;          /* kadulja - treći, tihi akcenat */
	--rp-bg: #fbf7f6;            /* toplo bela pozadina */
	--rp-bg-alt: #f3ece9;
	--rp-ink: #2b2430;           /* skoro crna, sa ljubičastim podtonom */
	--rp-ink-soft: #6b6069;
	--rp-line: #e8dfda;
	--rp-white: #ffffff;

	--rp-font-display: "Fraunces", Georgia, serif;
	--rp-font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--rp-radius: 14px;
	--rp-radius-sm: 8px;
	--rp-shadow: 0 6px 24px rgba(43, 36, 48, 0.08);
	--rp-container: 1200px;
}

/* =========================================================
   1. RESET / OSNOVA
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--rp-bg);
	color: var(--rp-ink);
	font-family: var(--rp-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{
	font-family: var(--rp-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
:focus-visible{ outline: 3px solid var(--rp-apricot); outline-offset: 2px; }

.rp-container{
	max-width: var(--rp-container);
	margin: 0 auto;
	padding: 0 24px;
}
.rp-visually-hidden{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}
.rp-skip-link{
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--rp-accent);
	color: #fff;
	padding: 12px 18px;
	z-index: 999;
	border-radius: 0 0 8px 0;
}
.rp-skip-link:focus{ left: 0; }

/* =========================================================
   2. SIGNATURE DETALJ: "traka" oznaka kategorije
   Podseća na zakačenu etiketu/traku iz sveske - dosledno
   korišćena za sve kategorije kroz sajt.
   ========================================================= */
.rp-tag{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--rp-font-body);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rp-accent);
	background: #fff;
	border: 1.5px dashed var(--rp-accent);
	border-radius: 999px;
	padding: 5px 14px 5px 12px;
}
.rp-tag::before{
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--rp-apricot);
	flex: none;
}
.rp-tag--on-dark{
	background: rgba(255,255,255,.12);
	color: #fff;
	border-color: rgba(255,255,255,.55);
}
.rp-tag--on-dark::before{ background: #fff; }

/* =========================================================
   3. ZAGLAVLJE
   ========================================================= */
.rp-header{
	background: var(--rp-white);
	border-bottom: 1px solid var(--rp-line);
	position: sticky;
	top: 0;
	z-index: 50;
}
.rp-header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 24px;
}
.rp-logo{
	font-family: var(--rp-font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--rp-accent);
	white-space: nowrap;
}
.rp-logo img{ max-height: 46px; width: auto; }

.rp-nav{ display: flex; align-items: center; gap: 28px; }
.rp-menu{ display: flex; gap: 22px; }
.rp-menu a{
	font-weight: 600;
	font-size: 15px;
	padding: 8px 2px;
	position: relative;
}
.rp-menu a::after{
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: var(--rp-apricot);
	transform: scaleX(0);
	transition: transform .18s ease;
}
.rp-menu a:hover::after,
.rp-menu .current-menu-item > a::after{ transform: scaleX(1); }
.rp-menu .menu-item-has-children{ position: relative; }
.rp-menu .sub-menu{
	position: absolute; top: 100%; left: 0;
	background: #fff;
	border: 1px solid var(--rp-line);
	border-radius: var(--rp-radius-sm);
	box-shadow: var(--rp-shadow);
	min-width: 200px;
	padding: 8px;
	opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: all .15s ease;
}
.rp-menu .menu-item-has-children:hover > .sub-menu,
.rp-menu .menu-item-has-children:focus-within > .sub-menu{
	opacity: 1; visibility: visible; transform: translateY(0);
}
.rp-menu .sub-menu a{ display: block; padding: 8px 10px; border-radius: 6px; }
.rp-menu .sub-menu a:hover{ background: var(--rp-bg-alt); }

.rp-header-search-form{ display: flex; align-items: center; }
.rp-header-search-form input[type="search"]{
	border: 1px solid var(--rp-line);
	border-radius: 999px 0 0 999px;
	padding: 9px 16px;
	font-family: var(--rp-font-body);
	width: 190px;
}
.rp-header-search-form button{
	border: none;
	background: var(--rp-accent);
	color: #fff;
	border-radius: 0 999px 999px 0;
	padding: 9px 16px;
	cursor: pointer;
}

.rp-menu-toggle{
	display: none;
	background: none; border: none; cursor: pointer;
	width: 40px; height: 40px;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.rp-menu-toggle span{ width: 22px; height: 2px; background: var(--rp-ink); }

/* =========================================================
   4. HERO
   ========================================================= */
.rp-hero{
	position: relative;
	background: var(--rp-ink);
	color: #fff;
	overflow: hidden;
	margin-bottom: 56px;
}
.rp-hero-media{
	position: absolute; inset: 0;
}
.rp-hero-media img{
	width: 100%; height: 100%; object-fit: cover;
	opacity: .55;
}
.rp-hero-media::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(43,36,48,.55) 0%, rgba(43,36,48,.35) 40%, rgba(43,36,48,.9) 100%);
}
.rp-hero-inner{
	position: relative;
	max-width: var(--rp-container);
	margin: 0 auto;
	padding: 100px 24px 64px;
	max-width: 720px;
}
.rp-hero-inner .rp-tag{ margin-bottom: 18px; }
.rp-hero-title{
	font-size: clamp(30px, 4.4vw, 52px);
	margin-bottom: 16px;
}
.rp-hero-title a{ color: #fff; }
.rp-hero-excerpt{ font-size: 18px; color: rgba(255,255,255,.85); max-width: 60ch; }
.rp-hero-meta{
	margin-top: 20px;
	font-size: 14px;
	color: rgba(255,255,255,.7);
	display: flex; gap: 16px; align-items: center;
}

/* =========================================================
   5. LAYOUT (sadržaj + bočna traka)
   ========================================================= */
.rp-layout{
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 900px){
	.rp-layout{ grid-template-columns: 1fr; }
}

.rp-section{ margin-bottom: 56px; }
.rp-section-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 22px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--rp-line);
}
.rp-section-title{
	font-size: 24px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.rp-section-title::before{
	content: "";
	width: 10px; height: 10px;
	background: var(--rp-apricot);
	border-radius: 3px;
	display: inline-block;
}
.rp-section-more{
	font-size: 14px;
	font-weight: 700;
	color: var(--rp-accent);
	white-space: nowrap;
}
.rp-section-more:hover{ text-decoration: underline; }

/* =========================================================
   6. KARTICE ČLANAKA
   ========================================================= */
.rp-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.rp-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){
	.rp-grid, .rp-grid--2{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
	.rp-grid, .rp-grid--2{ grid-template-columns: 1fr; }
}

.rp-card{
	background: var(--rp-white);
	border-radius: var(--rp-radius);
	overflow: hidden;
	border: 1px solid var(--rp-line);
	transition: transform .18s ease, box-shadow .18s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.rp-card:hover{ transform: translateY(-4px); box-shadow: var(--rp-shadow); }
.rp-card-media{ aspect-ratio: 16/10; overflow: hidden; background: var(--rp-bg-alt); }
.rp-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.rp-card-body{ padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.rp-card .rp-tag{ align-self: flex-start; margin-bottom: 12px; }
.rp-card-title{ font-size: 19px; margin-bottom: 10px; }
.rp-card-title a:hover{ color: var(--rp-accent); }
.rp-card-excerpt{ font-size: 14.5px; color: var(--rp-ink-soft); flex: 1; }
.rp-card-meta{
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--rp-ink-soft);
	display: flex; gap: 12px;
}

/* Horizontalna, kompaktna kartica (za bočnu traku i liste) */
.rp-row{ display: flex; gap: 14px; align-items: flex-start; }
.rp-row + .rp-row{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rp-line); }
.rp-row-media{
	flex: none; width: 84px; height: 84px;
	border-radius: var(--rp-radius-sm);
	overflow: hidden;
	background: var(--rp-bg-alt);
}
.rp-row-media img{ width: 100%; height: 100%; object-fit: cover; }
.rp-row-title{ font-size: 15.5px; line-height: 1.35; margin-bottom: 4px; }
.rp-row-title a:hover{ color: var(--rp-accent); }
.rp-row-meta{ font-size: 12px; color: var(--rp-ink-soft); }

/* =========================================================
   7. BOČNA TRAKA
   ========================================================= */
.rp-sidebar{ position: sticky; top: 96px; }
.rp-widget{
	background: var(--rp-white);
	border: 1px solid var(--rp-line);
	border-radius: var(--rp-radius);
	padding: 22px;
	margin-bottom: 26px;
}
.rp-widget-title{
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rp-accent);
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 2px dashed var(--rp-line);
}
.rp-widget ul{ display: flex; flex-direction: column; gap: 10px; }
.rp-widget a{ font-size: 14.5px; }
.rp-widget a:hover{ color: var(--rp-accent); }
.rp-cat-list li{
	display: flex; justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px solid var(--rp-line);
}
.rp-cat-list li:last-child{ border-bottom: none; }
.rp-cat-list .count{
	background: var(--rp-bg-alt);
	color: var(--rp-ink-soft);
	font-size: 11.5px;
	padding: 2px 8px;
	border-radius: 999px;
}

/* =========================================================
   8. ČLANAK (single) I STRANICA
   ========================================================= */
.rp-article-header{ margin-bottom: 28px; }
.rp-article-title{ font-size: clamp(28px, 4vw, 42px); }
.rp-article-meta{
	display: flex; gap: 16px; flex-wrap: wrap;
	font-size: 13.5px; color: var(--rp-ink-soft);
	margin: 14px 0 24px;
}
.rp-article-thumb{ border-radius: var(--rp-radius); overflow: hidden; margin-bottom: 32px; }
.rp-content{ font-size: 18px; }
.rp-content > *:first-child{ margin-top: 0; }
.rp-content h2{ font-size: 26px; margin-top: 1.6em; }
.rp-content h3{ font-size: 21px; margin-top: 1.4em; }
.rp-content img{ border-radius: var(--rp-radius); }
.rp-content blockquote{
	margin: 28px 0;
	padding: 4px 24px;
	border-left: 4px solid var(--rp-apricot);
	font-family: var(--rp-font-display);
	font-style: italic;
	font-size: 21px;
	color: var(--rp-ink);
}
.rp-content a{ color: var(--rp-accent); text-decoration: underline; text-underline-offset: 3px; }

.rp-article-tags{ display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0; }

.rp-pagination{ display: flex; justify-content: center; gap: 8px; margin: 40px 0; }
.rp-pagination a, .rp-pagination span{
	padding: 8px 14px;
	border: 1px solid var(--rp-line);
	border-radius: var(--rp-radius-sm);
	font-weight: 600; font-size: 14px;
}
.rp-pagination .current{ background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }

/* =========================================================
   9. PODNOŽJE
   ========================================================= */
.rp-footer{
	background: var(--rp-ink);
	color: rgba(255,255,255,.85);
	margin-top: 80px;
	padding-top: 56px;
}
.rp-footer a{ color: rgba(255,255,255,.85); }
.rp-footer a:hover{ color: #fff; }
.rp-footer-grid{
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 780px){
	.rp-footer-grid{ grid-template-columns: 1fr 1fr; }
}
.rp-footer-brand{ font-family: var(--rp-font-display); font-size: 24px; color: #fff; margin-bottom: 10px; }
.rp-footer-tagline{ color: rgba(255,255,255,.6); font-size: 14.5px; max-width: 34ch; }
.rp-footer-widget-title{
	font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
	color: rgba(255,255,255,.55); margin-bottom: 16px;
}
.rp-footer-widget ul{ display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }

.rp-socials{ display: flex; gap: 10px; margin-top: 16px; }
.rp-socials a{
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.25);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700;
}
.rp-socials a:hover{ background: var(--rp-apricot); border-color: var(--rp-apricot); }

.rp-footer-bottom{
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 12px;
	padding: 22px 0;
	font-size: 13px;
	color: rgba(255,255,255,.5);
}

/* =========================================================
   10. RESPONSIVE / MOBILNI MENI
   ========================================================= */
@media (max-width: 900px){
	.rp-menu-toggle{ display: flex; }
	.rp-nav{
		position: fixed; inset: 0 0 0 auto;
		width: min(320px, 85vw); height: 100vh;
		background: #fff;
		flex-direction: column; align-items: flex-start;
		padding: 90px 24px 24px;
		transform: translateX(100%);
		transition: transform .25s ease;
		box-shadow: -12px 0 30px rgba(0,0,0,.12);
	}
	.rp-nav.is-open{ transform: translateX(0); }
	.rp-menu{ flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
	.rp-menu > li{ width: 100%; }
	.rp-menu .sub-menu{
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none; padding-left: 14px; display: none;
	}
	.rp-menu .menu-item-has-children.is-open > .sub-menu{ display: block; }
	.rp-header-search-form{ margin-top: 20px; width: 100%; }
	.rp-header-search-form input[type="search"]{ flex: 1; }
	.rp-hero-inner{ padding: 70px 20px 44px; }
}