/**
 * EPIC Theme — main stylesheet
 *
 * Values extracted from Sway's style.css so the swap produces no visual
 * change. Colours and sizes come from CSS custom properties written by
 * inc/enqueue.php, which reads the settings panel.
 *
 * Contents
 *   1.  Reset & base
 *   2.  Container
 *   3.  Top bar
 *   4.  Navbar
 *   5.  Menu & dropdowns
 *   6.  Mobile navigation
 *   7.  Footer
 *   8.  Back to top
 *   9.  Utilities
 *   10. Print
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: var(--epic-body-size, 16px);
	line-height: calc(var(--epic-body-lh, 24px) / var(--epic-body-size, 16px));
	color: var(--epic-text, #1c2833);
	background: #fff;
	overflow-x: hidden;
}

/* Heading stack — matched to the live typography settings */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 400; }

h1 { font-family: 'Roboto', sans-serif;       font-size: 32px; line-height: 30px; }
h2 { font-family: 'Josefin Sans', sans-serif; font-size: 24px; line-height: 30px; }
h3 { font-family: 'Josefin Sans', sans-serif; font-size: 17px; line-height: 25px; }
h4 { font-family: 'Roboto', sans-serif;       font-size: 19px; line-height: 24px; }
h5 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 18px; }
h6 { font-size: 24px; line-height: 24px; }

a {
	color: var(--epic-teal, #3c93a2);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover { color: var(--epic-accent, #dd3333); }

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

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }

/* ═══════════════════════════════════════════════════════════════════════
   2. CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */

.epic-container {
	width: 100%;
	max-width: 1240px;   /* Sway's largest container */
	margin: 0 auto;
	padding: 0 15px;
}

@media (max-width: 1279px) { .epic-container { max-width: 970px; } }
@media (max-width: 991px)  { .epic-container { max-width: 750px; } }
@media (max-width: 767px)  { .epic-container { max-width: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════
   3. TOP BAR
   ═══════════════════════════════════════════════════════════════════════ */

.epic-topbar {
	background: var(--epic-topbar-bg, #eef7f9);
	color: var(--epic-topbar-color, #2b2f4c);
	font-size: 13px;
	letter-spacing: .01em;
	font-weight: 500;
	position: relative;
	z-index: 1091;
}

.epic-topbar--bordered {
	border-bottom: 1px solid rgba(132, 132, 132, .15);
}

.epic-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 40px;
}

.epic-topbar__left,
.epic-topbar__right {
	display: flex;
	align-items: center;
	gap: 22px;
	line-height: 1;
}

.epic-topbar__item {
	display: inline-flex;
	align-items: center;
	line-height: 40px;
	height: 40px;
}

.epic-topbar__item a,
.epic-topbar__item.epic-topbar__item--plain {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
}

.epic-topbar__item a:hover {
	color: var(--epic-topbar-hover, #dd3333);
}

.epic-topbar__item .epic-icon { flex: 0 0 auto; opacity: .85; }

/* Right-hand navigation */
.epic-topbar__menu {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epic-topbar__menu a {
	color: inherit;
	line-height: 40px;
}

.epic-topbar__menu a:hover {
	color: var(--epic-topbar-hover, #dd3333);
}

/* Dividers — a vertical rule to the right of each contact item */
.epic-topbar--bordered .epic-topbar__item {
	padding-right: 22px;
	border-right: 1px solid rgba(132, 132, 132, .16);
}

.epic-topbar--bordered .epic-topbar__left { gap: 22px; }

.epic-topbar--bordered .epic-topbar__menu li + li {
	padding-left: 22px;
	border-left: 1px solid rgba(132, 132, 132, .16);
}

.epic-topbar--bordered .epic-topbar__menu { gap: 0; }
.epic-topbar--bordered .epic-topbar__menu li { padding-right: 22px; }
.epic-topbar--bordered .epic-topbar__menu li:last-child { padding-right: 0; }

@media (max-width: 991px) {
	.epic-topbar:not(.epic-topbar--mobile) { display: none; }

	.epic-topbar__inner { gap: 0; }

	/* Contact text is hidden on mobile — the icon alone remains,
	   matching the live site. */
	.epic-topbar__item span:not(.epic-icon-wrap) { display: none; }
	.epic-topbar__item .epic-icon { margin: 0; }

	.epic-topbar--bordered .epic-topbar__item { padding-right: 14px; }

	.epic-topbar__left { gap: 14px; }

	.epic-topbar__menu { font-size: 12px; }

	.epic-topbar--bordered .epic-topbar__menu li,
	.epic-topbar--bordered .epic-topbar__menu li + li {
		padding-left: 10px;
		padding-right: 10px;
		border-left: 0;
	}
}

@media (max-width: 480px) {
	.epic-topbar__menu { font-size: 11px; }
	.epic-topbar--bordered .epic-topbar__menu li,
	.epic-topbar--bordered .epic-topbar__menu li + li {
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   4. NAVBAR
   ═══════════════════════════════════════════════════════════════════════ */

.epic-navbar {
	background: #fff;
	z-index: 1090;
	transition: box-shadow .25s ease, padding .25s ease;
}

.epic-navbar--fixed {
	position: sticky;
	top: 0;
}

.admin-bar .epic-navbar--fixed { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .epic-navbar--fixed { top: 46px; }
}

.epic-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: var(--epic-header-pad, 20px);
	padding-bottom: var(--epic-header-pad, 20px);
}

/* Shadow once scrolled */
.epic-navbar.is-stuck {
	box-shadow: 0 2px 18px rgba(38, 42, 76, .08);
}

.epic-navbar.is-stuck .epic-navbar__inner {
	padding-top: calc(var(--epic-header-pad, 20px) * .6);
	padding-bottom: calc(var(--epic-header-pad, 20px) * .6);
}

/* Logo */
.epic-navbar__brand { flex: 0 0 auto; }

.epic-logo { display: inline-block; line-height: 0; }

.epic-logo__img {
	width: var(--epic-logo-w, 120px);
	height: auto;
}

.epic-logo__text {
	font-size: 22px;
	font-weight: 700;
	color: var(--epic-teal, #3c93a2);
	line-height: 1.2;
}

@media (max-width: 991px) {
	.epic-logo__img { width: var(--epic-logo-w-mob, 80px); }
	.epic-navbar__brand { line-height: 0; }
}

/* Menu alignment.
   With the logo on the left, "centre" centres the menu within the space
   that remains — which is how the live site renders. */
.epic-navbar__menu { flex: 1 1 auto; display: flex; }

.epic-navbar--menu-center .epic-navbar__menu { justify-content: center; }
.epic-navbar--menu-right  .epic-navbar__menu { justify-content: flex-end; }
.epic-navbar--menu-left   .epic-navbar__menu { justify-content: flex-start; padding-left: 30px; }

@media (max-width: 991px) {
	.epic-navbar--menu-center .epic-navbar__menu,
	.epic-navbar--menu-right  .epic-navbar__menu { justify-content: flex-start; padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. MENU & MEGA DROPDOWNS

   Every top-level item that has children opens a full-width mega panel
   spanning the nav area, with items flowed into three balanced columns.
   This replaces the Max Mega Menu plugin.
   ═══════════════════════════════════════════════════════════════════════ */

.epic-navbar__menu { position: relative; }

.epic-menu {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epic-menu-item--depth-0 { position: static; }   /* mega panels span the nav */

.epic-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px var(--epic-menu-gap, 13px);
	font-size: var(--epic-menu-size, 17px);
	font-weight: 500;
	line-height: 1.5;
	color: var(--epic-menu-color, #3c93a2);
	white-space: nowrap;
	position: relative;
}

/**
 * 1.17.0 — Single-line desktop menu + settings-driven sizing.
 *
 * Font size and item spacing come from Theme Settings via
 * --epic-menu-size / --epic-menu-gap. The rules below are only laptop
 * fallbacks (992-1500px) so the menu stays on ONE line out of the box;
 * the "Menu Font Size (laptop)" / "Menu Item Spacing (laptop)" settings
 * override them (printed inline with !important from enqueue.php).
 */
@media (min-width: 992px) {
	.epic-navbar .epic-container { max-width: 1240px; }

	.epic-menu { flex-wrap: nowrap; }
}

/**
 * 1.17.2 — Wide-screen centring, corrected.
 * 1.17.1 let the brand column shrink, which crushed the logo on big
 * screens; reverted. True page-centring is geometrically impossible in a
 * 1240px container (logo + half the menu overlap), so instead: from
 * 1501px the navbar container widens to 1600px, and from 1680px — where
 * the maths is safe for a logo up to ~340px — the menu is absolutely
 * centred on the container while the logo keeps its full size and place.
 * The mega panels anchor to the menu, so they open centred beneath it.
 */
@media (min-width: 1501px) {
	.epic-navbar .epic-container { max-width: 1600px; }
}

@media (min-width: 1680px) {
	.epic-navbar--menu-center .epic-navbar__inner { position: relative; }

	.epic-navbar--menu-center .epic-navbar__menu {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: max-content;
	}
}

@media (min-width: 992px) and (max-width: 1399px) {
	.epic-logo__img { width: min(var(--epic-logo-w, 120px), 230px); }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.epic-menu-item--depth-0 > .epic-menu-link {
		font-size: 12.5px;
		padding: 8px 5px;
	}

	.epic-menu-item--depth-0 > .epic-menu-link::after {
		left: 5px;
		right: 5px;
	}
}

@media (min-width: 1200px) and (max-width: 1500px) {
	.epic-menu-item--depth-0 > .epic-menu-link {
		font-size: 15px;
		padding: 8px 9px;
	}

	.epic-menu-item--depth-0 > .epic-menu-link::after {
		left: 9px;
		right: 9px;
	}
}

/* Active and hover both show red text with a red underline */
.epic-menu-item--depth-0 > .epic-menu-link::after {
	content: "";
	position: absolute;
	left: var(--epic-menu-gap, 13px);
	right: var(--epic-menu-gap, 13px);
	bottom: 0;
	height: 2px;
	background: var(--epic-menu-hover, #dd3333);
	opacity: 0;
	transition: opacity .2s ease;
}

/**
 * Hover styling is scoped to devices that actually hover. On a phone the
 * :hover state sticks after a tap, which left menu items showing the red
 * hover colour against the teal panel.
 */
@media (hover: hover) and (min-width: 992px) {
	.epic-menu-item--depth-0:hover > .epic-menu-link {
		color: var(--epic-menu-hover, #dd3333);
	}

	.epic-menu-item--depth-0:hover > .epic-menu-link::after {
		opacity: 1;
	}
}

.epic-menu-item--depth-0.epic-current > .epic-menu-link {
	color: var(--epic-menu-hover, #dd3333);
}

.epic-menu-item--depth-0.epic-current > .epic-menu-link::after {
	opacity: 1;
}

/* Caret */
.epic-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	flex: 0 0 auto;
	margin-left: 1px;
	transition: transform .2s ease;
}

/* ── Mega panel ──────────────────────────────────────────────────────── */

.epic-submenu--depth-0 {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	padding: 16px 28px 24px;
	list-style: none;
	background: #fff;
	border-radius: 0;
	box-shadow: 0 8px 22px rgba(38, 42, 76, .10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 1100;

	/* Three balanced columns, filling top-to-bottom */
	column-count: 3;
	column-gap: 34px;
}

.epic-menu-item--depth-0:hover > .epic-submenu--depth-0,
.epic-menu-item--depth-0:focus-within > .epic-submenu--depth-0 {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.epic-submenu--depth-0 > .epic-menu-item {
	break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	margin-bottom: 2px;
}

.epic-submenu--depth-0 .epic-menu-link {
	display: block;
	padding: 11px 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .3px;
	text-transform: uppercase;
	white-space: normal;
	color: var(--epic-teal, #3c93a2);
}

@media (hover: hover) {
	.epic-submenu--depth-0 .epic-menu-link:hover {
		color: var(--epic-menu-hover, #dd3333);
	}
}

.epic-submenu--depth-0 .epic-menu-link::after { display: none; }

/* ── Third level, if a menu ever goes deeper ─────────────────────────── */

.epic-submenu--depth-1 {
	margin: 2px 0 8px;
	padding: 0 0 0 14px;
	list-style: none;
	border-left: 2px solid rgba(60, 147, 162, .18);
}

.epic-submenu--depth-1 .epic-menu-link {
	padding: 6px 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--epic-text, #1c2833);
}

.epic-submenu--depth-1 .epic-menu-link:hover {
	color: var(--epic-teal, #3c93a2);
}

.epic-submenu--depth-1 .epic-caret { display: none; }

.epic-submenu-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   6. MOBILE NAVIGATION

   Teal slide-down panel. Active item is a full-width red bar. Expanded
   sub-menus sit on white with uppercase teal links.
   ═══════════════════════════════════════════════════════════════════════ */

.epic-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.epic-nav-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto;
	background: var(--epic-text, #1c2833);
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

.epic-nav-toggle[aria-expanded="true"] .epic-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.epic-nav-toggle[aria-expanded="true"] .epic-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.epic-nav-toggle[aria-expanded="true"] .epic-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px) {

	.epic-nav-toggle { display: flex; }

	/**
	 * The menu wrapper is a full-width flex row that collapses to zero
	 * height when closed. Without an explicit zero basis some browsers
	 * still reserve a line box, leaving dead white space under the logo.
	 */
	.epic-navbar__inner {
		flex-wrap: wrap;
		align-items: center;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.epic-navbar__menu {
		flex: 0 0 100%;
		max-height: 0;
		min-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}

	.epic-navbar__menu:not(.is-open) {
		height: 0;
		margin: 0;
		padding: 0;
	}

	.epic-navbar__menu.is-open {
		max-height: calc(100vh - 150px);
		overflow-y: auto;
		margin-top: 8px;
	}

	.epic-menu {
		flex-direction: column;
		align-items: stretch;
		background: var(--epic-teal, #3c93a2);
		padding: 0;
	}

	.epic-menu-item--depth-0 { position: relative; }

	/**
	 * The base rule sets inline-flex, which sizes the link to its text —
	 * so the active/expanded red background only covered the label. On
	 * mobile the link must fill the row.
	 */
	.epic-menu-item--depth-0 > .epic-menu-link {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		padding: 12px 54px 12px 18px;   /* room for the toggle on the right */
		font-size: 15px;
		font-weight: 400;
		line-height: 1.5;
		color: #fff;
	}

	.epic-submenu--depth-0 .epic-menu-link { display: block; width: 100%; }

	.epic-menu-item--depth-0 > .epic-menu-link::after { display: none; }

	/* Active or expanded parent — full-width red bar */
	.epic-menu-item--depth-0.epic-current > .epic-menu-link,
	.epic-menu-item--depth-0.is-expanded > .epic-menu-link {
		background: var(--epic-accent, #dd3333);
		color: #fff;
	}

	/* Rotated arrow on the expanded row, so it reads as "tap to close". */
	.epic-menu-item--depth-0.is-expanded > .epic-submenu-toggle::after {
		transform: translate(-50%, -50%) rotate(180deg);
	}

	.epic-menu-item--depth-0 > .epic-menu-link .epic-caret { display: none; }

	/* Sub-menus become white accordions */
	.epic-submenu--depth-0 {
		position: static;
		width: auto;
		column-count: 1;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0 18px;
		background: #fff;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease, padding .3s ease;
	}

	.epic-submenu--depth-0.is-open {
		max-height: 2400px;
		padding: 14px 18px 18px;
	}

	.epic-submenu--depth-0 .epic-menu-link {
		padding: 10px 0 10px 10px;
		font-size: 13px;
	}

	.epic-submenu--depth-1 {
		border-left-color: rgba(60, 147, 162, .25);
		margin-left: 10px;
	}

	/* Expand / collapse control */
	/**
	 * Anchored to the top of the item. Using height:100% made it span the
	 * expanded sub-menu too, which centred the arrow somewhere in the middle
	 * of the list where it was invisible against white — leaving no way to
	 * see that a section could be collapsed.
	 */
	.epic-submenu-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 54px;
		height: 46px;
		background: none;
		border: 0;
		cursor: pointer;
		z-index: 2;
	}

	.epic-submenu-toggle::after {
		content: "";
		position: absolute;
		top: 23px;              /* centred on the 46px row */
		left: 50%;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid #fff;
		transform: translate(-50%, -50%);
		transition: transform .25s ease;
	}

	.epic-submenu-toggle[aria-expanded="true"]::after {
		transform: translate(-50%, -50%) rotate(180deg);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   7. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

.epic-footer {
	background: var(--epic-footer-bg, #000);
	color: var(--epic-footer-text, #fff);
	font-size: var(--epic-footer-size, 15px);
	line-height: 1.7;
}

/**
 * Full-width footer.
 *
 * The previous theme's "Footer Width: Full-Width" option made the footer
 * container span the whole viewport with a 30px gutter, rather than sitting
 * inside the 1240px page container. Matched here.
 */
.epic-footer--fullwidth .epic-container {
	max-width: none;
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
}

@media (max-width: 767px) {
	.epic-footer--fullwidth .epic-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.epic-footer__upper { padding: 60px 0 40px; }

/**
 * THE FIX.
 *
 * Sway produced `col-md-2-4`, a class that does not exist, so five columns
 * collapsed to full width between 768px and 960px and stacked — appearing
 * as a duplicated footer.
 *
 * NOTE: a CSS custom property cannot be used as the count inside repeat().
 * Browsers reject `repeat(var(--n), 1fr)` and the whole declaration is
 * dropped, leaving the widgets full width — the very bug we are fixing.
 * Explicit per-count classes are used instead.
 */
/**
 * Defensive: another stylesheet loading later could override `display`,
 * which would silently collapse the columns into a single stack. The
 * grid declaration is the one thing here that must not lose.
 */
.epic-footer__widgets {
	display: -ms-grid;
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
	width: 100%;
}

.epic-footer__widgets--1 { grid-template-columns: minmax(0, 1fr); }
.epic-footer__widgets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.epic-footer__widgets--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.epic-footer__widgets--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.epic-footer__widgets--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.epic-footer__widgets--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1199px) {
	.epic-footer__widgets,
	.epic-footer__widgets--2,
	.epic-footer__widgets--3,
	.epic-footer__widgets--4,
	.epic-footer__widgets--5,
	.epic-footer__widgets--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.epic-footer__widgets,
	.epic-footer__widgets--2,
	.epic-footer__widgets--3,
	.epic-footer__widgets--4,
	.epic-footer__widgets--5,
	.epic-footer__widgets--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

@media (max-width: 480px) {
	.epic-footer__widgets,
	.epic-footer__widgets--2,
	.epic-footer__widgets--3,
	.epic-footer__widgets--4,
	.epic-footer__widgets--5,
	.epic-footer__widgets--6 { grid-template-columns: 1fr; }
}

.epic-footer__column { min-width: 0; }

/* Maps and images must never push their column wider than the grid track. */
.epic-footer__column img,
.epic-footer__column iframe,
.epic-footer__column embed,
.epic-footer__column object {
	max-width: 100%;
}

.epic-footer__column iframe { width: 100%; border: 0; }

.epic-footer__column * { max-width: 100%; box-sizing: border-box; }

.epic-footer .footer-widget { margin-bottom: 26px; }
.epic-footer .footer-widget:last-child { margin-bottom: 0; }

.epic-footer .footer-widget__title {
	margin: 0 0 10px;
	font-size: 18px;      /* matches the previous theme */
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--epic-footer-heading, #3c93a2);
}

/* Optional: hide footer widget titles, as the previous theme's footer did. */
.epic-footer--hide-titles .footer-widget__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.epic-footer p { margin: 0 0 10px; }
.epic-footer p:last-child { margin-bottom: 0; }

.epic-footer a { color: var(--epic-footer-link, #fff); }
.epic-footer a:hover { color: var(--epic-footer-link-hov, #3c93a2); }

.epic-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.epic-footer li { margin-bottom: 7px; }
.epic-footer li:last-child { margin-bottom: 0; }

/* Copyright bar */
.epic-footer__lower {
	background: var(--epic-footer-bg-lower, #000);
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 18px 0;
}

.epic-footer__copyright {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. BACK TO TOP
   ═══════════════════════════════════════════════════════════════════════ */

/**
 * Positioned above the floating WhatsApp button, which occupies the
 * bottom-right corner. Overlapping the two causes hover states to fight
 * and the buttons to appear to flicker.
 */
.epic-to-top {
	position: fixed;
	right: 26px;
	bottom: 96px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--epic-teal, #3c93a2);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 1080;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.epic-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.epic-to-top:hover { background: #2f7480; }

/**
 * Hidden below the tablet breakpoint. The floating WhatsApp and call
 * buttons already occupy the bottom-right corner on mobile, and stacking a
 * third control there made them overlap and appear to flicker. The original
 * site does not show a back-to-top button on mobile either.
 */
@media (max-width: 991px) {
	.epic-to-top { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/**
 * No z-index here. A stacking context on the content wrapper can trap
 * position:fixed children — which is how floating buttons from plugins end
 * up clipped or invisible at some viewport sizes. It was only needed for
 * the old reveal-on-scroll footer, which has been removed.
 */
.epic-content {
	position: relative;
}



.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.epic-skip-link:focus {
	position: fixed !important;
	top: 10px; left: 10px;
	width: auto; height: auto;
	padding: 12px 20px;
	clip: auto;
	background: #fff;
	color: var(--epic-teal, #3c93a2);
	font-weight: 600;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
	z-index: 100000;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--epic-teal, #3c93a2);
	outline-offset: 2px;
}

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

/* ═══════════════════════════════════════════════════════════════════════
   10. PRINT
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
	.epic-topbar,
	.epic-navbar,
	.epic-footer,
	.epic-to-top { display: none !important; }

	.epic-content { margin: 0 !important; }
}

/* Administrator-only notice when no footer widgets are assigned */
.epic-footer__notice {
	margin: 0;
	padding: 18px 22px;
	background: rgba(255, 255, 255, .08);
	border-left: 3px solid var(--epic-teal, #3c93a2);
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--epic-footer-text, #fff);
}

.epic-footer__notice a { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   11. BLOG — single, archive, search
   ══════════════════════════════════════════════════════════════════════ */

.epic-single,
.epic-archive { padding: 50px 15px 70px; }

/* ── Single post ───────────────────────────────────────────────────── */

.epic-post { max-width: 820px; margin: 0 auto; }

.epic-post__header { margin-bottom: 26px; }

.epic-post__title {
	margin: 0 0 12px;
	font-family: 'Roboto', sans-serif;
	font-size: 34px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--epic-text);
}

.epic-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 14px;
	color: var(--epic-muted, #5d6d7e);
}

.epic-post__meta a { color: var(--epic-teal); }

.epic-post__thumb {
	margin: 0 0 30px;
	border-radius: 4px;
	overflow: hidden;
}

.epic-post__content { font-size: 17px; line-height: 1.75; }

.epic-post__content h2 { margin: 1.6em 0 .5em; }
.epic-post__content h3 { margin: 1.4em 0 .4em; }
.epic-post__content p  { margin: 0 0 1.2em; }
.epic-post__content ul,
.epic-post__content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.epic-post__content li { margin-bottom: .5em; }

.epic-post__content img { border-radius: 4px; margin: 1em 0; }

.epic-post__content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--epic-teal);
	font-style: italic;
	color: var(--epic-muted);
}

.epic-post__tags {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid #e6e9ec;
	font-size: 14px;
}

.epic-post__tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 12px;
	background: #f2f5f7;
	border-radius: 100px;
	color: var(--epic-muted);
}

.epic-post__tags a:hover { background: var(--epic-teal); color: #fff; }

.epic-post__nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	max-width: 820px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid #e6e9ec;
	font-size: 15px;
}

.epic-post__nav-next { text-align: right; }

/* ── Archive grid ──────────────────────────────────────────────────── */

.epic-archive__header { margin-bottom: 34px; }

.epic-archive__title {
	margin: 0 0 8px;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--epic-text);
}

.epic-archive__desc { color: var(--epic-muted); }

.epic-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

@media (max-width: 991px) { .epic-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .epic-post-grid { grid-template-columns: 1fr; } }

.epic-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e9ec;
	border-radius: 4px;
	overflow: hidden;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}

.epic-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
}

.epic-card__thumb { display: block; line-height: 0; }
.epic-card__thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.epic-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 20px 22px;
}

.epic-card__cat {
	display: inline-block;
	margin-bottom: 9px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--epic-teal);
}

.epic-card__title {
	margin: 0 0 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 19px;
	line-height: 1.35;
	font-weight: 600;
}

.epic-card__title a { color: var(--epic-text); }
.epic-card__title a:hover { color: var(--epic-teal); }

.epic-card__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--epic-muted);
	margin-bottom: 14px;
}

.epic-card__meta {
	margin-top: auto;
	font-size: 13px;
	color: var(--epic-muted);
}

/* ── Pagination ────────────────────────────────────────────────────── */

.pagination,
.epic-pagination { margin-top: 44px; }

.pagination .nav-links,
.epic-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.pagination .page-numbers,
.epic-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dfe4e8;
	border-radius: 4px;
	color: var(--epic-text);
	font-size: 15px;
}

.pagination .page-numbers:hover,
.epic-pagination .page-numbers:hover { border-color: var(--epic-teal); color: var(--epic-teal); }

.pagination .page-numbers.current,
.epic-pagination .page-numbers.current {
	background: var(--epic-teal);
	border-color: var(--epic-teal);
	color: #fff;
}

/* ── Search form ───────────────────────────────────────────────────── */

.epic-search { display: flex; gap: 8px; max-width: 460px; margin-top: 14px; }

.epic-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #dfe4e8;
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
}

.epic-search input[type="search"]:focus {
	outline: none;
	border-color: var(--epic-teal);
}

.epic-search button {
	padding: 11px 20px;
	background: var(--epic-teal);
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
}

.epic-search button:hover { background: #2f7480; }

/* ── 404 ───────────────────────────────────────────────────────────── */

.epic-404 { padding: 70px 15px 90px; text-align: center; }
.epic-404 h1 { font-size: 30px; margin-bottom: 12px; }
.epic-404 .epic-search { margin: 22px auto; }

.epic-404 .epic-button {
	display: inline-block;
	margin-top: 10px;
	padding: 12px 26px;
	background: var(--epic-teal);
	color: #fff;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.epic-card { transition: none; }
	.epic-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   12. PAGE CONTENT WRAPPER

   Matches the previous theme's structure so WPBakery rows have a padded
   container to align against, and full-width "stretch" rows have something
   to measure when they break out.
   ══════════════════════════════════════════════════════════════════════ */

.epic-page { position: relative; }

.epic-page__content { position: relative; }

/* WPBakery rows carry -15px side margins; the container's 15px padding
   cancels them so content lines up with the rest of the page. */
.epic-page__content > .vc_row { margin-left: -15px; margin-right: -15px; }

/* Stretched rows break out to the full viewport width. */
.epic-page__content .vc_row[data-vc-full-width] { position: relative; }

.epic-page__links { margin: 24px 0; font-size: 15px; }

/* Doctor profile inherits the same wrapper. */
.epic-doctor-single .epic-page__content { padding-top: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   13. DOCTOR PROFILE — two-column header
   ══════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb bar ────────────────────────────────────────────────── */

.epic-doctor-crumbs {
	background: #eaf2f5;
	padding: 80px 0;
}

.epic-doctor-crumbs .epic-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 17px;
	font-weight: 600;
	color: var(--epic-text, #1c2833);
}

.epic-doctor-crumbs .epic-breadcrumbs a { color: inherit; opacity: .9; }
.epic-doctor-crumbs .epic-breadcrumbs a:hover { color: var(--epic-teal); opacity: 1; }

@media (max-width: 767px) {
	.epic-doctor-crumbs { padding: 34px 0; }
	.epic-doctor-crumbs .epic-breadcrumbs { font-size: 15px; }
}

/* ── Profile ───────────────────────────────────────────────────────── */

.epic-doctor-profile {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 52px;
	align-items: start;
	padding: 56px 0 20px;
}

.epic-doctor-profile--no-photo { grid-template-columns: minmax(0, 1fr); }

/* ── Photograph ────────────────────────────────────────────────────── */

.epic-doctor-profile__photo {
	position: relative;
	line-height: 0;
}

.epic-doctor-profile__photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

/* ── Body ──────────────────────────────────────────────────────────── */

.epic-doctor-profile__body { min-width: 0; }

.epic-doctor-profile__name {
	margin: 0 0 28px;
	padding-bottom: 18px;
	position: relative;
	font-family: 'Cambo', Georgia, 'Times New Roman', serif;
	font-size: 46px;
	line-height: 60px;
	font-weight: 400;
	letter-spacing: .3px;
	color: var(--epic-teal, #3c93a2);
}

/* Short rule beneath the name, as on the original profile. */
.epic-doctor-profile__name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 3px;
	background: var(--epic-teal, #3c93a2);
}

.epic-doctor-profile__content { position: relative; }

/* Rows inside the profile sit within the right-hand column, so the usual
   WPBakery negative margins would push them out of alignment. */
.epic-doctor-profile__content > .vc_row {
	margin-left: 0;
	margin-right: 0;
}

.epic-doctor-profile__content p { margin: 0 0 1em; }
.epic-doctor-profile__content p:last-child { margin-bottom: 0; }

/**
 * TYPOGRAPHY — matched to the live profile via DevTools.
 *
 * The degrees, designation and OPD line render at 21px / 31px, weight 700 on
 * live; the box list text at 16px / 27px. These live in WPBakery
 * vc_column_text, which the theme did not size, so they fell back to the small
 * page default. Set explicitly here.
 *
 * The degrees / designation / OPD block is the run of coloured, bold lines
 * directly under the name, before the first bordered box.
 */
.epic-doctor-profile__content > .wpb_text_column:first-child,
.epic-doctor-profile__content .vc_column_text {
	font-size: 16px;
	line-height: 27px;
}

/* The bold coloured intro lines — degrees, designation, OPD timing. */
.epic-doctor-profile__content h2,
.epic-doctor-profile__content h3,
.epic-doctor-profile__content h4,
.epic-doctor-profile__content strong {
	font-size: 21px;
	line-height: 31px;
	font-weight: 700;
}

/* List items inside the bordered boxes take the same size as body text;
   the bullet styling itself is defined site-wide below. */
.epic-doctor-profile__content ul li,
.epic-doctor-profile__content ol li {
	font-size: 16px;
	line-height: 27px;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 991px) {
	.epic-doctor-profile {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 34px;
		padding-top: 36px;
	}

	.epic-doctor-profile__name { font-size: 34px; }
}

@media (max-width: 767px) {
	.epic-doctor-profile {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.epic-doctor-profile__photo { max-width: 260px; }

	.epic-doctor-profile__name { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONTENT LISTS — teal check-circle bullet

   The old theme replaced the plain disc with a filled teal circle holding a
   white check. That was theme CSS, so it left when the theme did; the markup
   is a bare <ul><li>. Rebuilt here for all lists inside page and post content,
   so every specialty, treatment and doctor page gets it without edits.

   Turn it off for one list by adding el_class="no-check" to the WPBakery
   text block, or the class "no-check" to the <ul>.
   ══════════════════════════════════════════════════════════════════════ */

.epic-content ul:not(.no-check):not(.menu):not([class*="wpb"]):not([class*="vc_"]) ,
.epic-doctor-profile__content ul:not(.no-check),
.epic-post__content ul:not(.no-check) {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
}

.epic-content ul:not(.no-check):not(.menu):not([class*="wpb"]):not([class*="vc_"]) > li,
.epic-doctor-profile__content ul:not(.no-check) > li,
.epic-post__content ul:not(.no-check) > li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 12px;
	list-style: none;
}

/* The circle + white check, drawn as an inline SVG background so nothing
   depends on an icon font. */
.epic-content ul:not(.no-check):not(.menu):not([class*="wpb"]):not([class*="vc_"]) > li::before,
.epic-doctor-profile__content ul:not(.no-check) > li::before,
.epic-post__content ul:not(.no-check) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233c93a2'/%3E%3Cpath d='M6 10.2l2.6 2.6L14.2 7.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Nested lists indent normally and keep the marker. */
.epic-content ul:not(.no-check) ul { margin-top: 12px; margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   14. WPBAKERY SPACING CORRECTIONS

   WPBakery gives every element a bottom margin (21.7px, or 15px for
   images). On banner rows that leaves a white strip between the image and
   whatever follows it — most visibly between the page banner and the black
   breadcrumb bar.
   ══════════════════════════════════════════════════════════════════════ */

/* Last element in a column carries no trailing margin. */
.epic-page__content .wpb_column > .vc_column-inner > .wpb_wrapper > *:last-child,
.epic-doctor-profile__content .wpb_column > .vc_column-inner > .wpb_wrapper > *:last-child {
	margin-bottom: 0;
}

/* Full-bleed banner rows sit flush against the next section. */
.epic-page__content .vc_row.vc_row-no-padding .wpb_single_image,
.epic-page__content .headingrow .wpb_single_image,
.epic-page__content .headingrow .wpb_content_element {
	margin-bottom: 0;
}

.epic-page__content .headingrow img { display: block; }

/* Banner images span the row edge to edge. */
.epic-page__content .headingrow .vc_single_image-wrapper,
.epic-page__content .headingrow .vc_figure { display: block; width: 100%; }
.epic-page__content .headingrow .vc_single_image-wrapper img { width: 100%; height: auto; }

.epic-breadcrumbs__home {
	display: inline-flex;
	align-items: center;
	vertical-align: -2px;
}

.epic-breadcrumbs__home svg { width: 19px; height: 19px; }


/* ══════════════════════════════════════════════════════════════════════
   EMBEDS INSIDE NARROW COLUMNS
   ══════════════════════════════════════════════════════════════════════ */

/**
 * Google Maps embeds carry hard width and height attributes — typically
 * width="600" — which overflow the sidebar column and push past the layout.
 * Sway constrained these; nothing in the rebuild did.
 */
.epic-content iframe,
.epic-content embed,
.epic-content object,
.epic-content video {
	max-width: 100%;
}

.epic-content iframe[src*="google.com/maps"],
.epic-content iframe[src*="maps.google"],
.epic-content iframe[src*="/maps/embed"],
.epic-content .wpb_gmaps_widget iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
}

/* WPBakery's map widget wrapper also carries an inline width. */
.epic-content .wpb_gmaps_widget .wpb_wrapper {
	max-width: 100%;
	overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════
   BLOG — listing, archives, search
   ══════════════════════════════════════════════════════════════════════ */

/* Title band under the header. */
.epic-page-band {
	background: #eef5f7;
	padding: 46px 0 40px;
	text-align: center;
	margin-bottom: 46px;
}

.epic-page-band__title {
	margin: 0 0 10px;
	font-size: 34px;
	line-height: 1.2;
	color: var(--epic-heading, #2b7f8c);
}

.epic-page-band .epic-breadcrumbs {
	justify-content: center;
	min-height: 0;
	color: #4a5b60;
	font-size: 15px;
}

/* Content plus sidebar. */
.epic-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 40px;
	align-items: start;
	margin-bottom: 60px;
}

.epic-blog-layout--full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 991px) {
	.epic-blog-layout { grid-template-columns: minmax(0, 1fr); }
}

/**
 * These widgets carry their own panel styling from the page content they were
 * copied from, so a second panel here produced a box inside a box.
 */
/* Cards. */
.epic-post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

@media (max-width: 600px) {
	.epic-post-grid { grid-template-columns: minmax(0, 1fr); }
}

.epic-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e6ecee;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}

.epic-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 60, 70, .12);
}

.epic-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eef2f3;
}

.epic-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.epic-card__thumb-empty { display: block; width: 100%; height: 100%; }

.epic-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 24px;
}

/* Category pill with the small leading dot the live cards carry. */
.epic-card__cat {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #2b7f8c;
	background: #e8f4f6;
	border-radius: 999px;
	text-decoration: none;
}

.epic-card__cat::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.epic-card__title {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.45;
	font-weight: 600;
}

.epic-card__title a {
	color: #22323a;
	text-decoration: none;
}

.epic-card__title a:hover { color: #2b7f8c; }

.epic-card__more {
	margin-top: auto;          /* buttons line up across a row */
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #3f97a4;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
}

.epic-card__more:hover { background: #2b7f8c; color: #fff; }

/* Pagination. */
.epic-container .pagination .nav-links,
.epic-blog-main .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 44px 0 0;
}

.epic-blog-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dbe9ec;
	border-radius: 5px;
	color: #2b7f8c;
	text-decoration: none;
	font-weight: 600;
}

.epic-blog-main .page-numbers:hover { background: #eef5f7; }

.epic-blog-main .page-numbers.current {
	background: #3f97a4;
	border-color: #3f97a4;
	color: #fff;
}

.epic-blog-main .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.epic-search-again { margin-bottom: 30px; }


.epic-blog-sidebar p { margin: 0 0 12px; }

.epic-blog-sidebar li { list-style: none; }
.epic-blog-sidebar ul { margin: 0; padding: 0; }


.epic-blog-sidebar iframe { max-width: 100%; }

.epic-blog-sidebar input[type="text"],
.epic-blog-sidebar input[type="email"],
.epic-blog-sidebar input[type="tel"],
.epic-blog-sidebar textarea,
.epic-blog-sidebar select {
	width: 100%;
	padding: 11px 14px;
	margin-bottom: 12px;
	border: 1px solid #cfe0e4;
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
}


/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS AND BUTTONS
   ══════════════════════════════════════════════════════════════════════

   Read from the rendered markup rather than guessed at. Each widget's own
   inner div already carries the panel — background #eff8f9, 20px padding,
   8px radius — so the theme must not draw a second one around it.

   The buttons are plain anchors with two class names the old stylesheet
   styled and then took with it:

     .about-page-button   the quick links, separated by <br>
     .whatsapp-text-btn   Chat Now, with <br> inside the anchor

   Both are styled here by class, so page sidebars and the blog sidebar match.
   ══════════════════════════════════════════════════════════════════════ */

.epic-blog-sidebar .sidebar-widget,
.epic-blog-sidebar .widget {
	margin-bottom: 26px;
	background: none;
	border: 0;
	padding: 0;
}

.epic-blog-sidebar .sidebar-widget__title,
.epic-blog-sidebar .widget-title,
.epic-blog-sidebar .widgettitle {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 600;
	color: #22323a;
}

/* Search widget has no panel of its own. */
.epic-blog-sidebar .widget_search {
	background: #eff8f9;
	border-radius: 8px;
	padding: 20px;
}

/* ── Quick links ─────────────────────────────────────────────────────── */

.about-page-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;              /* fixed, so an inherited line-height cannot inflate it */
	padding: 0 22px;
	margin-bottom: 14px;
	background: #56919e;
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: 999px;
	overflow: hidden;
	transition: background .2s ease;
}

.about-page-button:last-child { margin-bottom: 0; }

.about-page-button:hover,
.about-page-button:focus { background: #3f7d8a; color: #fff !important; }

/* The links are separated by <br>, which would add an empty line between
   full-width buttons; and both button types carry a <br> inside the anchor,
   which pushes the label off centre. */
.about-page-button + br,
.about-page-button br,
.whatsapp-text-btn br { display: none; }

/* ── Chat Now ────────────────────────────────────────────────────────── */

.whatsapp-text-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	height: 46px;
	padding: 0 28px;
	background: #56919e;
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border-radius: 4px;
	transition: background .2s ease;
}

.whatsapp-text-btn:hover,
.whatsapp-text-btn:focus { background: #3f7d8a; color: #fff !important; }

/* ── Phone rows ──────────────────────────────────────────────────────── */

.epic-blog-sidebar a[href^="tel:"],
.epic-content a[href^="tel:"] {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.epic-blog-sidebar a[href^="tel:"],
.epic-blog-sidebar a[href^="tel:"] span { color: #111 !important; }

.epic-widget-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	margin-right: 8px;
	color: inherit;
	flex: 0 0 auto;
}

.epic-widget-icon svg { width: 100%; height: 100%; display: block; }

/* Menu widgets, if one is ever used here. */
.epic-blog-sidebar .menu li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 20px;
	margin-bottom: 14px;
	background: #56919e;
	color: #fff !important;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
}

.epic-blog-sidebar .widget_search button {
	padding: 10px 18px;
	background: #56919e;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   SOCIAL ICONS  (footer widgets)
   --------------------------------------------------------------------------
   Font Awesome left with the purchased theme, so <i class="fa fa-…"> tags
   render as fallback glyphs. inc/widget-icons.php swaps them for inline SVG;
   this sizes them and gives each mark its brand colour on hover.

   White at rest keeps the footer calm — the specialty links and phone
   numbers are what the page is for. Colour arrives on interaction.
   ========================================================================== */

.epic-widget-icon--social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 4px 0 0;
	border-radius: 50%;
	color: inherit;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.epic-widget-icon--social svg {
	width: 26px;
	height: 26px;
	display: block;
}

/* The <i> sits inside the link, so hover is read from the anchor. */
a:hover > .epic-widget-icon--social,
a:focus-visible > .epic-widget-icon--social {
	background: rgba( 255, 255, 255, .10 );
	transform: translateY(-2px);
}

a:hover > .epic-widget-icon--facebook  { color: #1877f2; }
a:hover > .epic-widget-icon--instagram { color: #e1306c; }
a:hover > .epic-widget-icon--linkedin  { color: #0a66c2; }
a:hover > .epic-widget-icon--youtube   { color: #ff0000; }
a:hover > .epic-widget-icon--twitter   { color: #ffffff; }
a:hover > .epic-widget-icon--whatsapp  { color: #25d366; }

/* On a light background the hover wash must darken, not lighten. */
.epic-page a:hover > .epic-widget-icon--social,
.epic-blog-sidebar a:hover > .epic-widget-icon--social {
	background: rgba( 0, 0, 0, .06 );
}

@media (prefers-reduced-motion: reduce) {
	.epic-widget-icon--social { transition: none; }
	a:hover > .epic-widget-icon--social { transform: none; }
}

/* ==========================================================================
   PAGE TITLE BAR  (.epic-titlebar)  —  restores the Sway/KeyDesign title section
   Reads per-page meta; colours come inline from the page's saved settings.
   ========================================================================== */

.epic-titlebar {
	position: relative;
	overflow: hidden;
	padding: 90px 0;
	background-color: #3c93a2;
	color: #fff;
}

/* Decorative cross/dots pattern, faint, like the original */
.epic-titlebar__pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .12;
	background-image:
		radial-gradient(circle at 20% 30%, currentColor 2px, transparent 2.5px),
		radial-gradient(circle at 80% 70%, currentColor 2px, transparent 2.5px);
	background-size: 46px 46px, 60px 60px;
}

.epic-titlebar__inner { position: relative; z-index: 1; }

.epic-titlebar--center .epic-titlebar__inner { text-align: center; }
.epic-titlebar--right  .epic-titlebar__inner { text-align: right; }

.epic-titlebar__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	color: inherit;
}

.epic-titlebar__subtitle {
	margin-top: 10px;
	font-size: 17px;
	opacity: .9;
}

.epic-titlebar__breadcrumbs {
	margin-top: 14px;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.epic-titlebar--center .epic-titlebar__breadcrumbs { justify-content: center; }
.epic-titlebar--right  .epic-titlebar__breadcrumbs { justify-content: flex-end; }

.epic-titlebar__breadcrumbs a { color: inherit; text-decoration: none; opacity: .85; }
.epic-titlebar__breadcrumbs a:hover { opacity: 1; }
.epic-titlebar__breadcrumbs .epic-breadcrumbs__sep { opacity: .6; }
.epic-titlebar__breadcrumbs .epic-breadcrumbs__home svg { vertical-align: -2px; }

@media (max-width: 767px) {
	.epic-titlebar { padding: 54px 0; }
	.epic-titlebar__title { font-size: 28px; }
}

/* Per-page header / footer states (driven by body classes) */
.epic-no-header  #epic-header { display: none; }
.epic-no-footer  .epic-footer { display: none; }

.epic-transparent-header #epic-header {
	background: transparent;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 20;
	box-shadow: none;
}
/* When the header is transparent, the title bar sits beneath it, so give it
   room and let its own background show through. */
.epic-transparent-header .epic-titlebar { margin-top: 0; }

.epic-fixed-footer .epic-footer  { position: sticky; bottom: 0; }
.epic-static-footer .epic-footer { position: static; }