/* HVH Healthcare — small hand-written extras that sit on top of the
   compiled Tailwind utility file (assets/css/tailwind.css). */

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Icons are rendered with fill="none" by default (outline style). Certain
   icons — the testimonial star rating — need a solid fill instead. */
.hvh-icon-fill {
	fill: currentColor;
}

/* Standard, accessible "skip to content" link. */
.skip-link.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	background-color: #0d2240;
	border-radius: 6px;
	color: #fff;
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 12px 20px;
	top: 8px;
	left: 8px;
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	text-decoration: none;
}

/* ============================================================
   Main Navigation — modern alignment & interaction polish
   ============================================================
   Targets the markup rendered by hvh_primary_nav() in
   inc/theme-setup-helpers.php, inside header.php's
   <nav id="hvh-navbar">. Fixes items like "Doctor Consultation"
   or "Why Us" wrapping onto two lines and throwing the whole bar
   out of vertical alignment, and replaces the old block hover
   state with a lighter, more modern animated underline.
*/

/* The nav row itself: don't let the logo or the CTA/hamburger
   cluster get squeezed as the link list competes for space. */
#hvh-navbar > div.h-16 {
	gap: 1.5rem;
}
#hvh-navbar > div.h-16 > a.group,
#hvh-navbar > div.h-16 > div:last-child {
	flex-shrink: 0;
}

/* The desktop link list: a direct child <ul> of the nav row (as
   opposed to the mobile drawer's <ul>, which stacks vertically and
   must NOT get this treatment). Never wrap onto a second line.
   NOTE: display (hidden below 1280px, flex at 1280px+) is left to
   Tailwind's own .hidden / .xl:flex utility classes already on this
   element — don't set `display` here, or it would override .hidden
   and force the desktop nav to show on mobile too.
   NOTE: deliberately NOT setting min-width:0 here — doing so lets a
   flex item shrink narrower than its (nowrap) text content, and the
   overflowing text then visually overlaps whatever sits next to it
   (e.g. the "Get Free Consultation" button) instead of the row
   simply taking the width it needs. The nav now only switches on at
   the xl breakpoint (1280px), which comfortably fits the full link
   set at its natural width — see the media queries below for the
   numbers this is based on. */
#hvh-navbar > div.h-16 > ul {
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.125rem;
}
#hvh-navbar > div.h-16 > ul > li {
	flex-shrink: 0;
	list-style: none;
}

/* Individual links: fixed single-line height so every item sits on
   exactly the same baseline, tighter default padding so all seven
   items comfortably fit without wrapping, and a modern animated
   underline instead of the old filled hover background. */
.hvh-nav-link {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	height: 2.25rem;
	white-space: nowrap;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0.7rem !important;
	padding-right: 0.7rem !important;
	letter-spacing: 0.01em;
	background: transparent !important;
}

.hvh-nav-link::after {
	content: '';
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.3rem;
	height: 2px;
	background: #c9a84c;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}
.hvh-nav-link:hover::after,
.hvh-nav-link:focus-visible::after {
	transform: scaleX(1);
}

/* Active/current page (works with a real WordPress menu — WP adds
   these classes to the parent <li> automatically). */
.current-menu-item > .hvh-nav-link,
.current_page_item > .hvh-nav-link {
	color: #ffffff !important;
}
.current-menu-item > .hvh-nav-link::after,
.current_page_item > .hvh-nav-link::after {
	transform: scaleX(1);
}

.hvh-nav-link:focus-visible {
	outline: 2px solid #c9a84c;
	outline-offset: 2px;
	border-radius: 6px;
}

/* Roomier spacing once there's clearly enough width to spare (past
   the point the nav first switches on at 1280px). Calculated against
   the actual link set (Home / About / Services / Treatments / Doctor
   Consultation / Why Us / Contact) plus the logo and CTA button, so
   this stays comfortable rather than guessed. */
@media (min-width: 1366px) {
	.hvh-nav-link {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.hvh-nav-link::after {
		left: 1rem;
		right: 1rem;
	}
}

/* Mobile menu links keep their own full-width, stacked style — make
   sure the underline/nowrap rules above don't leak into it. */
#hvh-mobile-menu .hvh-nav-link {
	display: block !important;
	height: auto;
	white-space: normal;
	padding-top: 0.625rem !important;
	padding-bottom: 0.625rem !important;
}
#hvh-mobile-menu .hvh-nav-link::after {
	display: none;
}

/* Mobile nav open state (toggled from assets/js/main.js). */
#hvh-mobile-menu.hvh-open {
	max-height: 100vh;
}

/* Minimal prose styling for plain WordPress page/post content (Word docs,
   blog posts) that isn't wrapped in Tailwind utility classes. */
.prose {
	color: #374151;
	line-height: 1.75;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
	color: #0d1f35;
	font-weight: 800;
	margin-top: 1.6em;
	margin-bottom: 0.6em;
}
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.375rem; }
.prose p { margin-bottom: 1.2em; }
.prose a { color: #0d9488; text-decoration: underline; }
.prose ul, .prose ol { margin: 1.2em 0; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose img { border-radius: 1rem; margin: 1.5em 0; }
.prose blockquote {
	border-left: 4px solid #14b8a6;
	padding-left: 1.2em;
	font-style: italic;
	color: #4b5563;
	margin: 1.5em 0;
}

/* Comment form (wp comment_form()) — light styling so it matches the rest
   of the theme without needing the full utility build to catch every class
   WordPress core generates for it. */
.hvh-comments input[type="text"],
.hvh-comments input[type="email"],
.hvh-comments input[type="url"],
.hvh-comments textarea {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}
.hvh-comments label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #4b5563;
	margin-bottom: 0.375rem;
}