/*
Theme Name: Mediserv
Theme URI: https://mediserv.ee
Author: Mediserv / Noges Holding OÜ
Description: Lightweight custom theme for Mediserv OÜ — occupational health services in Estonia. No page builders. Estonian / English / Russian via Polylang.
Version: 0.2.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mediserv
Tags: healthcare, multilingual, custom-menu
*/

/* ==========================================================================
   1. Design tokens

   Green is the brand. The ramp is built around #26AE60 — the green the live
   site already uses (Elementor kit "Accent 1"), not the logo's lighter lime.

   Surfaces are white or light grey. The only alternative surface is green,
   which always carries white text.

   Solid green fills use --ms-green-700 rather than 500: white on #26AE60 is
   2.9:1 and unreadable at button sizes, while white on #1A8247 is 4.85:1 and
   passes WCAG AA. Same green family, one shade deeper. To force the exact
   live-site green instead, set --ms-green-700 to #26AE60 here — nothing else
   in the theme needs to change.
   ========================================================================== */

:root {
	/* Brand green */
	--ms-green-50:  #edf9f1;
	--ms-green-100: #d3f0de;
	--ms-green-200: #a8e2c0;
	--ms-green-300: #6fce9b;
	--ms-green-400: #3fbb79;
	--ms-green-500: #26ae60; /* brand reference — accents, icons, tints */
	--ms-green-600: #1f9553; /* light-text-free accents */
	--ms-green-700: #1a8247; /* solid fills that carry white text */
	--ms-green-800: #146339;
	--ms-green-900: #0e4527; /* deep bands */

	/* Supporting blue, from the logo wordmark. Accent only. */
	--ms-blue:      #1d4396;
	--ms-blue-dark: #163372;
	--ms-blue-tint: #eaeff9;

	/* Neutrals */
	--ms-ink:     #1a1d1f;
	--ms-body:    #4b5257;
	--ms-muted:   #6b7280;
	--ms-line:    #e5e7ea;
	--ms-surface: #f5f6f7; /* the light-grey alternative background */
	--ms-white:   #ffffff;

	/* Type */
	--ms-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ms-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Rhythm */
	--ms-container: 1240px;
	--ms-gutter:    1.25rem;
	--ms-radius:    14px;
	--ms-radius-lg: 24px;

	--ms-shadow-sm: 0 1px 2px rgba(26, 29, 31, .06), 0 1px 3px rgba(26, 29, 31, .05);
	--ms-shadow-md: 0 4px 12px rgba(26, 29, 31, .07), 0 2px 4px rgba(26, 29, 31, .04);
	--ms-shadow-lg: 0 18px 40px -12px rgba(20, 99, 57, .18);

	--ms-header-h: 96px;
	--ms-logo-h:   64px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--ms-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ms-body);
	background: var(--ms-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ms-font-display);
	color: var(--ms-ink);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0 0 .6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.9rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.85rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.3rem,  1.05rem + .9vw, 1.75rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ms-green-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ms-green-800); }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 3px solid var(--ms-green-700);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.ms-container {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

.ms-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ms-ink);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--ms-radius) 0;
}
.ms-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   4. Buttons — green fill, white label, everywhere
   ========================================================================== */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: -.01em;
	line-height: 1;
	padding: .875rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ms-btn:hover { transform: translateY(-1px); }
.ms-btn:active { transform: translateY(0); }
.ms-btn svg { width: 16px; height: 16px; flex: none; }

/* The default. */
.ms-btn--primary {
	background: var(--ms-green-700);
	color: #fff;
	box-shadow: 0 1px 2px rgba(20, 99, 57, .2);
}
.ms-btn--primary:hover { background: var(--ms-green-800); color: #fff; }

/* Secondary: outlined, for pairing next to a primary. */
.ms-btn--ghost {
	background: transparent;
	color: var(--ms-ink);
	border-color: var(--ms-line);
}
.ms-btn--ghost:hover {
	border-color: var(--ms-green-700);
	background: var(--ms-green-50);
	color: var(--ms-green-800);
}

/* For use on a green background — inverted. */
.ms-btn--onGreen {
	background: #fff;
	color: var(--ms-green-800);
}
.ms-btn--onGreen:hover { background: var(--ms-green-50); color: var(--ms-green-900); }

.ms-btn--sm { padding: .625rem 1.125rem; font-size: .875rem; }

/* ==========================================================================
   5. Header
   ========================================================================== */

.ms-header { position: relative; z-index: 100; }
.ms-header--sticky { position: sticky; top: 0; }

/* -- utility bar: light grey, quiet ------------------------------------- */
.ms-topbar {
	background: var(--ms-surface);
	border-bottom: 1px solid var(--ms-line);
	color: var(--ms-muted);
	font-size: .8125rem;
	line-height: 1;
}
.ms-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
	padding-block: .5rem;
}
.ms-topbar__group { display: flex; align-items: center; gap: 1.5rem; }
.ms-topbar a { color: inherit; text-decoration: none; }
.ms-topbar a:hover { color: var(--ms-green-700); }

.ms-topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.ms-topbar__item svg { width: 15px; height: 15px; flex: none; color: var(--ms-green-600); }

@media (max-width: 860px) {
	.ms-topbar__hide-sm { display: none; }
	.ms-topbar__inner { justify-content: center; }
}

/* -- language switcher --------------------------------------------------- */
.ms-lang { display: flex; align-items: center; gap: .125rem; }
.ms-lang__link {
	display: inline-block;
	padding: .3rem .5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ms-muted);
	text-decoration: none;
}
.ms-lang__link:hover { background: var(--ms-green-50); color: var(--ms-green-700); }
.ms-lang__link[aria-current="true"] { background: var(--ms-green-700); color: #fff; }
.ms-lang__sep { color: var(--ms-line); }

/* -- main bar ------------------------------------------------------------ */
.ms-bar {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ms-line);
	transition: box-shadow .2s ease;
}
.ms-header.is-scrolled .ms-bar { box-shadow: var(--ms-shadow-md); }

.ms-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--ms-header-h);
}

.ms-brand { flex: none; display: inline-flex; align-items: center; }
.ms-brand img { height: var(--ms-logo-h); width: auto; }
.ms-brand__text {
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--ms-green-700);
	letter-spacing: -.03em;
	text-decoration: none;
}

/* Scale the bar down on small screens so the logo never crowds the burger. */
@media (max-width: 640px) {
	:root { --ms-header-h: 76px; --ms-logo-h: 48px; }
	.ms-brand__text { font-size: 1.4rem; }
}

.ms-bar__spacer { flex: 1 1 auto; }
.ms-bar__actions { flex: none; display: flex; align-items: center; gap: .75rem; }

/* ==========================================================================
   6. Primary navigation
   ========================================================================== */

.ms-nav ul { list-style: none; margin: 0; padding: 0; }

.ms-nav > ul { display: flex; align-items: center; gap: .25rem; }

.ms-nav li { position: relative; }

.ms-nav a {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .6rem .8rem;
	border-radius: 8px;
	font-family: var(--ms-font-display);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--ms-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
.ms-nav a:hover { background: var(--ms-green-50); color: var(--ms-green-700); }

.ms-nav .current-menu-item > a,
.ms-nav .current-menu-ancestor > a,
.ms-nav .current_page_item > a { color: var(--ms-green-700); }
.ms-nav .current-menu-item > a::after,
.ms-nav .current-menu-ancestor > a::after,
.ms-nav .current_page_item > a::after {
	content: "";
	position: absolute;
	left: .8rem; right: .8rem; bottom: .25rem;
	height: 2px;
	border-radius: 2px;
	background: var(--ms-green-500);
}

.ms-nav__caret { width: 13px; height: 13px; opacity: .5; transition: transform .2s ease; }
.ms-nav li:hover > a .ms-nav__caret,
.ms-nav li:focus-within > a .ms-nav__caret { transform: rotate(180deg); }

.ms-nav ul ul {
	position: absolute;
	top: calc(100% + .4rem);
	left: 0;
	min-width: 238px;
	padding: .5rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ms-nav li:hover > ul,
.ms-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }

.ms-nav ul ul a { padding: .55rem .7rem; font-weight: 500; }
.ms-nav ul ul .current-menu-item > a::after { display: none; }

@media (max-width: 1024px) {
	.ms-nav, .ms-bar__actions .ms-btn--desktop { display: none; }
}

/* ==========================================================================
   7. Mobile navigation
   ========================================================================== */

.ms-burger {
	display: none;
	flex: none;
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--ms-line);
	border-radius: 10px;
	cursor: pointer;
}
.ms-burger span {
	display: block;
	position: relative;
	width: 18px; height: 2px;
	border-radius: 2px;
	background: var(--ms-ink);
	transition: background-color .15s ease;
}
.ms-burger span::before, .ms-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px; height: 2px;
	border-radius: 2px;
	background: var(--ms-ink);
	transition: transform .2s ease;
}
.ms-burger span::before { top: -6px; }
.ms-burger span::after  { top: 6px; }

.ms-burger[aria-expanded="true"] span { background: transparent; }
.ms-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.ms-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) { .ms-burger { display: flex; } }

.ms-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(400px, 88vw);
	z-index: 150;
	background: #fff;
	border-left: 1px solid var(--ms-line);
	box-shadow: -20px 0 50px -20px rgba(26, 29, 31, .25);
	padding: 1.25rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	visibility: hidden;
}
.ms-drawer.is-open { transform: translateX(0); visibility: visible; }

.ms-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.ms-drawer__label {
	font-family: var(--ms-font-display);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .75rem;
	color: var(--ms-muted);
}
.ms-drawer__close {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: transparent;
	border: 1px solid var(--ms-line);
	border-radius: 10px;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--ms-ink);
	cursor: pointer;
}

.ms-drawer ul { list-style: none; margin: 0; padding: 0; }
.ms-drawer > nav > ul > li + li { border-top: 1px solid var(--ms-line); }
.ms-drawer a {
	display: block;
	padding: .8rem .25rem;
	font-family: var(--ms-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ms-ink);
	text-decoration: none;
}
.ms-drawer a:hover { color: var(--ms-green-700); }
.ms-drawer ul ul { padding-left: .9rem; border-left: 2px solid var(--ms-green-200); margin-bottom: .5rem; }
.ms-drawer ul ul a { font-weight: 500; font-size: .95rem; padding: .5rem .25rem; color: var(--ms-body); }

.ms-drawer__foot { margin-top: 1.5rem; display: grid; gap: .75rem; }

.ms-overlay {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(26, 29, 31, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s;
}
.ms-overlay.is-open { opacity: 1; visibility: visible; }

body.ms-no-scroll { overflow: hidden; }

/* ==========================================================================
   8. Footer — light grey, dark text
   ========================================================================== */

.ms-footer {
	background: var(--ms-surface);
	border-top: 1px solid var(--ms-line);
	color: var(--ms-body);
	margin-top: 5rem;
}

/* Pre-footer CTA band: the green alternative surface, white text. */
.ms-cta {
	background: var(--ms-green-700);
	border-radius: var(--ms-radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	transform: translateY(-2.5rem);
	box-shadow: var(--ms-shadow-lg);
}
.ms-cta h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.ms-cta p  { color: rgba(255, 255, 255, .85); margin: .35rem 0 0; font-size: .975rem; }

.ms-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
}
@media (max-width: 900px) { .ms-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .ms-footer__grid { grid-template-columns: 1fr; } }

.ms-footer h4 {
	color: var(--ms-ink);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}
.ms-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ms-footer a { color: var(--ms-body); text-decoration: none; }
.ms-footer a:hover { color: var(--ms-green-700); }

.ms-footer__logo { display: inline-block; margin-bottom: 1.1rem; }
.ms-footer__logo img { height: 42px; width: auto; }

.ms-footer__licences {
	font-size: .8125rem;
	color: var(--ms-muted);
	margin-top: 1rem;
}

.ms-loc { display: grid; gap: 1rem; }
.ms-loc__item { font-size: .9rem; line-height: 1.5; }
.ms-loc__city {
	display: block;
	color: var(--ms-ink);
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .95rem;
}

.ms-footer__bar {
	border-top: 1px solid var(--ms-line);
	padding-block: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: .8125rem;
	color: var(--ms-muted);
}
.ms-footer__bar ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ms-footer__bar a { color: var(--ms-muted); }

.ms-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.ms-footer__admin { text-decoration: none; }
.ms-footer__admin:hover { color: var(--ms-green-700); }

/* Developer credit — present and crawlable, but visually quiet. */
.ms-credit { white-space: nowrap; }
.ms-credit a { color: var(--ms-body); text-decoration: none; }
.ms-credit a:hover { color: var(--ms-green-700); text-decoration: underline; }

/* ==========================================================================
   9. Sections and utilities
   ========================================================================== */

.ms-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* The two permitted alternative surfaces. */
.ms-section--tint { background: var(--ms-surface); }

.ms-section--green { background: var(--ms-green-700); color: rgba(255, 255, 255, .88); }
.ms-section--green h1,
.ms-section--green h2,
.ms-section--green h3,
.ms-section--green h4 { color: #fff; }
.ms-section--green a { color: #fff; }
.ms-section--green .ms-eyebrow { color: rgba(255, 255, 255, .85); }
.ms-section--green .ms-eyebrow::before { background: rgba(255, 255, 255, .6); }

.ms-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--ms-font-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ms-green-700);
}
.ms-eyebrow::before {
	content: "";
	width: 22px; height: 2px;
	border-radius: 2px;
	background: var(--ms-green-500);
}