/*
Theme Name:        Karis Clinic
Theme URI:         https://karisclinic.com
Description:       Theme for Karis Clinic. The homepage is a header and a large hero card; every other page uses the same header with its editor content below.
Version:           1.6.0
Requires at least: 6.0
Tested up to:      7.1
Requires PHP:      7.4
Author:            Karis Clinic
Text Domain:       karis
*/

/* Outfit (variable, weights 300-700), self-hosted. Licence: assets/fonts/OFL.txt */
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.karis-lp {
	--k-navy: #231c5a;
	--k-ink: #1b1840;
	--k-blue: #2b8af3;
	--k-blue-600: #1f73d6;
	--k-red: #ec1c24;
	--k-mist: #f3f6fc;
	--k-line: #e3e8f3;
	--k-radius: clamp(24px, 3vw, 48px);
	--k-gutter: clamp(12px, 1.6vw, 26px);
	--k-ease: cubic-bezier(.2, .7, .2, 1);

	margin: 0;
	background: #fff;
	color: var(--k-ink);
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

body:where(.karis-lp) img { max-width: 100%; height: auto; display: block; }
body:where(.karis-lp) a { color: inherit; text-decoration: none; }
:where(.k-header, .k-hero) :where(h1, p) { margin: 0; }
:where(.k-header) :where(ul) { margin: 0; padding: 0; list-style: none; }
:where(.karis-lp) :where(button) { font: inherit; color: inherit; }

.k-ico { width: 1.25em; height: 1.25em; flex: none; }

.k-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--k-navy); color: #fff !important; padding: 10px 16px; border-radius: 10px; }
.k-skip:focus { left: 12px; }
.karis-lp :focus-visible { outline: 3px solid var(--k-blue); outline-offset: 3px; border-radius: 8px; }

/* ---------- Buttons ---------- */
.k-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	padding: .95em 1.9em; border-radius: 999px; border: 0; cursor: pointer;
	font-weight: 500; font-size: 1rem; line-height: 1.1; letter-spacing: .005em; white-space: nowrap;
	transition: transform .25s var(--k-ease), box-shadow .25s var(--k-ease), background-color .25s, color .25s;
}
.k-btn--lg {
	font-size: clamp(1rem, 1.35vw, 1.4rem);
	padding: .68em 1.75em .76em;
}

.k-btn--primary {
	background: var(--k-blue);
	color: #fff;
	box-shadow: 0 8px 35px rgba(43, 138, 243, .35);
}
.k-btn--primary:hover { background: var(--k-blue-600); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43, 138, 243, .45); }

.k-btn--light { background: #fff; color: var(--k-navy); box-shadow: 0 10px 30px rgba(10, 8, 40, .25); }
.k-btn--light:hover { color: var(--k-navy); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10, 8, 40, .32); }

.k-pulse { position: relative; width: .55em; height: .55em; border-radius: 50%; background: var(--k-red); flex: none; }
.k-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--k-red); animation: k-pulse 1.8s ease-out infinite; }
@keyframes k-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

/* ---------- Header ---------- */
.k-header { position: relative; z-index: 50; background: #fff; }

.k-header__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 16px 26px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.k-logo img { height: clamp(40px, 3.9vw, 64px); width: auto; }

.k-nav {
	margin: 0 10px 0 auto;
	display: flex;
	align-items: center;
	visibility: hidden;
}
.k-nav ul {
	display: flex;
	gap: 30px;
}
.k-nav a:not(.k-btn) {
	position: relative;
	font-size: 1.10rem;
	font-weight: 500;
	color: var(--k-navy);
	padding: 4px 0;
	transition: color .2s;
	letter-spacing: 0.15px;
}
.k-nav a:not(.k-btn)::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
	background: var(--k-red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--k-ease);
}
.k-nav a:not(.k-btn):hover { color: var(--k-blue); }
.k-nav a:not(.k-btn):hover::after,
.k-nav .current-menu-item > a::after,
.k-nav a[aria-current="page"]::after { transform: scaleX(1); }
.k-nav__cta { display: none; }

.k-header__cta {
	font-size: clamp(.95rem, 1.15vw, 1.2rem);
	padding: .65em 1.35em;
	width: 200px;
	max-width: 100%;
}

.k-burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--k-line); background: #fff; color: var(--k-navy); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.k-burger .k-ico { width: 24px; height: 24px; }
.k-burger .k-burger__open { display: flex; }
.k-burger .k-burger__close { display: none; }
.k-burger[aria-expanded="true"] .k-burger__open { display: none; }
.k-burger[aria-expanded="true"] .k-burger__close { display: flex; }

/* ---------- Hero ---------- */
.k-hero-wrap {
	padding: 0 var(--k-gutter);
	padding-bottom: 25px;
}
.k-hero {
	position: relative; overflow: hidden; isolation: isolate;
	max-width: 1880px; margin: 0 auto;
	border-radius: var(--k-radius);
	height: clamp(620px, 53.2vw, 940px);
	/* Header + card always fill at least the whole screen (25px = the gap under the card).
	   --k-hh is the measured header height (set by karis.js); the calc() below is its fallback. */
	min-height: calc(100vh - var(--k-hh) - var(--k-ab, 0px) - 25px);
	min-height: calc(100svh - var(--k-hh) - var(--k-ab, 0px) - 25px);
	color: #fff;
}
:root { --k-hh: calc(32px + clamp(40px, 3.9vw, 64px)); }
.admin-bar { --k-ab: 32px; }
@media (max-width: 782px) { .admin-bar { --k-ab: 46px; } }
@media (max-width: 600px) { :root { --k-hh: 69px; } }
.k-hero__bg {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(60% 70% at 72% 40%, rgba(43, 138, 243, .55) 0%, rgba(43, 138, 243, 0) 60%),
		radial-gradient(40% 45% at 8% 100%, rgba(236, 28, 36, .14) 0%, rgba(236, 28, 36, 0) 70%),
		linear-gradient(125deg, #231c5a 0%, #1f2f8f 48%, #1f55c2 100%);
}
.k-hero__bg::after { /* soft grain for depth */
	content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Copy column scales with the viewport so the headline always breaks
   into the same three lines as the design. */
.k-hero__copy {
	position: relative; z-index: 2;
	width: 50%;
	padding: clamp(56px, 7.4vw, 136px) 0 0 clamp(28px, 3vw, 56px);
}
.k-hero__title {
	font-size: clamp(2.2rem, 3.4vw, 3.9rem);
	line-height: .99; font-weight: 600; letter-spacing: -.022em;
	max-width: 9.8em; /* keeps the three-line break at any size */
}
.k-hero__text {
	margin-top: clamp(16px, 1.6vw, 30px);
	font-size: clamp(1rem, 1.2vw, 1.35rem);
	line-height: 1.4; font-weight: 300; color: rgba(255, 255, 255, .93);
	max-width: 22.6em;
}
.k-hero__actions { margin-top: clamp(28px, 3.7vw, 64px); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Contact form (hero) ---------- */
.k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.k-form { margin-top: clamp(22px, 2.2vw, 40px); width: min(100%, 34vw); scroll-margin-top: 24px; } /* stops short of the photo */
html { scroll-behavior: smooth; } /* "Talk to Us" glides to the form */
.k-form__title { margin: 0 0 .75em; font-size: clamp(1.1rem, 1.3vw, 1.5rem); font-weight: 500; line-height: 1.2; color: #fff; }
.k-form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.k-form__field {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: .8em 1em;
	font: inherit;
	font-size: inherit;
	line-height: inherit;
	font-size: clamp(.95rem, 1vw, 1.1rem);
	line-height: 1.3;
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 25px;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.k-form__field::placeholder { color: rgba(255, 255, 255, .72); opacity: 1; }
.k-form__field:focus,
.k-form__field:focus-visible { outline: none; border-color: #fff; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.k-form__message {
	min-height: clamp(120px, 9.5vw, 180px);
	resize: none;
}
.k-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.k-form__note { margin: 0 0 12px; padding: .6em .9em; border-radius: 6px; background: rgba(255, 255, 255, .14); font-size: .95rem; line-height: 1.4; }
.k-form__note--error { background: rgba(236, 28, 36, .28); }
.k-form .k-hero__actions { margin-top: 4px; }

.k-hero__media {
	position: absolute; right: -1px; bottom: -1px; top: 0; z-index: 1; /* 1px bleed hides sub-pixel slivers at the rounded edge */
	display: flex; align-items: flex-end; justify-content: flex-end;
	pointer-events: none;
}
.k-hero__media picture, .k-hero__media img { height: 100%; width: auto; max-width: none; }
.k-hero__media picture { height: min(92%, 49vw, 866px); } /* breathing room above; capped so a tall screen can't grow it into the form */
.k-hero__media img {
	filter: drop-shadow(-24px 10px 40px rgba(10, 8, 40, .28));
	animation: k-rise 1.1s var(--k-ease) both .1s;
}
@keyframes k-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }

.k-hero__copy > * { animation: k-fade .9s var(--k-ease) both; }
.k-hero__copy > :nth-child(2) { animation-delay: .08s; }
.k-hero__copy > :nth-child(3) { animation-delay: .16s; }
@keyframes k-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Page content (block editor) ---------- */
.k-content { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 96px) 24px; }
.k-content:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.karis-lp *, .karis-lp *::before, .karis-lp *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
	.k-nav { margin-right: 0; }
	.k-hero__copy { padding-top: 48px; } /* room for the contact form */
}

@media (max-width: 1024px) {
	.k-hero__copy { width: 47%; padding-top: 48px; }
	.k-hero__media picture { height: min(81%, 49vw); } /* keeps the photo clear of the form */
	.k-form { width: min(100%, 32vw); }
	.k-hero__title { font-size: clamp(1.9rem, 3.4vw, 2.2rem); }
	.k-hero__text { font-size: 1.02rem; }
}

@media (max-width: 900px) {
	.karis-lp { font-size: 16px; }
	.k-header__cta { margin-left: auto; } /* menu is hidden, so push the button right */
	.k-form__field { font-size: 16px; } /* under 16px, iPhones zoom the whole page when a field is tapped */
	.k-nav {
		position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; margin: 0;
		flex-direction: column; align-items: stretch; gap: 8px;
		background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 24px 60px rgba(35, 28, 90, .22);
		opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--k-ease), visibility .25s;
	}
	.k-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.k-nav ul { flex-direction: column; gap: 0; }
	.k-nav a:not(.k-btn) { display: block; padding: 14px 12px; border-radius: 12px; font-size: 1.1rem; }
	.k-nav a:not(.k-btn)::after { display: none; }
	.k-nav a:not(.k-btn):hover, .k-nav .current-menu-item > a, .k-nav a[aria-current="page"] { background: var(--k-mist); }
	.k-nav__cta { margin: 6px 0 0; }

	/* Hero stacks: copy on top, doctor below */
	.k-hero { height: auto; display: flex; flex-direction: column; }
	.k-hero__copy { width: auto; padding: 48px 28px 0; }
	.k-hero__title { font-size: clamp(2rem, 7.4vw, 3rem); }
	.k-form { width: auto; }
	.k-hero__media { position: relative; inset: auto; margin-top: 28px; justify-content: center; }
	.k-hero__media picture, .k-hero__media img { height: auto; width: min(100%, 520px); }
}

@media (max-width: 600px) {
	.k-hero-wrap { padding-left: 12px; padding-right: 12px; }
	.k-hero__copy { padding: 40px 22px 0; }
	.k-hero__actions .k-btn { width: 100%; }
	.k-form__row { grid-template-columns: 1fr; }
	.k-logo img { height: 45px; }
}

/* ---------- Inner pages (index.php) ---------- */
.k-page { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 96px) 24px; }
.k-page__title {
	margin: 0 0 .6em; color: var(--k-navy);
	font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em;
}
.k-page__title a:hover { color: var(--k-blue); }
.k-page__entry + .k-page__entry { margin-top: clamp(40px, 5vw, 72px); }
.k-page__body a:not(.wp-element-button) { color: var(--k-blue-600); text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Footer (footer.php) ----------
   Carries the registered company name, address and telephone on every page.
   White on the header's own width and gutters, so the two ends of the page
   line up; the hairline is what stops it floating against the white body.
   One row on a desktop, stacked on a phone. */
.k-footer { background: #fff; border-top: 1px solid var(--k-line); color: var(--k-ink); }
.k-footer__inner {
	max-width: 1920px; margin: 0 auto; padding: 14px 26px 16px;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 8px 24px; flex-wrap: wrap;
}

/* Three groups on one row: name, address, telephone. The address is one item,
   not two — its lines are inline spans and the whitespace between them in the
   markup is what joins "Nakasero II, All Saints," to "Kampala, Uganda." */
.k-footer__legal {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: 4px clamp(7px, 0.8vw, 13px);
	font-size: .92rem; line-height: 1.6;
}
.k-footer__name { color: var(--k-navy); font-weight: 600; }
.k-footer__address { font-style: normal; color: #5b6480; }
.k-footer__tel { color: #5b6480; }

/* The dot belongs to the item that follows it, so an item that wraps onto its
   own line on a narrow screen carries its separator with it.

   This margin and the flex gap above STACK: the space you see between two
   items is the sum of the two, so keep them in step when adjusting. */
.k-footer__address::before, .k-footer__tel::before {
	content: "\00b7"; margin-right: clamp(7px, 0.8vw, 13px); color: #c3cadb;
}

.k-footer__tel a {
	color: var(--k-blue-600); font-weight: 600; text-decoration: underline;
	text-underline-offset: .18em; text-decoration-color: rgba(31, 115, 214, .35);
}
.k-footer__tel a:hover { color: var(--k-blue-600); text-decoration-color: currentColor; }
.k-footer__copy { margin: 0; font-size: .82rem; color: #8089a3; }

/* Phone: stack, and the dots have nothing left to separate. */
@media (max-width: 860px) {
	.k-footer__inner { display: block; padding: 24px; }
	.k-footer__legal { display: block; }
	.k-footer__name { display: block; margin-bottom: .35em; }
	.k-footer__address { display: block; }
	.k-footer__line { display: block; }
	.k-footer__tel { display: block; margin-top: .45em; }
	.k-footer__address::before, .k-footer__tel::before { content: none; margin-right: 0; }
	.k-footer__copy { margin-top: 1.4em; }
}

/* ---------- Header telephone (header.php) ----------
   Sits immediately before the Talk to Us button on desktop.

   Hidden at 900px and below: at that width the bar is already carrying the
   logo, a 200px button and the burger, and on a 360px phone the button is
   only fitting because flex shrinks it to its text. Another item would push
   the row over. The number is still in the footer on every page. */
.k-header__tel {
	display: inline-flex; align-items: center; gap: .5em;
	color: #203b9d; white-space: nowrap;
	font-weight: 600; font-size: clamp(.95rem, 1.1vw, 1.1rem);
	transition: color .25s;
}
.k-header__tel .k-ico { width: 1.15em; height: 1.15em; color: var(--k-blue); }
.k-header__tel:hover { color: var(--k-blue); }

@media (max-width: 900px) {
	.k-header__tel { display: none; }
}