/*
Theme Name: Narvavet
Description: Narva Vet loomadekeskus. Content and the banner artwork come from the original narvavet.ee; the design is new — semantic markup, one hand-written stylesheet, no framework.
Version: 1.4
Text Domain: narvavet
*/

/* =====================================================================
   The whole design lives in this one file. The original site's CSS
   (vana/css/) is no longer loaded; the only artwork kept from it is the
   banner (top1.jpg + top2_ee/ru.jpg) and the favicon.

   The look: warm paper, a serif for headings, hairlines instead of
   cards and shadows, one warm accent (the original site's orange, toned
   down). The blue comes from the banner photo and is used for links and
   the one real button. Nothing floats, nothing glows.

   Content that comes out of WordPress still carries the original's own
   class names inside the article HTML (price tables: tblTitle1, prCart1,
   prCart3; a few colour classes) — those are styled near the end.
   ===================================================================== */

:root{
	--paper:#f6f2ea;
	--paper-deep:#ece6da;
	--ink:#24292e;
	--ink-soft:#4d565e;
	--muted:#7a8288;
	--line:#dcd4c6;
	--line-soft:#e9e3d8;
	--blue:#1d6fa5;
	--blue-deep:#0f3f62;
	--accent:#c4521c;
	--serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
	--sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(29,111,165,.45)}
a:hover{color:var(--accent);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,.card-title,.entry-title{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------------
   Top bar: phone + language switch. Dark like the top of the banner
   photo, so the two read as one piece.
   --------------------------------------------------------------------- */
.topbar{background:var(--blue-deep);color:#d9e6f0;font-size:14px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:16px}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline;color:#fff}
.topbar-phone{font-variant-numeric:tabular-nums}
.lang-switch{display:flex;gap:14px;font-size:13px;letter-spacing:1px}
.lang-switch .is-active{color:#fff;border-bottom:2px solid #fff;padding-bottom:1px}
.lang-switch a{color:#b9cad8}
.lang-switch a:hover{color:#fff;text-decoration:none}

/* ---------------------------------------------------------------------
   Banner: the original's two header images (437 + 663 of 1100), side by
   side, scaled together. Kept as they are — that photo is the clinic.
   --------------------------------------------------------------------- */
.site-header{background:var(--blue-deep)}
.banner{display:flex;width:100%;line-height:0}
.banner img{height:auto;flex:0 0 auto}
.banner img:first-child{width:39.727%}
.banner img:last-child{width:60.273%}

/* ---------------------------------------------------------------------
   Main menu: a row of words on the paper, a rule under it, the current
   one underlined in the accent colour.
   --------------------------------------------------------------------- */
.site-nav{border-bottom:1px solid var(--line)}
.site-nav-inner{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.nav-link{display:block;padding:16px 14px 14px;color:var(--ink);font-family:var(--serif);font-size:17px;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-link:hover{color:var(--accent)}
.nav-link.is-active{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------------------------------------------------------------------
   Layout: sidebar | content | sidebar. No boxes; the columns are set
   apart by space and two hairlines.
   --------------------------------------------------------------------- */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:40px;padding-top:36px;padding-bottom:64px;align-items:start}
.content{min-width:0}
.sidebar-left{border-right:1px solid var(--line-soft);padding-right:24px}
.sidebar-right{border-left:1px solid var(--line-soft);padding-left:24px}

/* ---------------------------------------------------------------------
   Right column blocks
   --------------------------------------------------------------------- */
.card{margin-bottom:36px}
.card-title{margin:0 0 12px;font-size:19px;line-height:1.3;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.card-more{display:inline-block;margin-top:10px;font-size:14px;color:var(--accent);text-decoration:none}
.card-more:hover{text-decoration:underline}
.card-more::after{content:" →"}

.news-list{list-style:none;margin:0;padding:0}
.news-list li{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.45}
.news-list li:last-child{border-bottom:0}
.news-list a{color:var(--ink);text-decoration:none}
.news-list a:hover{color:var(--accent);text-decoration:underline}

/* ---------------------------------------------------------------------
   Entry: the article or page
   --------------------------------------------------------------------- */
.entry{max-width:720px}
.eyebrow{margin:0 0 8px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.entry-title{margin:0 0 22px;font-size:34px;line-height:1.15}
.entry-title::after{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-top:14px}
.entry-body{font-size:17px;color:var(--ink)}
.entry-body{overflow-wrap:break-word}
/* Long URLs in article text and the odd unbroken token ("Briti lühikarvaline kass") */
.entry-body a{overflow-wrap:anywhere}
/* Inline widths from 2010 (588 px wrappers on the brand page) */
.entry-body div[style*="width"]{width:auto!important;max-width:100%}
.entry-body>:first-child{margin-top:0}
.entry-body p{margin:0 0 1.1em}
.entry-body h2,.entry-body h3,.entry-body h4,.entry-body h5{font-family:var(--serif);color:var(--ink);line-height:1.25;margin:1.7em 0 .6em}
.entry-body h2{font-size:26px}
.entry-body h3{font-size:22px}
.entry-body h4,.entry-body h5{font-size:18px}
.entry-body ul,.entry-body ol{padding-left:1.4em}
.entry-body li{margin:.3em 0}
.entry-body blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--ink-soft);font-style:italic}
.entry-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.entry-body em,.entry-body i{color:var(--ink-soft)}

/* Tables in the content: the original's price lists and article tables.
   Cells arrive with width= and nowrap= attributes from 2010; the width
   ones are overridden so the table fits the column. Ruled like a printed
   price list, not a spreadsheet. */
.entry-body .table-scroll{overflow-x:auto;margin:1.4em 0}
.entry-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.entry-body table[width]{width:100%!important}
.entry-body th,.entry-body td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;text-align:left}
.entry-body th[width],.entry-body td[width]{width:auto!important}
.entry-body th[nowrap],.entry-body td[nowrap]{white-space:normal!important}
.entry-body th{font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink)}
.entry-body tr:last-child td{border-bottom:0}
/* Price list classes from the original markup */
.entry-body .tblTitle1{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);background:transparent;padding:6px 10px 8px 0;border-bottom:2px solid var(--ink)}
/* The service name gets the room; the two right-hand price columns are mostly empty in the data */
.entry-body tr:first-child .tblTitle1:first-child{width:44%}
.entry-body .prCart1{background:transparent}
.entry-body .prCart3{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);padding-right:4px}
.entry-body .oldPrice{color:var(--muted);text-decoration:line-through;font-weight:400;font-size:.9em}
.entry-body .blue{color:var(--blue)}
.entry-body .orange{color:var(--accent)}
/* Leftover layout wrappers inside some articles */
.entry-body .colBlock{float:none;width:auto!important;margin:0 0 1em}
.entry-body .blockTitle{font-family:var(--serif);font-weight:700;color:var(--ink);width:auto!important;margin:1.2em 0 .5em}

/* Listing */
.post-list{list-style:none;margin:0;padding:0;max-width:720px}
.post-list li{border-bottom:1px solid var(--line-soft)}
.post-list a{display:block;padding:13px 0;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:18px}
.post-list a:hover{color:var(--accent)}
.pagination{margin-top:28px;font-size:15px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.page-numbers{color:var(--blue);text-decoration:none;padding:4px 2px}
.page-numbers:hover{color:var(--accent)}
.page-numbers.current{color:var(--ink);font-weight:700;border-bottom:2px solid var(--accent)}
.page-numbers.dots{color:var(--muted)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------------
   Left sidebar: search, article tree, consult button
   --------------------------------------------------------------------- */
/* .search-form, not .search: WordPress puts class="search" on <body> on result pages */
.search-form{display:flex;gap:0;margin-bottom:26px;border-bottom:1px solid var(--ink)}
.search-input{flex:1;min-width:0;padding:8px 0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink)}
.search-input::placeholder{color:var(--muted)}
.search-input:focus{outline:none}
.search-form:focus-within{border-bottom-color:var(--accent)}
.search-button{padding:6px 0 6px 10px;border:0;background:transparent;font:inherit;font-size:14px;color:var(--blue);cursor:pointer;letter-spacing:.3px}
.search-button:hover{color:var(--accent)}

.tree{margin-bottom:28px;font-size:15px}
.tree-head{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-family:var(--serif);font-size:16px;color:var(--ink)}
.tree-head a{flex:1;color:inherit;text-decoration:none}
.tree-count{font-size:12px;color:var(--muted);font-family:var(--sans)}
.tree-head[aria-expanded="true"]{color:var(--accent);border-bottom-color:transparent}
#leftColumn.accordion .tree-head{cursor:pointer}
#leftColumn.accordion .tree-head:hover{color:var(--accent)}
.tree-body{padding:2px 0 12px;border-bottom:1px solid var(--line-soft)}
.tree-body a{display:block;padding:5px 0 5px 14px;color:var(--ink-soft);text-decoration:none;font-size:14.5px;line-height:1.4;border-left:2px solid var(--line)}
.tree-body a:hover{color:var(--accent);border-left-color:var(--accent)}
.tree-body a.is-current{color:var(--ink);border-left-color:var(--accent);font-weight:600}
.tree-body[hidden]{display:none}

/* "Loomaarst annab nõu": the one solid button on the page, at the right end
   of the menu bar so it is on the first screen everywhere. Paw icon inline in
   header.php. a.consult-btn:link beats the generic a rule. */
a.consult-btn,a.consult-btn:link,a.consult-btn:visited{display:flex;align-items:center;gap:10px;margin-left:auto;
	padding:9px 12px 9px 14px;background:var(--blue);color:#fff;border-radius:4px;text-decoration:none;
	font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap}
a.consult-btn:hover,a.consult-btn:focus{background:var(--blue-deep);color:#fff}
.consult-btn-icon{width:22px;height:22px;flex:none;fill:currentColor;opacity:.9}
.consult-btn-text{flex:1;text-align:left}
.consult-btn-arrow{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------
   Footer: quiet, on the paper, a rule above it
   --------------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);color:var(--ink-soft);font-size:14.5px;line-height:1.7;background:var(--paper-deep)}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:30px;padding-bottom:34px}
.site-footer strong{color:var(--ink);font-family:var(--serif);font-size:16px}
.site-footer a{color:var(--ink)}

/* =====================================================================
   Tablet and phone
   ===================================================================== */
@media (max-width:1023px){
	.layout{grid-template-columns:1fr;gap:28px;padding-top:24px;padding-bottom:44px}
	/* Content first, then news, then search and the article tree — the
	   tree is ~1000 px tall on a phone and would bury the rest. */
	.content{order:1}
	.sidebar-right{order:2}
	.sidebar-left{order:3}
	.sidebar-left,.sidebar-right{border:0;padding:0}
	.sidebar-right{border-top:1px solid var(--line);padding-top:24px}
	.sidebar-left{border-top:1px solid var(--line);padding-top:24px}
	/* The button becomes a full-width row under the menu words. */
	a.consult-btn,a.consult-btn:link,a.consult-btn:visited{width:100%;margin:6px 0 12px;padding:12px 14px;font-size:15px;white-space:normal}
	.entry-title{font-size:29px}
	.footer-grid{grid-template-columns:1fr;gap:14px;padding-top:24px;padding-bottom:28px}
}
@media (max-width:640px){
	.wrap{padding:0 16px}
	.nav-link{padding:12px 10px 10px;font-size:16px}
	.entry-title{font-size:26px}
	.entry-body{font-size:16.5px}
	.entry-body table{font-size:14px}
	.entry-body th,.entry-body td{padding:7px 8px 7px 0}
	.post-list a{font-size:17px}
}