/* ============================================================
   Omaskas — WordPress-specific layout additions.
   These styles complement the brand source-of-truth files
   (colors-and-type.css, site.css) without modifying them. They
   cover surfaces present in WP that aren't in the original
   prototype: side-menu link colors, single-product layout,
   editorial title-only headers, screen-reader-text, post
   pagination, and editor enhancements.
   Tokens come from colors-and-type.css.
   ============================================================ */

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 6px; top: 7px;
	padding: 12px 16px;
	background: var(--om-black); color: var(--om-white);
	font-family: var(--om-sans);
	font-size: 12px;
	letter-spacing: var(--om-track-wide);
	text-transform: uppercase;
	z-index: 100000;
	width: auto;
}

/* ---------- Body lock when side menu is open ---------- */
body.om-menu-open { overflow: hidden; }

/* ---------- WP nav menu link styling inside the side menu ---------- */
.dropdown-panel a.menu-item { text-decoration: none; }
.dropdown-panel a.menu-item:visited { color: var(--om-black); }

/* ---------- Side menu trailing widgets (Side Menu Footer sidebar) ---------- */
.side-menu-widgets {
	margin-top: auto;
	padding-top: 32px;
}
.side-menu-widget {
	font-family: var(--om-sans);
	font-size: 11px;
	letter-spacing: var(--om-track-wider);
	text-transform: uppercase;
	color: var(--om-mid);
	margin-bottom: 16px;
}
.side-menu-widget a { color: var(--om-black); }

/* ---------- Editorial title-only header (content-page-header) ---------- */
.editorial-title-wrap {
	max-width: 600px;
	margin: 0 auto;
	padding: 48px 8px 0;
	text-align: center;
}
.editorial-title-only {
	font-family: var(--om-serif);
	font-weight: var(--om-w-regular);
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--om-black);
}
@media (min-width: 768px) {
	.editorial-title-only { font-size: 18px; }
}

/* ---------- Editor body block-prose inside .editorial ---------- */
.editorial em      { font-style: italic; }
.editorial strong  { font-weight: var(--om-w-medium); }
.editorial a       { color: var(--om-black); border-bottom: 1px solid var(--om-gold); padding-bottom: 1px; }
.editorial a:hover { opacity: 0.6; }
.editorial hr.gold-rule.short { width: 24px; }

/* WordPress core blocks placed inside the editorial column */
.editorial .wp-block-image { margin: 28px auto; }
.editorial .wp-block-image img { max-width: 100%; height: auto; }
.editorial .wp-block-quote {
	border-left: 0;
	margin: 28px 0;
	padding: 0;
	font-style: italic;
}
.editorial .wp-block-quote p { font-style: italic; }
.editorial .wp-block-pullquote {
	margin: 36px 0;
	padding: 24px 0;
	border-top: 1px solid var(--om-rule);
	border-bottom: 1px solid var(--om-rule);
	text-align: center;
}

/* ---------- Single product page ---------- */
.product-page { padding-top: 60px; }
.product-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	margin: 24px 0 60px;
}
.product-detail-media .carousel { aspect-ratio: 3/4; }
.product-detail-media > img { width: 100%; height: auto; display: block; }
.product-detail-info {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
}
.product-detail-info .om-h1 { margin-bottom: 16px; }
.product-detail-info .product-price { justify-content: center; margin-bottom: 18px; }
.product-detail-info hr.gold-rule.short {
	width: 24px; height: 1px; background: var(--om-gold); border: 0;
	margin: 28px auto;
}
.product-description {
	color: var(--om-ink);
	text-align: left;
}

@media (min-width: 768px) {
	.product-page { padding-top: 64px; }
	.product-detail {
		grid-template-columns: 3fr 2fr;
		gap: 56px;
		align-items: start;
	}
	.product-detail-info { max-width: none; text-align: left; }
	.product-detail-info .product-price { justify-content: flex-start; }
	.product-detail-info hr.gold-rule.short { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1024px) {
	.product-page { padding-top: 68px; }
	.product-detail { gap: 80px; }
}

/* ---------- Post pagination + shop pagination ---------- */
.shop-pagination,
.post-pager .pagination,
.post-pager nav.pagination {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 40px 0 24px;
	font-family: var(--om-sans);
	font-size: 11px;
	letter-spacing: var(--om-track-wider);
	text-transform: uppercase;
}
.shop-pagination .page-numbers,
.post-pager .page-numbers {
	color: var(--om-mid);
	transition: opacity var(--om-d-fast);
}
.shop-pagination .page-numbers.current,
.post-pager .page-numbers.current {
	color: var(--om-black);
	border-bottom: 1px solid var(--om-gold);
	padding-bottom: 2px;
}
.shop-pagination .page-numbers:hover,
.post-pager .page-numbers:hover { opacity: 0.6; }

/* ---------- Search form + post summaries ---------- */
.post-summary { margin-bottom: 24px; text-align: left; }
.post-summary h3 { margin-bottom: 8px; }
.shop-empty { padding: 64px 20px; text-align: center; }

/* ---------- Search form fallback ---------- */
.search-form {
	display: flex; align-items: center;
	border-bottom: 1px solid var(--om-rule);
}
.search-form .search-field {
	flex: 1 1 auto;
	border: 0; outline: 0;
	padding: 8px 0;
	background: transparent;
	font-family: var(--om-sans);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--om-black);
}

/* ---------- Site-content padding so fixed footer/nav don't clip ---------- */
.site-content { padding-bottom: 36px; }   /* total space below content; fixed footer (~35px) sits within this */

/* ---------- Three-pillars helper for About-style content ---------- */
.three-pillars-wrap { margin-top: 36px; }

/* ---------- WP-side icon link wrappers (account, bag) ---------- */
.icon-svg-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--om-black);
	text-decoration: none;
}

/* ---------- Shop filter bar — collection title styling ---------- */
.shop-filter-bar .collection-title { margin-left: 4px; }

/* ---------- Image protection (deter casual saving) ----------
   Client-side deterrent only — disables drag-to-save, image/text
   selection, and the iOS Safari long-press "Save Image" callout.
   Paired with contextmenu/dragstart guards in chrome.js, which also
   cover desktop right-click and Android long-press. We deliberately
   avoid `pointer-events:none` so the carousel and lightbox still
   respond to taps/clicks. NOTE: this cannot stop a determined user —
   image bytes remain reachable via DevTools/network/cache. */
img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.hero-image-wrap, .hero-caption,
	.dropdown-panel, .submenu, .search-bar,
	.carousel-track {
		animation: none !important;
		transition: none !important;
	}
}