/* ============================================================
   Hashtag Media Group — chrome parts.
   ------------------------------------------------------------
   theme.css carries the tokens, reset, base type and the shared
   primitives. This file styles the concrete markup the PHP
   templates emit: header, footer, forms, post cards, single
   post, archives, search, 404 and the shortcode widgets.

   Kept separate so the token/base layer stays readable and so a
   template change only ever touches one of the two files.
   ============================================================ */

/* ── Header ──────────────────────────────────────────────── */
.hm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--hm-cyan);
	color: var(--hm-bg);
	font-family: var(--hm-font-display);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--hm-r-sm) 0;
}
.hm-skip-link:focus { left: 0; }

.hm-head__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hm-s-md);
}
.hm-head__logo { display: inline-flex; flex: 0 0 auto; }
.hm-head__logo-img {
	width: clamp(120px, 8vw + 90px, 220px);
	height: auto;
}
.hm-head__nav { display: flex; align-items: center; min-width: 0; }

/* ── Footer ──────────────────────────────────────────────── */
.hm-footer, .hm-foot {
	background: var(--hm-bg);
	border-top: 1px solid var(--hm-border-soft);
	padding-block: clamp(3.5rem, 2rem + 5vw, 5.625rem);
	margin-top: var(--hm-s-xl);
}
.hm-foot__col--brand { grid-column: span 1; }
.hm-foot__logo-link { display: inline-block; }
.hm-foot__logo-link img { width: min(240px, 100%); height: auto; margin-bottom: 1.25rem; }
.hm-foot__tagline { color: var(--hm-text-dim); max-width: 34ch; margin: 0; }

.hm-foot__list--contact { gap: 1rem; }
.hm-foot__contact-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--hm-white);
}
.hm-foot__contact-row a { color: inherit; text-decoration: none; }
.hm-foot__contact-row a:hover, .hm-foot__contact-row a:focus-visible { color: var(--hm-cyan); }
.hm-foot__icon {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	color: var(--hm-cyan);
	margin-top: 0.2em;
}
.hm-foot__address { font-style: normal; }

.hm-foot__bar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.hm-foot__bar-right { display: flex; align-items: center; gap: 0.6rem; }
.hm-foot__copy { margin: 0; }
.hm-foot__policy-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.hm-foot__policy-nav a { color: var(--hm-text-dim); text-decoration: none; }
.hm-foot__policy-nav a:hover, .hm-foot__policy-nav a:focus-visible { color: var(--hm-cyan); }

/* Bare icons, as the source has them — the ringed variant here was first-pass
   theme styling that predates the source-faithful rework. The 40x40 box stays:
   it is the source's own hit area, and shrinking to the glyph would make the
   tap target worse than the original for no visual gain. */
.hm-foot__social-btn {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	color: var(--hm-white);
	transition: color var(--hm-dur) var(--hm-ease);
}
.hm-foot__social-btn:hover, .hm-foot__social-btn:focus-visible {
	color: var(--hm-cyan);
}
.hm-foot__social-btn svg { width: 20px; height: 20px; }

/* The footer nav rendered by wp_nav_menu() when a 'footer' menu is assigned. */
.hm-foot .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.hm-foot .menu a { color: var(--hm-white); text-decoration: none; }
.hm-foot .menu a:hover, .hm-foot .menu a:focus-visible { color: var(--hm-cyan); }

/* ── Buttons: aliases the templates use ──────────────────── */
.hm-btn--primary { background: var(--hm-cyan); color: var(--hm-bg); border-color: var(--hm-cyan); }
.hm-btn--primary:hover, .hm-btn--primary:focus-visible {
	background: var(--hm-white); border-color: var(--hm-white); color: var(--hm-bg);
}
.hm-btn--outline {
	background: transparent; color: var(--hm-white); border-color: var(--hm-border);
}
.hm-btn--outline:hover, .hm-btn--outline:focus-visible {
	border-color: var(--hm-cyan); color: var(--hm-cyan); background: transparent;
}
.hm-link { color: var(--hm-cyan); }

.hm-chip {
	display: inline-block;
	font-family: var(--hm-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hm-cyan);
	text-decoration: none;
}
.hm-chip + .hm-chip { margin-left: 0.6rem; }

/* ── Forms ───────────────────────────────────────────────── */
.hm-form-wrap { width: 100%; }
.hm-form__heading { font-size: var(--hm-t-h2); margin-bottom: 0.5rem; }
.hm-form__intro { color: var(--hm-text-dim); margin-bottom: var(--hm-s-md); max-width: 56ch; }

.hm-form__row { display: grid; gap: var(--hm-s-sm); margin-bottom: var(--hm-s-sm); }
.hm-form__row--2col { grid-template-columns: 1fr 1fr; }
.hm-form__row--submit { margin-top: var(--hm-s-xs); }
@media (max-width: 640px) { .hm-form__row--2col { grid-template-columns: 1fr; } }

.hm-form__field { display: grid; gap: 0.4rem; }
.hm-form__field label {
	font-family: var(--hm-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hm-text-dim);
}
.hm-form__field input,
.hm-form__field select,
.hm-form__field textarea {
	width: 100%;
	/* 16px floor — anything smaller makes iOS Safari zoom the viewport on focus */
	font-size: max(16px, 1rem);
	font-family: inherit;
	color: var(--hm-white);
	background: var(--hm-glass-fill);
	border: 1px solid var(--hm-border);
	border-radius: var(--hm-r-md);
	padding: 0.85rem 1rem;
	min-height: 48px;
	appearance: none;
	transition: border-color var(--hm-dur) var(--hm-ease), background var(--hm-dur) var(--hm-ease);
}
.hm-form__field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.hm-form__field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--hm-cyan) 50%),
	                  linear-gradient(135deg, var(--hm-cyan) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}
.hm-form__field select option { background: var(--hm-bg-2); color: var(--hm-white); }
.hm-form__field input:focus,
.hm-form__field select:focus,
.hm-form__field textarea:focus {
	border-color: var(--hm-cyan);
	background: var(--hm-glass-fill-strong);
	outline: none;
}
.hm-form__field input::placeholder,
.hm-form__field textarea::placeholder { color: var(--hm-text-faint); }
.hm-form__req { color: var(--hm-cyan); margin-left: 0.15em; }

.screen-reader-text {
	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;
}

/* ── Map card ────────────────────────────────────────────── */
.hm-map-card {
	display: flex;
	gap: var(--hm-s-md);
	align-items: flex-start;
	padding: var(--hm-s-md);
	background: var(--hm-glass-fill);
	border: 1px solid var(--hm-glass-border);
	border-radius: var(--hm-r-lg);
}
.hm-map-card__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--hm-cyan); }
.hm-map-card__body { display: grid; gap: 0.5rem; }
.hm-map-card__address { font-style: normal; color: var(--hm-white); }
.hm-map-card__phone, .hm-map-card__tel { color: var(--hm-cyan); text-decoration: none; }
.hm-map-card__cta { align-self: flex-start; }
@media (max-width: 560px) { .hm-map-card { flex-direction: column; } }

/* ── Video shortcode ─────────────────────────────────────── */
.hm-video--selfhosted .hm-video__player,
.hm-video__player { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--hm-r-lg); display: block; background: var(--hm-bg-2); }
.hm-video__facade {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--hm-bg-2);
	border-radius: var(--hm-r-lg);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
}
.hm-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-video__play-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 76px; height: 76px;
	pointer-events: none;
}
.hm-video--youtube .hm-video__facade:hover .hm-video__play-icon,
.hm-video--youtube .hm-video__facade:focus-visible .hm-video__play-icon { transform: scale(1.06); }
.hm-video__play-icon { transition: transform var(--hm-dur) var(--hm-ease); }

/* ── Post cards ──────────────────────────────────────────── */
.hm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--hm-s-md);
	padding-block: var(--hm-s-lg) var(--hm-s-xl);
}
.hm-card__title { font-size: var(--hm-t-h3); margin: 0; }
.hm-card__title a { color: var(--hm-white); text-decoration: none; }
.hm-card__title a:hover, .hm-card__title a:focus-visible { color: var(--hm-cyan); }

/* ── Archive / search hero ───────────────────────────────── */
.hm-archive-hero { padding-block: calc(var(--hm-sec-y) * 0.7) 0; }
.hm-archive-hero__title { font-size: var(--hm-t-h1); margin-bottom: 0.4em; }
.hm-archive-hero__desc { font-size: var(--hm-t-lead); color: var(--hm-text-dim); max-width: 62ch; }
.hm-archive-body { display: block; }
.hm-search-term { color: var(--hm-cyan); }

.hm-empty-state {
	padding: var(--hm-s-xl) 0;
	display: grid;
	gap: var(--hm-s-md);
	justify-items: start;
}
.hm-empty-state__text { color: var(--hm-text-dim); max-width: 56ch; }
.hm-empty-state__links { display: grid; gap: 0.6rem; }
.hm-empty-state__links-label {
	font-family: var(--hm-font-display);
	font-size: var(--hm-t-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hm-text-faint);
}
.hm-empty-state__link-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}

/* ── Single post ─────────────────────────────────────────── */
/* Clear the header. It is position:absolute now, so it takes no flow space and
   the hero's own top padding is the only thing keeping the category chip and
   the title out from under the nav — measured, they were landing at y=77 and
   y=108 against a nav whose bottom edge is 131, so the chip sat on top of the
   logo. --hm-head-h plus a breath puts the title at roughly the source's 192. */
.hm-post-hero { padding-block: calc(var(--hm-head-h) + var(--hm-sec-y) * 0.65) var(--hm-s-md); }
.hm-post-hero__cats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.hm-post-hero__title { font-size: var(--hm-t-h1); max-width: 20ch; }
.hm-post-hero__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
	font-size: var(--hm-t-small); color: var(--hm-text-faint);
}
.hm-post-hero__sep { opacity: 0.5; }

.hm-post-thumb {
	width: min(100% - (var(--hm-gutter) * 2), var(--hm-wrap));
	margin: 0 auto var(--hm-s-lg);
}
.hm-post-thumb img { width: 100%; height: auto; border-radius: var(--hm-r-lg); display: block; }

.hm-prose__header { padding-block: var(--hm-sec-y) 0; }
.hm-prose__title { font-size: var(--hm-t-h1); }
.hm-prose__body > *:first-child { margin-top: 0; }
/* Body rhythm, measured against the source. The global reset zeroes every
   margin and nothing put it back for post content, so paragraphs rendered with
   NO gap between them — the wall-of-text look. Source gives them 25.6px.

   h2 was 2em of a 56px heading (112px) against the source's 0. The source can
   use 0 because Elementor inserts explicit spacer elements between blocks;
   there are none here, so 0 would collide the heading with the text above it.
   1.2em is the honest middle. */
.hm-prose__body p  { margin-bottom: 1.6em; }
.hm-prose__body p:last-child { margin-bottom: 0; }
.hm-prose__body h2 { margin-top: 1.2em; margin-bottom: .5em; line-height: 1.3; }
.hm-prose__body h3 { margin-top: 1.4em; margin-bottom: .4em; }
.hm-prose__body ul,
.hm-prose__body ol  { margin: 0 0 1.6em 1.4em; }
.hm-prose__body li  { margin-bottom: .5em; }
.hm-prose__body img { border-radius: var(--hm-r-md); }

.hm-post-nav { padding-block: var(--hm-s-lg); border-top: 1px solid var(--hm-border-soft); }
.hm-post-nav__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hm-s-md); }
.hm-post-nav__link {
	display: grid; gap: 0.35rem;
	padding: var(--hm-s-md);
	border: 1px solid var(--hm-border-soft);
	border-radius: var(--hm-r-lg);
	text-decoration: none;
	transition: border-color var(--hm-dur) var(--hm-ease);
}
.hm-post-nav__link:hover, .hm-post-nav__link:focus-visible { border-color: var(--hm-cyan); }
.hm-post-nav__link--next { text-align: right; }
.hm-post-nav__label {
	font-family: var(--hm-font-display);
	font-size: var(--hm-t-eyebrow);
	font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--hm-cyan);
}
.hm-post-nav__title { color: var(--hm-white); font-family: var(--hm-font-display); font-weight: 600; }
@media (max-width: 640px) {
	.hm-post-nav__inner { grid-template-columns: 1fr; }
	.hm-post-nav__link--next { text-align: left; }
}

.hm-post-cta { padding-block: var(--hm-sec-y); background: var(--hm-bg-2); margin-top: var(--hm-s-lg); }
.hm-post-cta__inner { text-align: center; display: grid; gap: var(--hm-s-sm); justify-items: center; }
.hm-post-cta__heading { font-size: var(--hm-t-h2); margin: 0; }
.hm-post-cta__text { color: var(--hm-text-dim); max-width: 52ch; margin: 0; }

/* ── 404 ─────────────────────────────────────────────────── */
.hm-404 { padding-block: var(--hm-sec-y); }
.hm-404__inner { display: grid; gap: var(--hm-s-md); justify-items: start; max-width: 62ch; }
.hm-404__code {
	font-family: var(--hm-font-display);
	font-size: clamp(4rem, 3rem + 8vw, 9rem);
	font-weight: 800;
	line-height: 1;
	color: var(--hm-cyan);
	opacity: 0.28;
	margin: 0;
}
.hm-404__title { font-size: var(--hm-t-h1); margin: 0; }
.hm-404__text { color: var(--hm-text-dim); margin: 0; }
.hm-404__search { width: 100%; max-width: 26rem; }
.hm-404__links { display: grid; gap: 0.75rem; }
.hm-404__links-label {
	font-family: var(--hm-font-display);
	font-size: var(--hm-t-eyebrow);
	font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--hm-text-faint);
}
.hm-404__link-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }

/* Core search form, used by 404 and the empty search state. */
.hm-404__search .search-form,
.hm-empty-state .search-form { display: flex; gap: 0.5rem; }
.hm-404__search .search-field,
.hm-empty-state .search-field {
	flex: 1 1 auto;
	font-size: max(16px, 1rem);
	color: var(--hm-white);
	background: var(--hm-glass-fill);
	border: 1px solid var(--hm-border);
	border-radius: var(--hm-r-md);
	padding: 0.8rem 1rem;
	min-height: 48px;
}
.hm-404__search .search-submit,
.hm-empty-state .search-submit {
	min-height: 48px;
	padding: 0 1.4em;
	border: 1px solid var(--hm-cyan);
	border-radius: var(--hm-r-pill);
	background: var(--hm-cyan);
	color: var(--hm-bg);
	font-family: var(--hm-font-display);
	font-weight: 600;
	cursor: pointer;
}

/* ── Main variants ───────────────────────────────────────── */
.hm-main--single, .hm-main--archive, .hm-main--search, .hm-main--404 { display: block; }

/* ── SEO metabox (admin only) ────────────────────────────── */
.hm-seo-row { margin-bottom: 12px; }
.hm-seo-row label { display: block; font-weight: 600; margin-bottom: 4px; }
.hm-seo-hint { color: #646970; font-size: 12px; }
.hm-seo-char { font-variant-numeric: tabular-nums; }

/* ── Structural wrappers the templates emit ──────────────────
   Small on purpose: these exist to hold layout, and most of
   their appearance comes from the block they sit in. Declaring
   them keeps the class contract complete, so a future template
   edit fails loudly rather than silently rendering unstyled. */
.hm-archive-hero__inner { display: block; }
.hm-post-hero__inner { display: block; }
.hm-foot__col { min-width: 0; }
.hm-post-hero__date,
.hm-post-hero__reading-time,
.hm-post-hero__author { white-space: nowrap; }
.hm-post-nav__link--prev { text-align: left; }
.hm-empty-state--search { justify-items: start; }

/* ── Touch targets ───────────────────────────────────────────
   A 44px minimum is the floor for anything tappable. The logo link and the
   ported nav's dropdown toggle both measured under it at some widths; padding
   the hit area costs nothing visually because both sit in a taller row. */
.hm-head__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.hmghdr__link.hmghdr__toggle,
.hmghdr .hmghdr__toggle {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}


/* ── Inline SVG icons inside post content ──────────────────────────────────
   The migrated case studies carry Elementor's icon lists as raw inline <svg>
   with a viewBox and NO width/height attribute. The theme's base rule
   (:where(svg){max-width:100%;height:auto}) then let them fill the column:
   measured 703x738px each, filled black, on a black background — the giant
   dark shapes that made these posts look destroyed. The source renders the
   same icons at 14-37px in cyan.

   Sized in em so they track the text they label, and filled with currentColor
   so they inherit the list's colour instead of defaulting to black. `stroke`
   is set too: some of these icons are stroked rather than filled, and a black
   stroke is just as invisible. */
.hm-prose__body li svg,
.hm-prose__body p > svg {
	width: 1.6em;
	height: 1.6em;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: -0.3em;
	fill: currentColor;
	color: var(--hm-cyan);
}
.hm-prose__body li svg [fill]:not([fill="none"]) { fill: currentColor; }
.hm-prose__body li svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.hm-prose__body li:has(> svg) { display: flex; align-items: flex-start; gap: .6em; }