/*!/wp-content/themes/hamechadesh/assets/css/components/components.css*//**
 * Global styles, design tokens, resets, and shared components.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Font Faces — Pompei Block FS (self-hosted)
   ========================================================================== */

/* Light (300) — preloaded, block prevents fallback-swap flash */
@font-face{font-family:'Pompei Block FS';src:url('/wp-content/themes/hamechadesh/assets/css/components/../../fonts/Pompei_Block_FS-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}

/* Bold (700) — preloaded, block prevents fallback-swap flash */
@font-face{font-family:'Pompei Block FS';src:url('/wp-content/themes/hamechadesh/assets/css/components/../../fonts/Pompei_Block_FS-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* Black (900) — not preloaded, swap is acceptable (large decorative headings) */
@font-face{font-family:'Pompei Block FS';src:url('/wp-content/themes/hamechadesh/assets/css/components/../../fonts/Pompei_Block_FS-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}

/* ==========================================================================
   Design Tokens (CSS Custom Properties)
   Values are placeholders — will be extracted from Figma
   ========================================================================== */

:root {
	/* === Colors === */
	--hm-color-primary: #212121;
	--hm-color-secondary: #16213e;
	--hm-color-accent: #FF173E;
	--hm-color-bg: #F3F3F3;
	--hm-color-bg-alt: #ffffff;
	--hm-color-text: #212121;
	--hm-color-text-muted: #6b7280;
	--hm-color-text-inverse: #F3F3F3;
	--hm-color-border: #e5e7eb;
	--hm-color-link: #FF173E;
	--hm-color-link-hover: #BF60FF;
	--hm-color-breaking: #FF173E;
	--hm-color-reading-progress: #ef9020;

	/* Header */
	--hm-color-header-bg: #212121;
	--hm-color-header-text: #EEEEEE;
	--hm-color-header-accent: #FF173E;
	--hm-color-vod-start: #FF6CD4;
	--hm-color-vod-end: #BF60FF;
	--hm-color-orange: #EF9020;
	--hm-color-music-bg: #23002d;
	--hm-color-music-card: #7e3e92;
	--hm-color-music-overlay: #4f1361;
	--hm-color-music-accent: #692A7C;

	/* === Typography === */
	--hm-font-primary: 'Pompei Block FS', sans-serif;
	--hm-font-size-xs: 0.75rem;
	--hm-font-size-sm: 0.875rem;
	--hm-font-size-base: 1rem;
	--hm-font-size-md: 1.125rem;
	--hm-font-size-lg: 1.25rem;
	--hm-font-size-xl: 1.5rem;
	--hm-font-size-2xl: 2rem;
	--hm-font-size-3xl: 2.5rem;

	/* === Spacing === */
	--hm-space-xs: 4px;
	--hm-space-sm: 8px;
	--hm-space-md: 16px;
	--hm-space-lg: 24px;
	--hm-space-xl: 32px;
	--hm-space-2xl: 48px;
	--hm-space-section: 64px;

	/* === Layout === */
	--hm-container-width: 1350px;
	--hm-container-padding: 16px;
	--hm-sidebar-width: 300px;

	/* === Borders === */
	--hm-radius-sm: 4px;
	--hm-radius-md: 8px;
	--hm-radius-lg: 12px;
	--hm-radius-xl: 20px;
	--hm-border-color: #e5e7eb;

	/* === Shadows === */
	--hm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--hm-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--hm-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* === Transitions === */
	--hm-transition-fast: 150ms ease;
	--hm-transition-base: 300ms ease;
	--hm-transition-slow: 500ms ease;

	/* === Z-index scale === */
	--hm-z-ticker: 100;
	--hm-z-header: 200;
	--hm-z-mobile-menu: 300;
	--hm-z-modal: 400;
	--hm-z-toast: 500;
}

/* ==========================================================================
   Global Resets
   ========================================================================== */

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

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

body {
	margin: 0;
	padding: 0;
	background-color: var(--hm-color-bg);
	color: var(--hm-color-text);
	font-family: var(--hm-font-primary);
	font-size: var(--hm-font-size-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headings — text-box-trim for Figma-accurate spacing */
h1, h2, h3, h4, h5, h6 {
	text-box-trim: both;
	text-box-edge: cap alphabetic;
	margin-block-start: 0;
	margin-block-end: 0;
	font-family: var(--hm-font-primary);
	unicode-bidi: isolate;
}

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

a {
	color: var(--hm-color-link);
	text-decoration: none;
	transition: color var(--hm-transition-fast);
}

a:hover {
	color: var(--hm-color-link-hover);
}

/* ==========================================================================
   Container
   ========================================================================== */

.hm-container {
	width: 100%;
	max-width: var(--hm-container-width);
	margin-inline: auto;
}

/* ==========================================================================
   Desktop scale-to-fit
   --------------------------------------------------------------------------
   header.php adds `html.hm-fit-desktop` + a CSS `zoom` on a narrow desktop
   (e.g. a 14" laptop at 150% Windows scaling ~ 1280px). Because CSS `zoom`
   in current browsers shrinks rendering but does NOT shift the width media
   queries see, we force every layout to its full desktop form via this class
   so the page renders EXACTLY like a wide screen; the zoom then scales the
   1350px layout down to fit. All rules are scoped to the class, so they are
   completely inert on wide screens and on mobile.
   ========================================================================== */
html.hm-fit-desktop .hm-container {
	width: var(--hm-container-width); /* fixed 1350px desktop width */
	max-width: none;
}

/* ==========================================================================
   Lazy ad zones — placeholders loaded on demand via lazy-ads.js
   Base layout so the <ins> behaves as a block in any context. Context-
   specific sizing (min-height to reserve space / avoid CLS) lives in the
   component CSS (e.g. category-posts.css). See assets/js/components/lazy-ads.js.
   ========================================================================== */

.hm-ad-lazy {
	display: block;
}

/* ==========================================================================
   Accessibility — Screen Reader Text
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	inset-inline-start: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Skip Link
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	z-index: var(--hm-z-toast);
}

.skip-link:focus {
	top: 0;
	inset-inline-start: 0;
	background: var(--hm-color-primary);
	color: var(--hm-color-text-inverse);
	padding: var(--hm-space-sm) var(--hm-space-md);
}

/* ==========================================================================
   GSAP Animation Hooks
   ========================================================================== */

[data-animate] {
	opacity: 0;
}

.gsap-ready [data-animate] {
	/* GSAP will handle the reveal */
}

/* ==========================================================================
   WebP <picture> compatibility (Imagify "Use <picture> tags" mode)
   ==========================================================================
   Imagify's WebP front-end display (when set to "<picture> tags" rather than
   server rewrite rules) wraps every content <img> in a <picture> and HOISTS
   the <img>'s `class` + attributes onto the <picture>, leaving the inner
   <img> class-less. Any image we style by a class placed DIRECTLY on the
   <img> (object-fit:cover + height:100%) therefore ends up sizing the
   <picture> (display:inline, no effect) instead of the real <img>, so the
   image renders at its intrinsic size and stops filling its container.

   Fix: when one of our image classes lands on a <picture>, make the <picture>
   a block (so the hoisted width/height take effect) and have the inner <img>
   fill it with cover. Every one of our object-fit:cover image classes is
   cover (zero `contain` usages in the theme), so this is always correct.

   Components that style the post-thumbnail via a DESCENDANT selector
   (`.parent img`) are unaffected — the descendant still matches the inner
   <img> through the <picture> — so they are intentionally not listed here.

   ── MAINTENANCE ──────────────────────────────────────────────────────────
   When you add a new component that puts an `hm-*` class DIRECTLY on an
   <img> and sizes it with object-fit:cover, add that class to the list
   below. Entries that never appear on an <img> (videos, background layers)
   are harmless no-ops.
   ========================================================================== */
picture.hm-featured__slide-img,
picture.hm-music-section__card-img,
picture.hm-music-section__slide-media,
picture.hm-card-md__img,
picture.hm-highlights__img,
picture.hm-related__img,
picture.hm-galleries__card-img,
picture.hm-galleries-hero__image,
picture.hm-vod-card__img,
picture.hm-vod-card__media,
picture.hm-vod-section__card-img,
picture.hm-stories__card-img,
picture.hm-search-results__thumb,
picture.hm-red-email__image,
picture.hm-red-email__image-img,
picture.hm-red-email__preview-img {
	display: block;
}

picture.hm-featured__slide-img > img,
picture.hm-music-section__card-img > img,
picture.hm-music-section__slide-media > img,
picture.hm-card-md__img > img,
picture.hm-highlights__img > img,
picture.hm-related__img > img,
picture.hm-galleries__card-img > img,
picture.hm-galleries-hero__image > img,
picture.hm-vod-card__img > img,
picture.hm-vod-card__media > img,
picture.hm-vod-section__card-img > img,
picture.hm-stories__card-img > img,
picture.hm-search-results__thumb > img,
picture.hm-red-email__image > img,
picture.hm-red-email__image-img > img,
picture.hm-red-email__preview-img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}