/* ==========================================================================
   Dos Amores -- Custom Styles
   Supplements theme.json design tokens with things it can't express.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
	--da-transition: 0.3s ease;
	--da-transition-slow: 0.5s ease;
	--da-header-height: 72px;
	--da-shadow-card: 0 4px 20px rgba(169, 91, 74, 0.12);
	--da-shadow-card-hover: 0 8px 30px rgba(169, 91, 74, 0.2);
}

/* --------------------------------------------------------------------------
   2. BACKGROUND PATTERN ON ALL TERRACOTTA SECTIONS
   -------------------------------------------------------------------------- */
/* Apply background pattern only to block groups and covers, not navigation */
.wp-block-group.has-terracotta-background-color.has-background,
.wp-block-cover .has-terracotta-background-color {
	background: url('../images/icons/background.png') repeat center #A95B4A !important;
	background-size: 400px auto !important;
}

/* Exclude navigation from background pattern */
.wp-block-navigation .has-terracotta-background-color {
	background-image: none !important;
}

/* --------------------------------------------------------------------------
   3. GLOBAL
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 1000;
	transition: box-shadow var(--da-transition);
	box-shadow: none;
	border-bottom: none !important;
}

/* Offset body for fixed header */
body {
	padding-top: var(--da-header-height) !important;
}

.site-header.scrolled {
	box-shadow: 0 2px 16px rgba(44, 24, 16, 0.1);
}

/* Logo size -- desktop */
.site-header .wp-block-site-logo img {
	width: 160px !important;
	height: auto !important;
}

/* Logo size -- mobile */
@media (max-width: 781px) {
	.site-header .wp-block-site-logo img {
		width: 200px !important;
	}
}

/* Hamburger button -- vertically centered, terracotta color */
.site-header .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	color: #A95B4A;
}

.site-header .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	fill: #A95B4A;
	stroke: #A95B4A;
}

/* Nav links styling */
.site-header .wp-block-navigation a {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #2C1810 !important;
}

/* Order Online button glow */
.order-online-btn .wp-block-button__link {
	transition: all var(--da-transition);
	box-shadow: 0 2px 8px rgba(169, 91, 74, 0.25);
}

.order-online-btn .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(169, 91, 74, 0.4);
}

/* Nav link hover underline */
.wp-block-navigation a {
	position: relative;
	transition: color var(--da-transition);
}

.wp-block-navigation a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 0;
	height: 2px;
	background: #A95B4A;
	transition: all var(--da-transition);
	transform: translateX(-50%);
}

.wp-block-navigation a:hover::after {
	width: 100%;
}

/* Mobile nav overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: 1.3rem;
	padding: 0.8rem 0;
}

/* --------------------------------------------------------------------------
   4. BUTTONS -- GLOBAL ENHANCEMENTS
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	transition: all var(--da-transition);
	cursor: pointer;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(169, 91, 74, 0.3);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. HERO SECTION
   -------------------------------------------------------------------------- */

/* Terracotta background when no photo is set; dark overlay dims photo when one is added */
.wp-block-cover.hero-cover {
	background-color: #A95B4A;
}

.wp-block-cover {
	overflow: hidden;
	background-color: #A95B4A;
}

/* Subtle Ken Burns effect on cover background images */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover video.wp-block-cover__video-background {
	animation: da-ken-burns 20s ease-in-out infinite alternate;
}

@keyframes da-ken-burns {
	0% { transform: scale(1); }
	100% { transform: scale(1.05); }
}

/* Hero logo icon -- no bounce/float */
.hero-logo-icon img {
	animation: none;
}

/* Menu highlights cover - scale down the background pattern */
.menu-highlights .wp-block-cover__image-background {
	object-fit: none !important;
	object-position: center !important;
}

/* Menu section logo */
.menu-logo-icon img {
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   6. TACO ICONS -- make white in menu section
   -------------------------------------------------------------------------- */
/* Taco cards in white boxes */
.taco-card {
	transition: all var(--da-transition);
	box-shadow: var(--da-shadow-card);
	background-image: none !important;
}

.taco-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--da-shadow-card-hover);
}

.taco-icon-card img {
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   7. MENU PAGE
   -------------------------------------------------------------------------- */
.menu-item {
	transition: background-color var(--da-transition);
}

.menu-item:hover {
	background-color: rgba(169, 91, 74, 0.04);
}

.menu-item__price {
	white-space: nowrap;
	flex-shrink: 0;
}

.menu-item__icon img {
	opacity: 0.6;
}

/* Menu highlight cards */
.menu-highlight-card {
	transition: all var(--da-transition);
	box-shadow: var(--da-shadow-card);
}

.menu-highlight-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--da-shadow-card-hover);
}

/* --------------------------------------------------------------------------
   8. ABOUT / FOUNDER
   -------------------------------------------------------------------------- */
.about-teaser__photo img,
.founder-story .wp-block-media-text__media img {
	border-radius: 16px;
	box-shadow: var(--da-shadow-card);
	transition: transform var(--da-transition-slow);
}

.about-teaser__photo:hover img,
.founder-story .wp-block-media-text__media:hover img {
	transform: scale(1.02);
}

/* Quote block styling */
.wp-block-quote {
	border-left: 4px solid #4B561D;
	padding-left: 1.5rem;
	margin-top: 1.5rem;
}

.wp-block-quote p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   9. GALLERY
   -------------------------------------------------------------------------- */
.da-gallery .wp-block-image {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--da-shadow-card);
	transition: all var(--da-transition);
}

.da-gallery .wp-block-image:hover {
	transform: scale(1.03);
	box-shadow: var(--da-shadow-card-hover);
}

.da-gallery .wp-block-image img {
	transition: transform var(--da-transition-slow);
}

.da-gallery .wp-block-image:hover img {
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   10. CONTACT FORM
   -------------------------------------------------------------------------- */
.da-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.da-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.da-form-group label {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	color: #2C1810;
}

.da-form-group input,
.da-form-group select,
.da-form-group textarea {
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	padding: 0.75rem 1rem;
	border: 2px solid #f0d5cc;
	border-radius: 8px;
	background: #FFFFFF;
	color: #2C1810;
	transition: border-color var(--da-transition), box-shadow var(--da-transition);
	outline: none;
	width: 100%;
}

.da-form-group input:focus,
.da-form-group select:focus,
.da-form-group textarea:focus {
	border-color: #A95B4A;
	box-shadow: 0 0 0 3px rgba(169, 91, 74, 0.15);
}

.da-form-group input::placeholder,
.da-form-group textarea::placeholder {
	color: #b8a29a;
}

.da-form-group textarea {
	resize: vertical;
	min-height: 120px;
}

.da-submit-btn {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.9rem 2rem;
	background: #A95B4A;
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: all var(--da-transition);
	align-self: flex-start;
}

.da-submit-btn:hover {
	background: #8A4538;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(169, 91, 74, 0.3);
}

.da-submit-btn:active {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   11. CATERING LIST
   -------------------------------------------------------------------------- */
.catering-list {
	list-style: none;
	text-align: center;
}

.catering-list li::before {
	content: '\2022';
	color: #FCE3D9;
	font-weight: 700;
	margin-right: 0.6rem;
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */

/* Footer */
.site-footer {
	position: relative;
}

.site-footer::before {
	display: none;
}

/* Match the opacity/overlay of the Onze Taco's section */
.site-footer > * {
	position: relative;
	z-index: 1;
}

/* Footer spacer reset (replaces old papel picado image block) */
.footer-picado-spacer {
	display: none !important;
}

/* Make site-logo white in footer */
.site-footer .wp-block-site-logo img,
.site-footer .footer-logo img {
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.site-footer a {
	color: #FCE3D9;
	text-decoration: none;
	transition: opacity var(--da-transition);
}

.site-footer a:hover {
	opacity: 0.8;
}

.footer-social a {
	transition: transform var(--da-transition), opacity var(--da-transition);
}

.footer-social a:hover {
	transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   13. SCROLL ANIMATIONS
   -------------------------------------------------------------------------- */
.da-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.da-animate.da-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger child animations */
.da-animate.da-visible .wp-block-column {
	opacity: 0;
	transform: translateY(20px);
	animation: da-fade-in-up 0.5s ease-out forwards;
}

.da-animate.da-visible .wp-block-column:nth-child(1) { animation-delay: 0.1s; }
.da-animate.da-visible .wp-block-column:nth-child(2) { animation-delay: 0.25s; }
.da-animate.da-visible .wp-block-column:nth-child(3) { animation-delay: 0.4s; }
.da-animate.da-visible .wp-block-column:nth-child(4) { animation-delay: 0.55s; }

@keyframes da-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	:root {
		--da-header-height: 60px;
	}

	/* Stack menu items better on mobile */
	.menu-item .wp-block-group[class*="flex"] {
		gap: 0.5rem;
	}

	.menu-item__price {
		font-size: 1rem !important;
	}

	/* Buttons -- auto width on mobile, not full stretch */
	.wp-block-buttons .wp-block-button {
		width: auto !important;
	}

	.wp-block-buttons .wp-block-button__link {
		width: auto !important;
		text-align: center;
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}

	/* Tighter section padding on mobile */
	.menu-highlights,
	.location-hours,
	.about-teaser,
	.founder-story {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Contact form full width button */
	.da-submit-btn {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	/* Ensure gallery stays nice on small screens */
	.da-gallery {
		columns: 2 !important;
	}

	/* Header: hide text, keep logo small */
	.site-header__logo img {
		max-width: 140px !important;
	}
}

/* --------------------------------------------------------------------------
   15. HAMBURGER -- only show on mobile
   -------------------------------------------------------------------------- */
/* Hide hamburger button on desktop */
.wp-block-navigation__responsive-container-open {
	display: none !important;
}

/* Show on mobile */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		padding: 0.4rem;
		color: #A95B4A;
	}

	/* Hide desktop nav links on mobile (but not the overlay) */
	.wp-block-navigation .wp-block-navigation__container {
		display: none !important;
	}

	/* Show nav container when overlay is open */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
	}

	/* Mobile overlay uses background pattern */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: url('../images/icons/background.png') repeat center #A95B4A !important;
		background-size: 400px auto !important;
	}
}

/* --------------------------------------------------------------------------
   16. FLOATING MAPS BUTTON
   -------------------------------------------------------------------------- */
.da-maps-float {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #A95B4A;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0.75rem 1.2rem;
	border-radius: 999px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	box-shadow: 0 4px 20px rgba(44, 24, 16, 0.25);
	transition: all var(--da-transition);
}

.da-maps-float:hover {
	background: #8A4538;
	transform: translateY(-2px);
	box-shadow: 0 6px 28px rgba(44, 24, 16, 0.35);
	color: #FFFFFF;
}

.da-maps-float svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.da-maps-float span {
		display: none;
	}
	.da-maps-float {
		padding: 0.9rem;
		border-radius: 50%;
	}
	.da-maps-float svg {
		width: 24px;
		height: 24px;
	}
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.order-online-btn,
	.wp-block-buttons,
	.da-maps-float {
		display: none !important;
	}

	.da-animate {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.da-animate {
		opacity: 1;
		transform: none;
	}

	html {
		scroll-behavior: auto;
	}
}