/* Miss Horlogerie — base reset, typography, layout primitives.
   Brand color/font tokens come from inc/color-bridge.php (--mh-*). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var( --mh-font-body );
	color: var( --mh-text );
	background: var( --mh-bg );
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var( --mh-font-heading );
	font-weight: var( --mh-font-heading-weight, 600 );
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var( --mh-dark );
}
::selection { background: var( --mh-primary ); color: #1a1a1a; }
html { scroll-behavior: smooth; }

/* Accessibility helpers */
.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;
}
.mh-skip-link:focus {
	position: fixed; left: 16px; top: 16px; z-index: 2000;
	width: auto; height: auto; clip: auto;
	background: var( --mh-dark ); color: #fff; padding: 10px 16px; border-radius: 4px;
}

/* Main wrapper */
.mh-main { min-height: 60vh; }

/* Generic content container (non-Elementor templates). */
.mh-container {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: clamp( 20px, 5vw, 40px );
}

/* Archive / blog list */
.mh-archive {
	max-width: 1200px;
	margin: clamp( 90px, 12vh, 140px ) auto clamp( 60px, 10vh, 110px );
	padding-inline: clamp( 20px, 5vw, 48px );
}
.mh-archive__head {
	margin-bottom: clamp( 40px, 6vh, 72px );
	padding-bottom: clamp( 24px, 4vh, 40px );
	border-bottom: 1px solid var( --mh-line );
}
.mh-archive__title { font-size: clamp( 2rem, 4.5vw, 3.4rem ); margin: 0; letter-spacing: -.02em; }
.mh-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	gap: clamp( 40px, 4vw, 64px ) clamp( 24px, 3vw, 44px );
}
.mh-card { display: flex; flex-direction: column; }
.mh-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var( --mh-paper ); }
.mh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier( .16, 1, .3, 1 ); }
.mh-card:hover .mh-card__media img { transform: scale( 1.04 ); }
.mh-card__cat {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: .68rem; letter-spacing: var( --mh-track ); text-transform: uppercase;
	color: var( --mh-primary ); font-weight: 600; margin: 22px 0 10px;
}
.mh-card__cat::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.mh-card__title {
	font-size: clamp( 1.3rem, 1.8vw, 1.65rem ); line-height: 1.15; margin: 0 0 10px;
	font-weight: var( --mh-font-heading-weight, 600 );
}
.mh-card__title a {
	text-decoration: none;
	background-image: linear-gradient( var( --mh-primary ), var( --mh-primary ) );
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size .45s cubic-bezier( .16, 1, .3, 1 );
}
.mh-card:hover .mh-card__title a { background-size: 100% 1px; }
.mh-card__excerpt { margin: 0; color: var( --mh-ink-soft ); font-size: .96rem; line-height: 1.6; }
.mh-card__link { text-decoration: none; color: inherit; }

/* Pagination */
.mh-pagination { margin-top: clamp( 40px, 6vh, 72px ); display: flex; gap: 8px; flex-wrap: wrap; }
.mh-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid #e3ded6; border-radius: 4px; text-decoration: none; font-size: .9rem;
}
.mh-pagination .page-numbers.current { background: var( --mh-dark ); color: #fff; border-color: var( --mh-dark ); }

/* Footer */
.mh-footer {
	background: var( --mh-dark );
	color: rgba( 255, 255, 255, .72 );
	padding: clamp( 48px, 8vh, 88px ) clamp( 20px, 5vw, 56px );
	border-top: 1px solid var( --mh-primary );
}
.mh-footer__inner {
	max-width: 1200px; margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mh-footer__brand { font-family: var( --mh-font-logo ); font-size: clamp( 1.4rem, 2.2vw, 1.9rem ); color: var( --mh-primary ); letter-spacing: .04em; }
.mh-footer__copy { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba( 255, 255, 255, .5 ); }

/* Static page (non-Elementor) */
.mh-page { margin: clamp( 96px, 14vh, 160px ) auto clamp( 60px, 10vh, 110px ); }
.mh-page__title { font-size: clamp( 1.9rem, 4.5vw, 3.2rem ); margin: 0 0 28px; }
.mh-page__content { font-size: 1.06rem; line-height: 1.75; }
.mh-page__content > * { margin-block: 0 1.3em; }

/* Comments */
.mh-comments { max-width: 820px; margin: clamp( 48px, 8vh, 96px ) auto 0; }
.mh-comments__title { font-size: 1.4rem; margin-bottom: 24px; }
.mh-comments__list { list-style: none; padding: 0; }

/* Buttons */
.mh-btn {
	display: inline-flex; align-items: center; gap: .7em;
	padding: 1.05em 1.9em; background: var( --mh-primary ); color: #1a1a1a;
	text-decoration: none; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
	border-radius: 1px; transition: background-color .3s ease, color .3s ease, gap .3s ease;
}
.mh-btn:hover { background: var( --mh-dark ); color: #fff; gap: 1em; }