/* ==========================================================================
   Lulu — Layout: barra de anuncio, header, navegación y footer
   ========================================================================== */

/* Barra de anuncio */
.announcement-bar { background: var(--color-primary); color: var(--color-on-primary); font-size: 0.75rem; }
.announcement-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); min-height: 38px; }
.announcement-bar__text { display: flex; align-items: center; gap: var(--space-2); margin: 0; letter-spacing: 0.02em; }
.announcement-bar__nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.announcement-bar__nav a { color: rgb(255 255 255 / 78%); transition: color var(--transition); }
.announcement-bar__nav a:hover { color: #fff; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); }
.admin-bar .site-header { top: 32px; }
.site-header__main {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 40px;
	padding-block: 14px;
	border-bottom: 1px solid var(--color-border);
}
.site-header .site-header__toggle { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 26px; }

.header-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); transition: color var(--transition); }
.header-link:hover { color: var(--color-secondary-text); }

.header-cart {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 10px 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm); font-weight: 600;
	transition: border-color var(--transition);
}
.header-cart:hover { border-color: var(--color-secondary); }
.header-cart__count {
	display: inline-grid; place-items: center;
	min-width: 20px; height: 20px; padding-inline: 5px;
	background: var(--color-primary); color: var(--color-on-primary);
	border-radius: 10px;
	font-size: var(--fs-xs); line-height: 1;
}

/* Navegación principal */
.site-nav { border-bottom: 1px solid var(--color-border); }
.site-nav__menu { display: flex; flex-wrap: wrap; gap: 0 26px; list-style: none; margin: 0; padding: 0; }
.submenu-toggle { display: none; }
.site-nav__menu > li { position: relative; }
.site-nav__menu > li > a {
	display: flex; align-items: center; gap: 6px;
	padding-block: 16px;
	font-size: 0.84375rem; letter-spacing: 0.015em;
	transition: color var(--transition);
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-ancestor > a { color: var(--color-secondary-text); }
.site-nav__menu > .current-menu-item > a,
.site-nav__menu > .current-menu-ancestor > a { box-shadow: inset 0 -2px 0 var(--color-primary); }
/* Añade la clase CSS "is-accent" a un elemento del menú (p. ej. Outlet) para destacarlo. */
.site-nav__menu .is-accent > a { color: var(--color-secondary-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--fs-sm); }
.menu-chevron { transition: transform var(--transition); }

.site-nav .sub-menu {
	position: absolute; top: 100%; left: -18px; z-index: 10;
	min-width: 220px;
	list-style: none; margin: 0; padding: var(--space-2) 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.site-nav .sub-menu a { display: block; padding: 8px 18px; font-size: var(--fs-sm); }
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-nav li:hover > a .menu-chevron { transform: rotate(180deg); }

@media (max-width: 960px) {
	.announcement-bar__nav { display: none; }
	.announcement-bar__text { justify-content: center; width: 100%; text-align: center; }

	.site-header__main { grid-template-columns: auto 1fr auto; gap: var(--space-3) var(--space-4); padding-block: var(--space-3); }
	.site-header .site-header__toggle { display: inline-flex; }
	.site-header__brand { justify-self: start; }
	.site-header__search { grid-column: 1 / -1; order: 3; }
	.header-link__label, .header-cart__total { display: none; }
	.site-header__actions { gap: var(--space-3); }

	.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg); max-height: calc(100vh - 120px); overflow-y: auto; }
	.site-nav.is-open { display: block; }
	.site-nav__menu { flex-direction: column; padding-block: var(--space-2); }
	.site-nav__menu > li > a { padding-block: 12px; border-bottom: 1px solid var(--color-border); }
	.site-nav__menu > li { display: flex; flex-wrap: wrap; align-items: center; }
	.site-nav__menu > li > a { flex: 1; }
	.submenu-toggle {
		display: grid; place-items: center;
		width: 44px; height: 44px; margin-left: auto;
		background: none; border: 0; border-bottom: 1px solid var(--color-border); color: var(--color-muted);
	}
	.submenu-toggle::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--transition); }
	.is-open > .submenu-toggle::before { transform: rotate(-135deg) translateY(-2px); }
	.site-nav .sub-menu { position: static; display: none; width: 100%; opacity: 1; visibility: visible; transform: none; border: 0; background: none; padding: var(--space-1) 0 var(--space-3) var(--space-4); }
	.site-nav .is-open > .sub-menu { display: block; }
	.site-nav .sub-menu a { padding: 7px 0; color: var(--color-muted); }
	.menu-chevron { display: none; }
}
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Footer */
.site-footer { padding-top: 70px; padding-bottom: 34px; border-top: 1px solid var(--color-border); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 320px) repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6) 60px; margin-bottom: 44px; }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__text { color: var(--color-muted); font-size: 0.84375rem; line-height: 1.65; margin: 0; }

.footer-col__title { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-col__list { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; }
.footer-col__list a { color: var(--color-muted); font-size: 0.84375rem; transition: color var(--transition); }
.footer-col__list a:hover { color: var(--color-text); }

.site-footer__strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: 26px; border-block: 1px solid var(--color-border); }
.site-footer__bottom { padding-top: var(--space-5); color: var(--color-muted); font-size: 0.75rem; }
.site-footer__bottom p { margin: 0; }

@media (max-width: 700px) {
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.announcement-bar { font-size: 0.6875rem; }
	.announcement-bar__text .icon { display: none; }
	.site-header__brand { min-width: 0; overflow: hidden; justify-self: stretch; }
	.site-header__brand .logo__type { font-size: 1.125rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.site-header__brand .logo { max-width: 100%; }
	.site-header__brand .logo__img { height: 46px; }
}