/*
Theme Name: Majstor
Theme URI: https://miletodorov.rs/
Author: Majstor Mile
Description: Lightweight classic theme for miletodorov.rs — Serbian local service business. Plain PHP, no builder, no jQuery, phone-first.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: majstor
Tags: one-column, custom-menu
*/

/* --- Tokens --- */
:root {
	--ink: #1d2731;          /* slate from logo wordmark */
	--body: #33414d;
	--muted: #5b6b77;
	--brand: #1f6fa8;        /* AA on white with white text */
	--brand-dark: #175179;
	--brand-soft: #cfe3f0;   /* pale brand for offsets / borders */
	--brand-tint: #e9f2f8;   /* blue tint band */
	--link: #1a5f8f;
	--bg: #ffffff;
	--bg-alt: #eff3f5;       /* light grey-blue from logo palette */
	--warm: #f7f3ec;         /* warm mat behind the hero photo only */
	--line: #d9e1e6;
	--radius: 10px;
	--radius-lg: 16px;
	--wrap: 1100px;
	--measure: 46rem;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--shadow: 0 1px 2px rgba(29, 39, 49, .05), 0 4px 14px rgba(29, 39, 49, .07);
	--shadow-lift: 0 2px 4px rgba(29, 39, 49, .07), 0 12px 26px rgba(29, 39, 49, .13);
}

/* --- Reset-lite --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 100%; line-height: 1.65; color: var(--body); background: var(--bg); }
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { line-height: 1.22; color: var(--ink); margin: 0 0 .55em; letter-spacing: -.01em; }
p, ul, ol, figure, blockquote, address { margin: 0 0 1rem; }
ul, ol { padding-inline-start: 1.4rem; }
blockquote { border-inline-start: 4px solid var(--brand-soft); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; padding: .9rem 1.1rem; color: var(--ink); }
blockquote p:last-child { margin-bottom: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; top: .5rem; left: .5rem; z-index: 100; padding: .6em 1em;
	background: var(--ink); color: #fff; border-radius: 6px; text-decoration: none;
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: #fff; }

/* --- Section heading accent: short brand rule under content headings --- */
.entry-content > h2, .home-band > h2, .footer-title { text-wrap: balance; }
.entry-content > h2::after, .home-band > h2::after {
	content: ""; display: block; width: 2.75rem; height: 3px; margin-top: .45rem;
	background: var(--brand); border-radius: 2px;
}
.entry-content > h2, .home-band > h2 { margin-bottom: 1.4rem; }

/* --- Buttons --- */
.btn {
	display: inline-block; padding: .6em 1.1em; border-radius: 8px; border: 2px solid var(--brand);
	background: var(--brand); color: #fff; font-weight: 700; text-decoration: none; line-height: 1.3;
	box-shadow: 0 1px 2px rgba(29, 39, 49, .15);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--brand); box-shadow: none; }
.btn-ghost:hover { background: var(--brand); color: #fff; }
.btn-lg { padding: .75em 1.4em; font-size: 1.05rem; }
.btn-block { display: block; text-align: center; margin-bottom: .5rem; }

/* --- Header --- */
.site-header {
	position: sticky; top: 0; z-index: 50; background: var(--bg);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 18px rgba(29, 39, 49, .06);
}
.header-bar { display: flex; align-items: center; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { width: auto; height: 44px; display: block; }
.site-title { margin: 0; font-size: .78rem; font-weight: 600; color: var(--muted); max-width: 13rem; line-height: 1.35; }
.site-title a { color: inherit; text-decoration: none; }
.header-phone { margin-inline-start: auto; white-space: nowrap; }
.nav-toggle { display: none; }

.main-nav .menu { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.main-nav a { display: block; padding: .45rem .6rem; color: var(--ink); font-weight: 600; text-decoration: none; border-radius: 6px; }
.main-nav a:hover { background: var(--brand-tint); color: var(--ink); }
.main-nav .menu-item-has-children { position: relative; }
.main-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 16rem; margin: 0; padding: .35rem;
	list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu a { font-weight: 400; padding: .4rem .6rem; }

.mobile-nav { border-top: 1px solid var(--line); background: var(--bg); }
/* Progressive enhancement: the [hidden]-attribute hiding only applies when JS
   is available (html.js set inline in <head>). Without JS the mobile nav stays
   visible/expanded on small screens instead of being unreachable. */
html.js .mobile-nav[hidden] { display: none; }
@media (max-width: 880px) {
	html:not(.js) .mobile-nav { display: block; }
}
.mobile-nav .menu-mobile { margin: 0; padding: .5rem 0; list-style: none; }
.mobile-nav .menu-mobile a { display: block; padding: .7rem 1rem; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .sub-menu { margin: 0; padding: 0; list-style: none; }
.mobile-nav .sub-menu a { font-weight: 400; padding-inline-start: 2rem; color: var(--body); }
.mobile-nav-phone { margin: .75rem 1rem; }

/* --- Hero (front page): split, text + real photo --- */
.hero {
	background: linear-gradient(180deg, var(--bg-alt) 0%, #f5f9fb 100%);
	border-bottom: 1px solid var(--line);
	padding: clamp(1.75rem, 5vw, 3.25rem) 0;
}
.hero-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 800px) {
	.hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.hero-kicker { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.hero-lede {
	margin: 0 0 1.3rem; max-width: 36rem;
	font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.28; font-weight: 700;
	letter-spacing: -.015em; color: var(--ink); text-wrap: balance;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hero-photo {
	/* 270px = the photo's native 250px + mat padding/border; renders 1:1, no upscale. */
	margin: 0; max-width: 270px; justify-self: center;
	background: var(--warm); padding: .55rem .55rem 0;
	border: 1px solid #e5ddcd; border-radius: var(--radius-lg);
	box-shadow: 10px 10px 0 var(--brand-soft), var(--shadow);
}
.hero-photo img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 6px); filter: saturate(1.06); }
.hero-photo figcaption { padding: .5rem .35rem .55rem; font-size: .85rem; color: var(--muted); text-align: center; }

/* --- Main / content --- */
.site-main { min-height: 45vh; padding-bottom: 2.5rem; }
.entry-content { max-width: var(--measure); }
.entry-content > h2 { margin-top: 2.25rem; font-size: 1.5rem; }
.entry-content > h3 { margin-top: 1.5rem; font-size: 1.18rem; }
.entry-content li { margin-bottom: .4rem; }
.entry-content figure { margin: 1.5rem 0; }
.entry-content figure img { border: 1px solid var(--line); border-radius: var(--radius); display: block; }
.entry-content figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }

/* Front page: content bands provide the alternating background rhythm.
   Blocks stay in content/73-home.html; the theme only styles the wrappers. */
.front-entry .entry-content { max-width: none; }
.home-band-tint { background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 1.9rem); margin: 1.4rem 0; }
.home-band-blue { background: var(--brand-tint); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 1.9rem); margin: 1.4rem 0; }
.home-band > p, .home-band > h2 { max-width: var(--measure); }

/* content contract blocks */
.cta-telefon {
	background: var(--bg); border: 1px solid var(--brand-soft);
	border-inline-start: 4px solid var(--brand);
	border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin: 1.75rem 0 1.4rem;
	box-shadow: var(--shadow);
}
.cta-telefon p { margin: 0; font-size: 1.08rem; color: var(--ink); }
.usluge-kartice, .knjige-lista { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 1rem; }
.usluge-kartice > li, .knjige-lista > li, .post-card {
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.15rem 1.25rem; margin: 0;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.usluge-kartice > li { border-top: 3px solid var(--brand-soft); }
.usluge-kartice > li:hover, .knjige-lista > li:hover, .post-card:hover {
	transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #b7cdda;
}
.usluge-kartice > li:hover { border-top-color: var(--brand); }
.usluge-kartice h3, .knjige-lista h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.usluge-kartice h3 a, .knjige-lista h3 a { text-decoration: none; }
.usluge-kartice h3 a:hover, .knjige-lista h3 a:hover { text-decoration: underline; }
.usluge-kartice p:last-child, .knjige-lista p:last-child { margin-bottom: 0; }

/* "Kako radimo": numbered steps with brand counters */
.koraci { list-style: none; counter-reset: korak; display: grid; gap: .9rem; margin: 1.4rem 0; padding: 0; }
.koraci li {
	counter-increment: korak; position: relative; margin: 0; padding: .85rem 1rem .85rem 3.4rem;
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); color: var(--ink); font-weight: 600;
}
.koraci li::before {
	content: counter(korak); position: absolute; left: .9rem; top: 50%; translate: 0 -50%;
	width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
	background: var(--brand); color: #fff; font-weight: 700; border-radius: 50%; font-size: .95rem;
}
@media (min-width: 720px) {
	.koraci { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
	.usluge-kartice { grid-template-columns: repeat(3, 1fr); }
	.entry-content figure { float: right; margin: .35rem 0 1rem 1.5rem; max-width: 280px; }
	.entry-content::after { content: ""; display: table; clear: both; }
}
@media (prefers-reduced-motion: reduce) {
	.usluge-kartice > li, .knjige-lista > li, .post-card { transition: none; }
	.usluge-kartice > li:hover, .knjige-lista > li:hover, .post-card:hover { transform: none; }
	.btn:active { transform: none; }
}

/* --- Books hub: cover grid --- */
.books-hub .entry-content { max-width: none; }
.books-hub > .page-header, .books-hub .page-header { max-width: var(--measure); }
.knjiga { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.knjiga-cover {
	display: flex; align-items: center; justify-content: center;
	padding: 1.5rem 1.4rem 1.15rem; margin: 0;
	background: linear-gradient(180deg, #fbfcfd, #f0f4f7);
	border-bottom: 1px solid var(--line);
}
.knjiga-cover img { border-radius: 3px; box-shadow: 0 6px 16px rgba(29, 39, 49, .22); }
.knjiga-body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.knjiga-body h3 { font-size: 1.05rem; margin: 0 0 .45rem; }
.knjiga-meta { font-size: .88rem; color: var(--muted); margin-bottom: .55rem; }
.knjiga-body > p:not(.knjiga-meta) { font-size: .95rem; }
.knjiga-cena {
	margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line);
	font-weight: 700; color: var(--brand-dark); font-size: .98rem;
}
/* Typographic fallback tile for any book without a cover photo (none today:
   all 7 covers exist server-side; kept as insurance for future titles). */
.knjiga-cover-fallback {
	aspect-ratio: 7 / 10; width: min(200px, 100%); display: grid; place-items: center;
	text-align: center; padding: 1rem; margin: 0;
	background: var(--brand-tint); border: 1px dashed #b7cdda; border-radius: 6px;
	color: var(--brand-dark); font-weight: 700; line-height: 1.35;
}
@media (min-width: 560px) {
	.books-hub .knjige-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
	.books-hub .knjige-lista { grid-template-columns: repeat(3, 1fr); }
}

/* --- Page header --- */
.page-header { padding: 1.75rem 0 .5rem; }
.page-title { font-size: clamp(1.6rem, 4.5vw, 2.2rem); margin: 0 0 .4rem; text-wrap: balance; }
.page-header::after { content: ""; display: block; width: 3.25rem; height: 3px; background: var(--brand); border-radius: 2px; }
.entry-meta { font-size: .9rem; color: var(--muted); margin-bottom: 1.25rem; }

/* --- Service layout: wide prose + sticky aside --- */
.service-layout { padding-top: .25rem; }
@media (min-width: 960px) {
	.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem; align-items: start; }
	.service-aside { position: sticky; top: 84px; }
	.service-entry .entry-content { max-width: 52rem; }
}
.service-aside { margin-top: 1rem; }
.aside-box {
	background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.aside-call { border-color: var(--brand); border-width: 2px; background: var(--bg); }
.aside-title { margin: 0 0 .6rem; font-weight: 700; color: var(--ink); font-size: 1rem; }
.aside-box address { margin-bottom: .6rem; font-size: .95rem; }
.aside-link { font-weight: 600; }

/* --- CTA bar --- */
.cta-bar { background: var(--ink); color: #fff; padding: 1.9rem 0; margin-top: 1rem; }
.cta-bar-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cta-bar-title { margin: 0; margin-inline-end: auto; font-size: 1.25rem; font-weight: 700; }
.cta-bar .btn { border-color: transparent; }
.cta-bar .btn-call-alt { background: var(--bg-alt); color: var(--ink); }
.cta-bar .btn-call-alt:hover { background: #fff; color: var(--ink); }

/* --- Listings (index / search / archive) --- */
.post-list { display: grid; gap: 1rem; }
.post-card-title { font-size: 1.15rem; margin: 0 0 .3rem; }
.post-card-title a { text-decoration: none; }
.post-card-title a:hover { text-decoration: underline; }
.post-card-excerpt { margin-bottom: 0; }
.pagination { margin: 1.75rem 0 0; display: flex; gap: .75rem; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-block; padding: .5em .9em; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--link); }
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Search form --- */
.search-form { display: flex; gap: .5rem; max-width: 28rem; margin: 1rem 0; }
.search-form .search-field {
	flex: 1; padding: .55em .8em; font: inherit; color: var(--ink);
	border: 2px solid var(--line); border-radius: 8px; background: var(--bg);
}
.search-form .search-field:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.search-form .search-submit { padding: .55em 1em; }

/* --- Comments --- */
.comments-area { max-width: var(--measure); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.comments-title { font-size: 1.25rem; }
.comment-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.comment-list .children { list-style: none; margin: 0; padding-inline-start: 1.25rem; }
.comment-body { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .9rem; box-shadow: var(--shadow); }
.comment-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; margin-bottom: .5rem; }
.comment-meta .fn { font-style: normal; font-weight: 700; color: var(--ink); }
.comment-meta .comment-time { font-size: .85rem; color: var(--muted); text-decoration: none; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-reply-link { font-size: .9rem; font-weight: 600; }
.no-comments { color: var(--muted); }
.comment-form label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
	width: 100%; padding: .55em .8em; font: inherit; color: var(--ink);
	border: 2px solid var(--line); border-radius: 8px; background: var(--bg);
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.comment-form .required { color: var(--brand); }
.comment-notes { font-size: .9rem; color: var(--muted); }
.comment-form-cookies-consent { display: flex; gap: .5rem; align-items: baseline; }

/* --- Contact Form 7 --- */
.wpcf7 .wpcf7-form label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
	width: 100%; max-width: 28rem; padding: .55em .8em; font: inherit; color: var(--ink);
	border: 2px solid var(--line); border-radius: 8px; background: var(--bg);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.wpcf7 .wpcf7-submit { margin-top: .5rem; padding: .65em 1.3em; font: inherit; font-weight: 700; cursor: pointer;
	background: var(--brand); color: #fff; border: 2px solid var(--brand); border-radius: 8px; }
.wpcf7 .wpcf7-submit:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.wpcf7-not-valid-tip { color: #a33; font-size: .9rem; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--brand); color: var(--ink); }
.wpcf7-response-output { border-radius: 8px; margin-top: .75rem; }

/* --- Footer: dark, structured, with the company-data block --- */
.site-footer { background: #14212c; color: #cfd8de; margin-top: 0; border-top: 4px solid var(--brand); }
.footer-grid { display: grid; gap: 1.75rem; padding: 2.5rem 0 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-company { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } .footer-company { grid-column: auto; } }
.footer-brand { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.footer-title { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fb0bc; margin-bottom: .6rem; }
.footer-tagline { margin: 0 0 .8rem; font-size: .95rem; color: #aebcc7; max-width: 26rem; }
.site-footer address { color: #cfd8de; margin-bottom: .6rem; }
.footer-phones { margin: 0 0 .6rem; }
.footer-phones a { display: inline-block; margin-inline-end: 1rem; }
.site-footer a { color: #9ec8e8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: .4rem; }
.footer-punkt {
	margin: 0; padding: .6rem .8rem; font-size: .95rem; color: #cfd8de;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px; max-width: 24rem;
}
.footer-punkt strong { color: #fff; font-weight: 700; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 0; font-size: .9rem; color: #9fb0bc; }
.footer-bottom p { margin: 0; }

/* --- 404 --- */
.error-404 .help-links { list-style: none; padding: 0; display: grid; gap: .35rem; }
.error-404 .help-links a { font-weight: 600; }

/* --- Mobile nav toggle --- */
@media (max-width: 880px) {
	.main-nav, .header-phone .phone-label { display: none; }
	.site-title { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
	.header-bar { gap: .6rem; }
	.brand-logo { height: 38px; }
	.header-phone { margin-inline-start: auto; padding: .45em .7em; font-size: .95rem; }
	.nav-toggle {
		display: inline-block; padding: .5em .9em; font: inherit; font-weight: 700; color: var(--ink);
		background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
	}
	.nav-toggle[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
}
@media (max-width: 480px) {
	.brand-logo { height: 30px; }
	.header-bar { gap: .5rem; }
	/* 44px-min tap target: only the phone number remains visible here (label
	   hidden below 880px), so pad it to thumb height. */
	.header-phone { font-size: .85rem; padding: .9em .7em; }
	.nav-toggle { padding: .45em .75em; }
	.hero-photo { box-shadow: 6px 6px 0 var(--brand-soft), var(--shadow); }
}
@media (min-width: 881px) {
	.mobile-nav { display: none; }
}

@media print {
	.site-header, .cta-bar, .service-aside, .site-footer, .comments-area, .skip-link, .hero-photo { display: none !important; }
}