/*
Theme Name: Mabuhay
Theme URI: https://mabuhayevent.se
Description: Blocktema för Mabuhay Event & Städ – städtjänster, eventdekoration och asiatisk livsmedelsbutik.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: mabuhay
*/

/* Layout and component styles that theme.json cannot express. */

html { scroll-behavior: smooth; }
img { height: auto; }

/* ---------- Header ---------- */
.mb-topbar { font-size: 0.875rem; }
.mb-topbar a { text-decoration: none; }
.mb-topbar a:hover { text-decoration: underline; }

.mb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line);
	backdrop-filter: saturate(1.4) blur(8px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) !important;
}
.admin-bar .mb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mb-header { top: 0; position: relative; } }

.mb-brand { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; color: inherit; }
.mb-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 600;
	font-size: 2rem;
	color: var(--wp--preset--color--gold);
	letter-spacing: -0.01em;
}
.mb-brand__tag {
	margin-top: 0.3rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
}
.mb-brand img { display: block; max-height: 64px; width: auto; }

.mb-header .wp-block-navigation a { text-decoration: none; }
.mb-header .wp-block-navigation .current-menu-item > a,
.mb-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--forest);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--gold);
}

/* ---------- Sections ---------- */
.mb-eyebrow {
	font-size: 0.78rem !important;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}
.has-forest-background-color .mb-eyebrow,
.mb-hero .mb-eyebrow { color: var(--wp--preset--color--gold-light); }

.mb-hero { position: relative; overflow: hidden; }
.mb-hero { padding-left: clamp(1rem, 4vw, 2rem) !important; padding-right: clamp(1rem, 4vw, 2rem) !important; }
.mb-hero .wp-block-cover__inner-container { width: 100% !important; max-width: 1200px !important; margin-inline: auto !important; }
.mb-hero .wp-block-cover__inner-container > * { max-width: 680px; margin-left: 0 !important; margin-right: 0 !important; }
.mb-hero h1 { max-width: 15ch !important; }

.mb-divider {
	width: 56px;
	height: 3px;
	border: 0;
	background: var(--wp--preset--color--gold);
	margin-left: 0 !important;
	opacity: 1;
}
.has-text-align-center + .mb-divider, .mb-divider.is-centered { margin-left: auto !important; margin-right: auto !important; }

/* Cards */
.mb-card {
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 1px 2px rgb(16 40 36 / 0.04), 0 10px 30px -18px rgb(16 40 36 / 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mb-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(16 40 36 / 0.05), 0 22px 40px -20px rgb(16 40 36 / 0.35); }
.mb-card figure { margin: 0 !important; }
.mb-card figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.mb-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.mb-card__body h3 { margin-top: 0; }
.wp-block-columns.mb-cards > .wp-block-column { display: flex; flex-direction: column; }

/* Pillars on the front page */
.mb-pillar { border-top: 3px solid var(--wp--preset--color--gold); padding-top: 1.25rem; }
.mb-pillar--store { border-top-color: var(--wp--preset--color--chili); }

/* Feature checks */
.mb-checks { list-style: none; padding-left: 0; }
.mb-checks li { position: relative; padding-left: 2rem; margin-bottom: 0.7rem; }
.mb-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230e4a42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3 3 7-7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Service rows: alternating image/text */
.mb-service img { border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mb-service + .mb-service { border-top: 1px solid var(--wp--preset--color--line); }

/* Gallery */
.mb-gallery.wp-block-gallery img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; }

/* Quote */
.mb-quote { border: 0 !important; padding: 0 !important; }
.mb-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.35;
}
.mb-quote cite { font-style: normal; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }

/* Store category tiles */
.mb-tile {
	height: 100%;
	border-radius: 16px;
	padding: 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
}
.mb-tile__icon { font-size: 2rem; line-height: 1; margin: 0 0 0.75rem; }

/* Contact */
.mb-contact-list { list-style: none; padding: 0; }
.mb-contact-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.mb-contact-list strong { display: block; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); }
.mb-contact-list a { text-decoration: none; font-size: 1.15rem; }

.wpcf7 form { display: grid; gap: 1rem; }
.wpcf7 label { display: block; font-weight: 600; font-size: 0.9rem; }
.wpcf7 input:not([type="submit"]),
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.8rem 1rem;
	font: inherit;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
	border-color: transparent;
}
.wpcf7 textarea { min-height: 9rem; }
.wpcf7 input[type="submit"] {
	justify-self: start;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.8rem;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--forest);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--ink); }

/* Footer */
.mb-footer a { text-decoration: none; }
.mb-footer a:hover { text-decoration: underline; }
.mb-footer .mb-brand__tag { color: var(--wp--preset--color--mint); }
.mb-footer ul { list-style: none; padding: 0; margin: 0; }
.mb-footer li { margin-bottom: 0.45rem; }

@media (max-width: 781px) {
	.mb-service .wp-block-columns { flex-direction: column-reverse; }
	.mb-brand__name { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mb-card, .mb-card:hover { transition: none; transform: none; }
}

/* Long Swedish compound words in narrow cards */
.mb-card h3, .mb-tile h3 { hyphens: auto; overflow-wrap: anywhere; }
main > .wp-block-post-content { margin-top: 0; }
.wpcf7 input[type="checkbox"] { width: auto; margin: 0 0.6rem 0 0; vertical-align: middle; accent-color: var(--wp--preset--color--forest); }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; font-size: 0.9rem; }

@media (max-width: 600px) {
	.mb-topbar .wp-block-group > p:first-child { display: none; }
	.mb-topbar .wp-block-group { justify-content: center !important; }
	.mb-header-cta { display: none; }
}