/* ==========================================================================
   Ekam — Additional responsive & accessibility rules
   Loaded after ekam-desktop.css / ekam-mobile.css so it can safely refine
   them without needing to touch those two large stylesheets directly.
   ========================================================================== */

/* Sane, predictable box model everywhere. */
html {
	box-sizing: border-box;
}

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

/* Fluid media: images/embeds never overflow their container. */
img,
embed,
iframe,
object,
video {
	max-width: 100%;
	height: auto;
}

.wp-caption,
.wp-caption img {
	max-width: 100%;
}

/* Prevent long/unbroken words (long URLs, etc.) from causing horizontal
   scroll on narrow screens. */
body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

/* Skip link (added in header.php) — visually hidden until focused. */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background: #00514c;
	border-radius: 4px;
	clip: auto !important;
	clip-path: none;
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 10px 16px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
	position: fixed !important;
}

/* Visible focus outline for keyboard users across the theme's interactive
   elements (the original stylesheets did not define one). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Extra breakpoints — the shipped stylesheets only switch at 700px and
   1000px, which leaves a fairly large "tablet" gap and no fine-tuning
   for very small phones.
   --------------------------------------------------------------------- */

/* Small tablets / large phones in landscape (701px–900px):
   tighten spacing a little more than the plain desktop styles do,
   without triggering the full mobile layout. */
@media only screen and (min-width: 701px) and (max-width: 900px) {
	.box-view,
	.top-bar,
	.site-header {
		max-width: 100% !important;
	}

	.nav-container,
	.top-nav-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Very small phones (≤ 400px): reduce heading sizes a bit further than
   the base mobile stylesheet does, and give the toggle-switch panel a
   little more breathing room. */
@media only screen and (max-width: 400px) {
	h1, h1 a { font-size: 24px; }
	h2, h2 a { font-size: 20px; }
	h3, h3 a { font-size: 18px; }

	.ekam-pref-fab {
		width: 46px;
		height: 46px;
		font-size: 19px;
	}
}

/* Respect the visitor's OS-level "reduce motion" preference even before
   they open the theme-features panel. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}