/*
Theme Name: Meyer Denim Workshop
Theme URI: https://meyerdenimworkshop.ridenjoy.fi
Author: Ridenjoy Oy
Description: Custom block theme for Meyer Denim Workshop, built from the approved design. Structure lives in this theme; text, prices, and photos are edited in the WordPress block editor.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: meyer-denim
*/

/* ---------------------------------------------------------
   Fixed background photo + gradient + grain, behind everything
--------------------------------------------------------- */
body {
	background-color: var(--wp--preset--color--navy);
}

.md-bg {
	position: fixed;
	inset: 0;
	z-index: -3;
	background-image: url('assets/img/photo-p3.jpg');
	background-size: cover;
	background-position: center;
	filter: saturate(0.75) brightness(0.5);
}

.md-bg-gradient {
	position: fixed;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, rgba(13,23,40,0.86) 0%, rgba(16,29,50,0.78) 40%, rgba(10,18,32,0.92) 100%);
}

.md-bg-grain {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0.16;
	background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px);
}

/* ---------------------------------------------------------
   9-slice gold frame (matches the approved design exactly)

   The rule that makes this work: each edge strip is inset from the
   frame box by exactly the corner size (--cs), so a repeating side
   line physically stops where a corner begins and can never run over
   it — at any viewport width. Corner size, edge offset, edge
   thickness and content padding are all derived from --cs, so the
   whole frame scales as one piece.
--------------------------------------------------------- */
.md-frame {
	--cs: clamp(40px, 7.4vw, 104px);
	position: relative;
	padding:
		calc(var(--cs) * 0.62 + 14px)
		calc(var(--cs) * 0.55 + 10px)
		calc(var(--cs) * 0.62 + 20px);
}

.md-frame-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.75;
}

.md-frame-deco span {
	position: absolute;
	display: block;
}

/* Four corners — fixed boxes of exactly --cs */
.md-frame-deco .md-c-tl,
.md-frame-deco .md-c-tr,
.md-frame-deco .md-c-bl,
.md-frame-deco .md-c-br {
	width: var(--cs);
	height: var(--cs);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.md-frame-deco .md-c-tl { top: 0; left: 0; background-image: url('assets/img/corner-tl.png'); }
.md-frame-deco .md-c-tr { top: 0; right: 0; background-image: url('assets/img/corner-tr.png'); }
.md-frame-deco .md-c-bl { bottom: 0; left: 0; background-image: url('assets/img/corner-bl.png'); }
.md-frame-deco .md-c-br { bottom: 0; right: 0; background-image: url('assets/img/corner-br.png'); }

/* Four edge strips — inset by --cs on both ends so they never
   overlap a corner. Band sits -0.0833 x cs outward, 0.2833 x cs thick. */
.md-frame-deco .md-e-t,
.md-frame-deco .md-e-b {
	left: var(--cs);
	right: var(--cs);
	height: calc(var(--cs) * 0.2833);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
}

.md-frame-deco .md-e-t { top: calc(var(--cs) * -0.0833); background-image: url('assets/img/edge-h.png'); }
.md-frame-deco .md-e-b { bottom: calc(var(--cs) * -0.0833); background-image: url('assets/img/edge-h-b.png'); }

.md-frame-deco .md-e-l,
.md-frame-deco .md-e-r {
	top: var(--cs);
	bottom: var(--cs);
	width: calc(var(--cs) * 0.2833);
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
}

.md-frame-deco .md-e-l { left: calc(var(--cs) * -0.0833); background-image: url('assets/img/edge-v.png'); }
.md-frame-deco .md-e-r { right: calc(var(--cs) * -0.0833); background-image: url('assets/img/edge-v-r.png'); }

/* Content sits above the frame art */
.md-frame-inner {
	position: relative;
}

/* ---------------------------------------------------------
   Header + navigation
--------------------------------------------------------- */
.md-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(14px,2.2vw,26px) clamp(16px,3.5vw,48px);
	position: relative;
	z-index: 5;
}

/* Square logo mark, 100x100 as in the design (scales down on phones) */
.md-header .wp-block-site-logo img {
	display: block;
	width: clamp(64px, 14vw, 100px) !important;
	height: auto;
	max-width: none;
}

/* Nav links: no background box, transparent, slightly larger than the
   design's 13px per request. Sizes step up with the viewport. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item > a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: 4px 2px !important;
	white-space: nowrap;
	text-decoration: none;
}

@media (min-width: 1100px) {
	.wp-block-navigation .wp-block-navigation-item__content,
	.wp-block-navigation .wp-block-navigation-item > a {
		font-size: 16px;
	}
}

.wp-block-navigation .wp-block-navigation-item > a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #f4dba6 !important;
	background: transparent !important;
}

/* Kill the block's own container background/padding so nothing boxes the links */
.wp-block-navigation,
.wp-block-navigation .wp-block-navigation__container {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--navy);
	border-color: rgba(203,163,90,0.32);
}

/* Desktop nav spacing, matching the design */
.wp-block-navigation .wp-block-navigation__container {
	gap: clamp(14px, 1.8vw, 30px);
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Hamburger toggle: outlined, no fill, 44px min touch target */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--gold) !important;
	background: transparent !important;
}

.wp-block-navigation__responsive-container-open {
	border: 1px solid rgba(203,163,90,0.5);
	padding: 10px 12px;
	min-height: 44px;
	min-width: 44px;
	box-sizing: border-box;
}

.wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--gold-light);
}

/* Mobile overlay panel */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-dialog {
	background-color: var(--wp--preset--color--navy) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 16px;
	min-height: 52px;
	display: flex;
	align-items: center;
	width: 100%;
	border-bottom: 1px dotted rgba(203,163,90,0.22);
	padding: 0 6px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	justify-content: flex-start;
}

/* ---------------------------------------------------------
   Price list rows (used by the Price List pattern)
--------------------------------------------------------- */
.md-price-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px dotted rgba(203,163,90,0.22);
}

.md-price-row .md-price {
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.md-category-rule {
	height: 1px;
	background: rgba(203,163,90,0.35);
	margin: 4px 0 16px;
}

/* ---------------------------------------------------------
   Shop cards — dimensions taken from the design

   Buttons align across every card because the description is the
   flex item that grows (flex:1 1 auto), pushing the price/button row
   to the card's bottom edge regardless of how long the owner's text
   is. Grid stretch keeps all cards the same height per row.
--------------------------------------------------------- */
.md-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: clamp(16px, 2.2vw, 26px);
	align-items: stretch;
}

.md-shop-card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(203,163,90,0.32);
	background: rgba(10,18,32,0.42);
	height: 100%;
	margin: 0;
}

/* Image: fixed 4:3 as in the design, cropped to fill */
.md-shop-card > figure.wp-block-image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: 1px solid rgba(203,163,90,0.28);
	flex: 0 0 auto;
}

.md-shop-card > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.md-shop-card .md-shop-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 16px 18px;
	flex: 1 1 auto;
	margin: 0;
}

.md-shop-card .md-shop-card-body > * {
	margin: 0;
}

.md-shop-card .md-shop-card-body h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #d8b87a;
	margin: 0;
}

/* This is what pins the buttons to the bottom */
.md-shop-card .md-shop-card-body > p {
	font-size: 14px;
	line-height: 1.6;
	color: #c8bda3;
	flex: 1 1 auto;
	margin: 0;
}

.md-shop-card .md-shop-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
	flex: 0 0 auto;
}

.md-shop-card .md-shop-row .md-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	color: var(--wp--preset--color--cream);
	margin: 0;
	white-space: nowrap;
}

.md-shop-card .wp-block-buttons {
	margin: 0;
	gap: 0;
}

.md-shop-card .wp-block-button__link {
	font-size: 13px;
	letter-spacing: 0.14em;
	padding: 9px 14px;
}

/* Narrow phones: let price + button stack rather than squeeze */
@media (max-width: 380px) {
	.md-shop-card .md-shop-row {
		flex-wrap: wrap;
		gap: 8px;
	}
}

.md-shop-note {
	margin-top: clamp(28px,4vw,46px);
	border: 1px solid rgba(203,163,90,0.32);
	padding: clamp(18px,2.5vw,28px);
	background: rgba(10,18,32,0.42);
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------
   Info grid (used by the Visit pattern)
--------------------------------------------------------- */
.md-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
	gap: clamp(20px,3vw,40px);
}

/* ---------------------------------------------------------
   Gallery — match the frame's bordered-photo look
--------------------------------------------------------- */
.md-frame .wp-block-gallery figure img {
	border: 1px solid rgba(203,163,90,0.28);
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.md-footer {
	border-top: 1px solid rgba(203,163,90,0.22);
	padding: clamp(20px,3vw,34px) clamp(16px,3.5vw,48px);
	background: rgba(8,15,27,0.55);
	position: relative;
	z-index: 5;
}

.md-footer h2 {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

@media (max-width: 860px) {
	.md-nav-desktop { display: none !important; }
}
@media (min-width: 861px) {
	.wp-block-navigation__responsive-container-open { display: none !important; }
}