/*
Theme Name: Hearing Aid Istanbul
Theme URI: https://hearingaidistanbul.com/
Author: Hearing Aid Istanbul
Description: Recreation of the hearingaidistanbul.com GoDaddy design (dark sidebar layout). On activation it installs all pages, blog posts, menu and settings automatically, then copies the images into the Media Library.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hai
*/

/* ---------- Tokens ---------- */
:root {
	--hai-sidebar: #161616;
	--hai-sidebar-w: 320px;
	--hai-logo: #f7f7f7;
	--hai-nav-active: #969696;
	--hai-title: #595959;
	--hai-heading: #1b1b1b;
	--hai-text: #5e5e5e;
	--hai-link: #7a7474;
	--hai-muted: #a4a4a4;
	--hai-border: #e2e2e2;
	--hai-gray-section: #dddddd;
	--hai-gray-text: #424242;
	--hai-wa: #455a64;
	--hai-sans: "Source Sans Pro", arial, sans-serif;
	--hai-serif: "Playfair Display", Georgia, serif;
	--hai-mont: "Montserrat", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--hai-text);
	font-family: var(--hai-sans);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--hai-link); text-decoration: none; }
a:hover { opacity: .8; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; color: var(--hai-heading); }
p { margin: 0; }
ul, ol { margin: 0; }
strong, b { font-weight: 700; }
iframe { border: 0; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus { clip: auto; width: auto; height: auto; margin: 0; padding: 12px 16px; background: #fff; color: #000; z-index: 100000; top: 8px; left: 8px; }

/* ---------- Sidebar (desktop) ---------- */
.hai-sidebar {
	position: fixed; top: 0; left: 0; bottom: 0;
	width: var(--hai-sidebar-w);
	background: var(--hai-sidebar);
	padding: 96px 48px;
	overflow-y: auto;
	z-index: 50;
}
.hai-logo {
	display: block;
	font-family: var(--hai-mont);
	font-weight: 700;
	font-size: 32px;
	line-height: 38.4px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--hai-logo);
	padding-bottom: 100px;
	word-wrap: break-word;
}
.hai-logo:hover { opacity: 1; color: var(--hai-logo); }
.hai-nav ul { list-style: none; margin: 0; padding: 0; }
.hai-nav li { line-height: 45px; }
.hai-nav a {
	font-family: var(--hai-sans);
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}
.hai-nav a:hover { color: var(--hai-nav-active); opacity: 1; }
.hai-nav .current-menu-item > a,
.hai-nav .current_page_item > a,
.hai-nav .current_page_parent > a,
.hai-nav .current-menu-ancestor > a { color: var(--hai-nav-active); font-weight: 700; }

.hai-main { margin-left: var(--hai-sidebar-w); min-height: 100vh; }

/* ---------- Mobile header ---------- */
.hai-topbar { display: none; }
.hai-overlay { display: none; }

/* ---------- Sections ---------- */
.hai-section { padding: 72px 24px; background: #fff; }
.hai-section--dark { background: var(--hai-sidebar); }
.hai-section--gray { background: var(--hai-gray-section); }
.hai-section--flush { padding: 0; }
.hai-spacer { height: 112px; }

.hai-title {
	font-family: var(--hai-sans);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	color: var(--hai-title);
	margin: 0 0 40px;
	font-size: 32px;
	line-height: 64px;
}
.hai-title--md { font-size: 22px; line-height: 44px; }
.hai-title--sm { font-size: 14px; line-height: 28px; }

.hai-intro {
	font-family: var(--hai-mont);
	font-weight: 600;
	font-size: 28px;
	line-height: 35px;
	letter-spacing: 1.5px;
	text-align: center;
	color: var(--hai-heading);
	max-width: 573px;
	margin: 0 auto 48px;
	padding: 0 24px;
}

/* ---------- Image + text rows ---------- */
.hai-rows { margin: 0 -24px; }
.hai-row { display: flex; align-items: center; margin-bottom: 48px; }
.hai-row:last-child { margin-bottom: 0; }
.hai-row--reverse { flex-direction: row-reverse; }
.hai-row__media, .hai-row__text { flex: 0 0 50%; max-width: 50%; padding: 0 24px; }
.hai-row__media { align-self: flex-start; }
.hai-row__text { text-align: center; display: flex; justify-content: center; }
.hai-row__body { width: fit-content; max-width: 100%; }
.hai-row__text ul, .hai-row__text ol { text-align: left; margin: 0 16px; padding-left: 1.3em; }
.hai-row__text p + ul, .hai-row__text p + ol { margin-top: 0; }

.hai-media { position: relative; width: 100%; overflow: hidden; }
.hai-media img { width: 100%; height: 100%; object-fit: cover; }
.hai-media--2-1 { aspect-ratio: 2 / 1; }
.hai-media--1-1 { aspect-ratio: 1 / 1; }
.hai-media--4-3 { aspect-ratio: 4 / 3; }

.hai-h {
	font-family: var(--hai-serif);
	font-size: 22px;
	line-height: 27.5px;
	letter-spacing: 1.5px;
	color: var(--hai-heading);
	text-align: center;
	margin-bottom: 24px;
}
.hai-h--mont {
	font-family: var(--hai-mont);
	font-weight: 600;
	font-size: 28px;
	line-height: 35px;
}
.hai-section--gray .hai-h { color: #000; }
.hai-section--gray .hai-row__text, .hai-section--gray p, .hai-section--gray li { color: var(--hai-gray-text); }

/* ---------- Text link button (GoDaddy "secondary" button) ---------- */
.hai-btn {
	display: inline-flex;
	align-items: center;
	height: 40px;
	margin-top: 24px;
	font-family: var(--hai-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--hai-link);
}
.hai-btn span { border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.hai-btn::after {
	content: "";
	width: 7px; height: 7px;
	margin-left: 16px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.hai-btn--plain::after { display: none; }

/* ---------- Brand hero (Oticon / Widex / Unitron) ---------- */
.hai-hero { display: flex; align-items: center; background: #fff; }
.hai-hero--dark { background: var(--hai-sidebar); }
.hai-hero__media { flex: 0 0 50%; max-width: 50%; }
.hai-hero__media img { width: 100%; }
.hai-hero__text { flex: 0 0 50%; max-width: 50%; padding: 32px 56px 48px; }
.hai-hero__kicker {
	font-family: var(--hai-sans);
	font-size: 14px;
	line-height: 21px;
	color: var(--hai-title);
	margin-bottom: 16px;
	text-transform: uppercase;
}
.hai-hero__title {
	font-family: var(--hai-serif);
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 1.5px;
	color: var(--hai-heading);
	margin-bottom: 24px;
}
.hai-hero__lead { font-size: 22px; line-height: 33px; letter-spacing: 1px; color: var(--hai-text); }
.hai-hero .hai-btn { margin-top: 32px; }
.hai-hero--dark .hai-hero__kicker { color: #a9a9a9; }
.hai-hero--dark .hai-hero__title { color: var(--hai-logo); }
.hai-hero--dark .hai-hero__lead { color: var(--hai-muted); }
.hai-hero--dark .hai-btn { color: var(--hai-nav-active); }
.hai-hero__kicker--blue { color: #98dced; }

/* ---------- Feature (1/3 text, 2/3 image) ---------- */
.hai-feature { display: flex; align-items: center; margin: 0 -20px; }
.hai-feature__text { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 20px 40px; }
.hai-feature__media { flex: 0 0 66.667%; max-width: 66.667%; padding: 0 20px 40px; }
.hai-feature__title {
	font-family: var(--hai-serif);
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 1.5px;
	color: #000;
}
.hai-feature__text p { margin-top: 16px; }

/* ---------- Split (About us) ---------- */
.hai-split { display: flex; min-height: 100vh; }
.hai-split__text { flex: 0 0 50%; max-width: 50%; padding: 72px 24px; display: flex; justify-content: center; }
.hai-split__inner { width: 100%; max-width: 392px; padding: 0 24px; }
.hai-split__media { flex: 0 0 50%; max-width: 50%; position: relative; overflow: hidden; }
.hai-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hai-split .hai-title { text-align: left; }
.hai-split .hai-h { text-align: left; }
.hai-split .hai-h:not(:first-of-type) { margin-top: 40px; }

/* ---------- Price menu ---------- */
.hai-prices__brand {
	font-family: var(--hai-serif);
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 1.5px;
	color: var(--hai-logo);
	text-align: center;
	margin-bottom: 40px;
}
.hai-prices__grid { display: flex; flex-wrap: wrap; margin: 0 -24px; }
.hai-price { flex: 0 0 33.333%; max-width: 33.333%; padding: 24px 24px 48px; }
.hai-price .hai-media { margin-bottom: 32px; }
.hai-price__name {
	font-family: var(--hai-serif);
	font-size: 22px;
	line-height: 27.5px;
	letter-spacing: 1.5px;
	color: var(--hai-logo);
	max-width: 70%;
	margin-bottom: 16px;
}
.hai-price p { color: var(--hai-muted); }
.hai-prices hr { border: 0; border-top: 1px solid #2a2a2a; margin: 0 0 40px; }

/* ---------- Contact block ---------- */
.hai-contact { max-width: 764px; margin: 0 auto; padding: 0 24px; text-align: center; }
.hai-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 8px 32px;
	border-radius: 4px;
	background: var(--hai-wa);
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 40px;
}
.hai-wa:hover { color: #fff; opacity: .9; }
.hai-wa svg { width: 24px; height: 24px; flex: none; }
.hai-contact .hai-h { margin-bottom: 24px; }
.hai-contact p { margin-bottom: 24px; }
.hai-contact p:last-child { margin-bottom: 0; }
.hai-map { display: block; width: 100%; height: 345px; }

/* ---------- Floating chat button ---------- */
.hai-chat {
	position: fixed; right: 24px; bottom: 24px; z-index: 60;
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(110, 110, 110, .92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	display: flex; align-items: center; justify-content: center;
}
.hai-chat:hover { opacity: 1; background: rgba(90, 90, 90, .95); }
.hai-chat svg { width: 30px; height: 30px; fill: #000; }

/* ---------- Blog list ---------- */
.hai-blog { padding: 72px 24px 72px; }
.hai-cards { display: flex; flex-wrap: wrap; margin: 0 -24px; }
.hai-cards__cell { flex: 0 0 50%; max-width: 50%; padding: 0 24px 48px; display: flex; }
.hai-card {
	display: flex; flex-direction: column; width: 100%;
	border: 1px solid var(--hai-border);
	background: #fff;
	color: inherit;
}
.hai-card:hover { opacity: 1; }
.hai-card__img { aspect-ratio: 512 / 300; overflow: hidden; background: #f2f2f2; }
.hai-card__img img { width: 100%; height: 100%; object-fit: cover; }
.hai-card__body { padding: 32px 24px; }
.hai-date { font-size: 14px; line-height: 21px; color: var(--hai-title); }
.hai-card .hai-date { margin-bottom: 16px; line-height: normal; }
.hai-card__title {
	font-family: var(--hai-serif);
	font-size: 22px;
	line-height: 24.75px;
	letter-spacing: 1.5px;
	color: var(--hai-heading);
	margin-bottom: 16px;
}
.hai-card__excerpt { color: var(--hai-text); margin-bottom: 16px; }
.hai-card__more { color: var(--hai-link); }
.hai-showmore { text-align: center; padding: 40px 0; }
.hai-showmore a, .hai-showmore span { color: var(--hai-link); }

/* ---------- Single post ---------- */
.hai-post-section { padding: 24px 48px 72px; }
.hai-post-wrap { display: flex; align-items: flex-start; }
.hai-post { flex: 1 1 auto; max-width: 651px; padding: 0 41px 0 40px; border-right: 1px solid var(--hai-border); }
.hai-back { display: inline-flex; align-items: center; color: var(--hai-link); margin: 2px 0 40px; }
.hai-back::before {
	content: ""; width: 6px; height: 6px; margin: 0 10px 0 4px;
	border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.hai-post__title {
	font-family: var(--hai-serif);
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 1.5px;
	color: var(--hai-heading);
	margin-bottom: 8px;
}
.hai-post .hai-date { margin-bottom: 34px; display: block; }
.hai-content { color: var(--hai-text); overflow-wrap: break-word; }
.hai-content p { margin: 0 0 10px; }
.hai-content h2 { font-family: var(--hai-sans); font-size: 44px; line-height: 49.5px; color: var(--hai-heading); margin: 24px 0 10px; }
.hai-content h3 { font-family: var(--hai-sans); font-size: 32px; line-height: 40px; color: var(--hai-heading); margin: 24px 0 10px; }
.hai-content ul, .hai-content ol { margin: 0 0 10px; padding-left: 40px; }
.hai-content figure { margin: 0 0 24px; }
.hai-content figure img { width: 100%; }
.hai-content figcaption { font-size: 14px; line-height: 21px; color: var(--hai-title); text-align: center; margin-top: 8px; }
.hai-content > figure:first-child { margin-bottom: 48px; }
.hai-content a { text-decoration: underline; }

.hai-aside { flex: 0 0 341px; padding: 0 40px 0 32px; }
.hai-aside__title {
	font-family: var(--hai-serif);
	font-size: 22px;
	line-height: 27.5px;
	letter-spacing: 1.5px;
	color: var(--hai-heading);
	margin-bottom: 24px;
}
.hai-recent { display: flex; gap: 16px; margin-bottom: 32px; color: inherit; }
.hai-recent:hover { opacity: .8; }
.hai-recent__img { flex: 0 0 110px; width: 110px; height: 110px; overflow: hidden; background: #f2f2f2; }
.hai-recent__img img { width: 100%; height: 100%; object-fit: cover; }
.hai-recent__title { color: var(--hai-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hai-recent .hai-date { margin-top: 16px; }

/* ---------- Generic page fallback ---------- */
.hai-page { padding: 72px 48px; max-width: 900px; }
.hai-page .hai-content h2 { font-size: 32px; line-height: 40px; }

/* ---------- 404 / search ---------- */
.hai-notfound { text-align: center; }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 1023px) {
	.hai-sidebar { display: none; }
	.hai-main { margin-left: 0; }
	.hai-topbar {
		display: flex; align-items: center; justify-content: center;
		position: relative;
		background: var(--hai-sidebar);
		min-height: 109px;
		padding: 16px 72px;
	}
	.hai-topbar .hai-logo { padding: 0; text-align: center; }
	.hai-burger {
		position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
		width: 24px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
		display: flex; flex-direction: column; justify-content: center; gap: 4px;
	}
	.hai-burger span { display: block; height: 2px; width: 18px; margin: 0 auto; background: #fff; }
	.hai-overlay {
		position: fixed; inset: 0; z-index: 100;
		background: var(--hai-sidebar);
		overflow-y: auto;
		padding: 112px 24px 48px;
		text-align: center;
	}
	.hai-overlay.is-open { display: block; }
	.hai-overlay .hai-nav li { line-height: 24px; margin-bottom: 54px; }
	.hai-close {
		display: block; margin: 0 auto; width: 32px; height: 32px; position: relative;
		border: 0; background: none; cursor: pointer;
	}
	.hai-close::before, .hai-close::after {
		content: ""; position: absolute; left: 6px; top: 15px; width: 20px; height: 1.5px; background: #fff;
	}
	.hai-close::before { transform: rotate(45deg); }
	.hai-close::after { transform: rotate(-45deg); }
	body.hai-menu-open { overflow: hidden; }

	.hai-split { min-height: 0; }
	.hai-post-section { padding: 24px 24px 72px; }
	.hai-post-wrap { flex-direction: column; }
	.hai-post { max-width: none; width: 100%; padding: 0; border-right: 0; }
	.hai-aside { flex: none; width: 100%; padding: 48px 0 0; }
}

@media (max-width: 767px) {
	.hai-title { font-size: 28px; line-height: 39.2px; }
	.hai-title--md { font-size: 22px; line-height: 33px; }
	.hai-title--sm { font-size: 14px; line-height: 28px; }
	.hai-intro { padding: 0; }
	.hai-row, .hai-row--reverse { flex-direction: column; }
	.hai-row__media, .hai-row__text { flex: none; max-width: 100%; width: 100%; }
	.hai-row__media { margin-bottom: 24px; align-self: stretch; }
	.hai-hero, .hai-feature, .hai-split { flex-direction: column; }
	.hai-hero__media, .hai-hero__text, .hai-feature__text, .hai-feature__media,
	.hai-split__text, .hai-split__media { flex: none; max-width: 100%; width: 100%; }
	.hai-hero__text { padding: 40px 24px 48px; }
	.hai-feature__text { order: 2; }
	.hai-split__media { min-height: 420px; }
	.hai-split__text { padding: 56px 0; }
	.hai-price { flex: 0 0 100%; max-width: 100%; }
	.hai-cards__cell { flex: 0 0 100%; max-width: 100%; }
	.hai-content h2 { font-size: 32px; line-height: 40px; }
	.hai-content h3 { font-size: 24px; line-height: 32px; }
	.hai-wa { padding: 8px 20px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hai-price { flex: 0 0 50%; max-width: 50%; }
}