/*
 * Mateus e Rosa — Responsividade: base + chrome global + componentes partilhados.
 * Carregado DEPOIS de main.css (ver functions.php) para poder sobrepor a cascata.
 *
 * Breakpoints canónicos (ver tokens.css). Nos @media usa-se o literal px:
 *   xl 1200 · lg 1024 · md 768 · sm 480
 *
 * ÂMBITO deste ficheiro (Foundation): drawer/nav mobile, tipografia fluida base,
 * container, topbar, header, footer (polish), botões, hero, cta/info-bar, brands,
 * category-card, section-header, lang-switcher. Os partials de página tratam do
 * resto (home/products/pages/forms/blog) — sem sobreposição de seletores.
 */

/* ═══════════════════════════════════════════════════════════════════════
   Navegação mobile — botão hambúrguer + drawer off-canvas
   ═══════════════════════════════════════════════════════════════════════ */

.mer-nav-toggle {
	display: none;               /* escondido no desktop; activado ≤ lg */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mer-color-primary);
	border-radius: var(--mer-radius-xs);
	transition: color var(--mer-transition-fast), background var(--mer-transition-fast);
}
.mer-nav-toggle:hover,
.mer-nav-toggle:focus-visible { color: var(--mer-color-accent); background: var(--mer-color-bg); }

/* Backdrop */
.mer-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 36, 77, 0.5);
	opacity: 0;
	transition: opacity 250ms ease;
}
.mer-drawer-backdrop[hidden] { display: none; }
body.mer-drawer-open .mer-drawer-backdrop { opacity: 1; }

/* Painel */
.mer-drawer {
	position: fixed;
	inset: 0 auto 0 auto;
	inset-inline-end: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
	width: min(86vw, 360px);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--mer-space-8);
	padding: var(--mer-space-7);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--mer-color-bg-soft);
	box-shadow: var(--mer-shadow-elevated);
	transform: translateX(100%);
	transition: transform 250ms ease;
}
.mer-drawer[hidden] { display: none; }   /* recupera semântica de [hidden] (o .mer-drawer define display:flex) */
body.mer-drawer-open .mer-drawer { transform: translateX(0); }

body.mer-drawer-open { overflow: hidden; }   /* scroll lock */

.mer-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mer-space-5);
}
.mer-drawer__logo svg { height: 56px; width: auto; }
.mer-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--mer-color-primary);
	border-radius: var(--mer-radius-xs);
}
.mer-drawer__close:hover,
.mer-drawer__close:focus-visible { color: var(--mer-color-accent); background: var(--mer-color-bg); }

/* Menu vertical dentro do drawer. Scoped ao container (.mer-drawer__nav) para
   funcionar com qualquer variante da lista — mer-menu--drawer (menu atribuído)
   OU mer-menu--fallback (sem menu no admin). */
.mer-drawer__nav .mer-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.mer-drawer__nav .mer-menu li { width: 100%; }
.mer-drawer__nav .mer-menu a {
	display: block;
	padding: var(--mer-space-4) 0;
	font-size: var(--mer-fs-lg);
	border-bottom: 1px solid var(--mer-color-border);
}
.mer-drawer__nav .mer-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: var(--mer-space-5);
}
.mer-drawer__nav .mer-menu .sub-menu a { font-size: var(--mer-fs-base); }

.mer-drawer__cta { width: 100%; }

/* SOBRE / CONTACTO (vindos da topbar) — mesmos tamanho/estilo dos itens de menu,
   e encostados ao nav (anula o gap do drawer) para o conjunto ler como UM menu. */
.mer-drawer__links {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: calc(var(--mer-space-8) * -1);
}
.mer-drawer__links .mer-topbar__link {
	display: block;
	padding: var(--mer-space-4) 0;
	font-size: var(--mer-fs-lg);
	color: var(--mer-color-primary);
	border-bottom: 1px solid var(--mer-color-border);
}
.mer-drawer__links .mer-topbar__link:hover,
.mer-drawer__links .mer-topbar__link:focus-visible { color: var(--mer-color-accent); }

.mer-drawer__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--mer-space-4);
	margin-top: auto;
	padding-top: var(--mer-space-6);
	border-top: 1px solid var(--mer-color-border);
}
.mer-drawer__contacts .mer-topbar__item { color: var(--mer-color-primary); }

/* Selector de idioma (vindo da topbar) — lista de links horizontal */
.mer-drawer__lang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mer-space-4);
	padding-top: var(--mer-space-5);
	border-top: 1px solid var(--mer-color-border);
	color: var(--mer-color-primary);
}
.mer-drawer__lang-link {
	font-size: var(--mer-fs-sm);
	font-weight: var(--mer-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--mer-tracking-caps-sm);
	color: var(--mer-color-primary);
	text-decoration: none;
}
.mer-drawer__lang-link:hover,
.mer-drawer__lang-link:focus-visible { color: var(--mer-color-accent); }
.mer-drawer__lang-link.is-active { color: var(--mer-color-accent); }

@media (prefers-reduced-motion: reduce) {
	.mer-drawer, .mer-drawer-backdrop { transition: none; }
}

/* bp-lg — activa o drawer, esconde a nav e o CTA de desktop */
@media (max-width: 1024px) {
	.mer-nav-toggle { display: inline-flex; }
	.mer-primary-nav { display: none; }
	.mer-header-actions__cta { display: none; }
}

/* Segurança: nunca mostrar o drawer acima de lg (o JS também fecha no resize) */
@media (min-width: 1025px) {
	.mer-drawer,
	.mer-drawer-backdrop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tipografia fluida base — títulos grandes reduzem em tablet/telemóvel
   ═══════════════════════════════════════════════════════════════════════ */

/* bp-md */
@media (max-width: 768px) {
	h1 { font-size: var(--mer-fs-5xl); }   /* 64 → 42 */
	h2 { font-size: var(--mer-fs-4xl); }   /* 42 → 32 */
	h3 { font-size: var(--mer-fs-2xl); }
}
/* bp-sm */
@media (max-width: 480px) {
	h1 { font-size: var(--mer-fs-4xl); }   /* 42 → 32 */
	h2 { font-size: var(--mer-fs-3xl); }
	/* gutter lateral mais apertado no telemóvel — o container usa esta var */
	:root { --mer-container-pad: var(--mer-space-5); }  /* 32 → 16 */
}

/* ═══════════════════════════════════════════════════════════════════════
   Topbar — ao activar o hambúrguer (≤ lg) toda a topbar migra para o drawer
   (telefone, email, morada, SOBRE/CONTACTO e idioma estão duplicados lá)
   ═══════════════════════════════════════════════════════════════════════ */

/* bp-lg */
@media (max-width: 1024px) {
	.mer-topbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Header / logo — escala em telemóvel
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.mer-logo svg { height: 64px; }
}
@media (max-width: 480px) {
	.mer-logo svg { height: 52px; }
	.mer-site-header__inner { gap: var(--mer-space-5); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Botões — a variante --wide tem largura fixa (265px) que rebenta no telemóvel
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.mer-btn--wide { width: 100%; height: auto; min-height: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero — empilhado (≤lg) a imagem precisa de altura própria; escala de texto
   ═══════════════════════════════════════════════════════════════════════ */

/* bp-lg: grelha já colapsa em main.css — aqui damos altura à imagem e soltamos o min-height fixo */
@media (max-width: 1024px) {
	.mer-hero__grid { min-height: 0; }
	.mer-hero__image { min-height: 320px; }
}
@media (max-width: 768px) {
	.mer-hero__text { padding: var(--mer-space-8); gap: var(--mer-space-7); }
	.mer-hero__title { font-size: var(--mer-fs-5xl); }
	.mer-hero__subtitle { font-size: var(--mer-fs-lg); }
}
@media (max-width: 480px) {
	.mer-hero__image { min-height: 220px; }
	.mer-hero__text { padding: var(--mer-space-7); }
	.mer-hero__title { font-size: var(--mer-fs-4xl); }
	.mer-hero__badges { gap: var(--mer-space-4); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Section header — empilha em telemóvel
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.mer-section-header { flex-direction: column; align-items: flex-start; gap: var(--mer-space-4); }
	.mer-section-header__title { font-size: var(--mer-fs-4xl); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Category cards — o --large mantém min-height; afinações de texto no telemóvel
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.mer-category-card--large { min-height: 220px; padding: var(--mer-space-6); }
	.mer-category-card--large .mer-category-card__title { font-size: var(--mer-fs-2xl); }
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA final (banner) + info-bar
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.mer-cta { padding: var(--mer-space-8); }
	.mer-cta__title { font-size: var(--mer-fs-4xl); }
}
@media (max-width: 480px) {
	.mer-cta { padding: var(--mer-space-7); }
	.mer-cta__title { font-size: var(--mer-fs-3xl); }
	.mer-info-bar { grid-template-columns: 1fr; gap: var(--mer-space-5); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Brands — a faixa já usa flex-wrap; só afina o espaçamento no telemóvel
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.mer-brands__list { gap: var(--mer-space-6); }
	.mer-brands__item { max-height: 44px; }
}