/* ==========================================================================
   InternStayMalta Theme Stylesheet
   Table of Contents:
   1. Fonts
   2. Variables
   3. Base / Reset
   4. Layout
   5. Header
   6. Navigation
   7. Hero Slider
   8. Page Header Banner
   9. Welcome Section
   10. Section Cards (Light)
   11. Section Cards (Dark / MMS-style)
   12. Area Cards
   13. Contact CTA
   14. FAQ
   15. Buttons
   16. Footer
   17. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Fonts
   ========================================================================== */

@font-face {
	font-family: 'Anune';
	src: url('../fonts/anune___.woff2') format('woff2'),
	     url('../fonts/anune___.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'AnuneDW';
	src: url('../fonts/anunedw_.woff2') format('woff2'),
	     url('../fonts/anunedw_.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sacramento';
	src: url('../fonts/sacramento-regular.woff2') format('woff2'),
	     url('../fonts/sacramento-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   2. Variables
   ========================================================================== */

:root {
	/* Brand colours */
	--color-primary:      #1a6bb5;
	--color-primary-dark:  #114a80;
	--color-accent:        #f5a623;
	--color-accent-mms:    #FF7F00;   /* orange from mijnmaltastage */

	/* Text */
	--color-text:          #333333;
	--color-muted:         #666666;

	/* Backgrounds */
	--color-light-bg:      #f8f9fa;
	--color-white:         #ffffff;
	--color-card-dark-bg:  #6B6B6B;   /* dark card bg from MMS */
	--color-card-dark-text:#e8e8d8;   /* light text on dark cards */
	--color-footer-bg:     #0d1b2a;

	/* Footer text palette */
	--color-footer-text:   #e0e7ee;
	--color-footer-muted:  #c4d1de;
	--color-footer-dim:    #7a8fa3;

	/* Typography */
	--font-heading:        'Playfair Display', Georgia, serif;
	--font-body:           'Inter', system-ui, sans-serif;

	/* Shared tokens */
	--radius:              8px;
	--shadow:              0 2px 12px rgba(0, 0, 0, 0.08);
	--shadow-hover:        0 8px 24px rgba(0, 0, 0, 0.12);
	--transition:          0.2s ease;
}


/* ==========================================================================
   3. Base / Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* MaltaCode house rule: no horizontal scroll, ever */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.25;
	color: var(--color-primary);
}

a {
	color: var(--color-primary);
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-dark);
}

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


/* ==========================================================================
   4. Layout
   ========================================================================== */

/* Let theme.json contentSize + useRootPaddingAwareAlignments handle width.
   Only scope width/padding to .entry-content INSIDE <main> (normal pages),
   so standalone templates like coming-soon render edge-to-edge. */
main > .wp-block-post-content,
main > .entry-content {
	padding-block: 2.5rem;
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
	background: var(--color-white);
	padding: 1rem 1.5rem;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-branding .wp-block-site-logo img {
	max-height: 70px;
	width: auto;
}

.site-branding .wp-block-site-title a {
	color: var(--color-primary-dark);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
}


/* ==========================================================================
   6. Navigation
   ========================================================================== */

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	text-decoration: none;
	color: var(--color-text);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.3rem 0;
	transition: color var(--transition), border-color var(--transition);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
}


/* ==========================================================================
   7. Hero Slider
   ========================================================================== */

.hero-slider {
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 500px;
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.hero-slide.active {
	opacity: 1;
	pointer-events: auto;
}

.hero-slide-inner {
	text-align: center;
	color: white;
	padding: 2rem;
	max-width: 700px;
}

.hero-slide-inner h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.8rem, 4.5vw, 3.2rem);
	color: #ffffff !important;
	margin-bottom: 0.75rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.hero-slide-inner p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.92) !important;
	margin: 0;
}

/* Slider controls */
.hero-controls {
	position: absolute;
	bottom: 1.5rem;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	z-index: 10;
}

.hero-prev,
.hero-next {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1rem;
	transition: background var(--transition);
}

.hero-prev:hover,
.hero-next:hover {
	background: rgba(255, 255, 255, 0.3);
}

.hero-dots {
	display: flex;
	gap: 0.5rem;
}

.hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	transition: background var(--transition);
}

.hero-dot.active {
	background: white;
}


/* ==========================================================================
   8. Page Header Banner
   ========================================================================== */

.page-header-banner {
	min-height: 280px;
	margin-bottom: 2rem;
}

.page-header-banner h1,
.page-header-banner h2,
.page-header-banner p {
	color: #ffffff !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.wp-block-cover__background {
	opacity: 0.3 !important;
}


/* ==========================================================================
   9. Welcome Section
   ========================================================================== */

.welcome-section {
	padding: 4rem 1.5rem;
}

.welcome-heading {
	color: var(--color-primary);
	font-family: var(--font-heading);
	margin-bottom: 1.5rem;
}

.welcome-columns {
	align-items: center;
}

.welcome-section p {
	font-size: 0.92rem;
	line-height: 1.65;
}

/* Yvo photo */
.welcome-photo-col {
	display: flex;
	justify-content: center;
	align-items: center;
}

.welcome-photo {
	max-width: 100%;
}

.welcome-photo img {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50% !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	display: block;
	margin: 0 auto;
}


/* ==========================================================================
   10. Section Cards (Light)
   ========================================================================== */

.section-card {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
	padding: 1.5rem;
}

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

.section-card h3 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	margin-bottom: 0.75rem;
}

.section-card ul {
	padding-left: 1.3rem;
	color: var(--color-muted);
	margin-bottom: 1rem;
}

.section-card ul li {
	margin-bottom: 0.3rem;
}

.section-card .section-card-image {
	margin-bottom: 1rem;
}

.section-card .section-card-image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: var(--radius) var(--radius) 0 0;
}

.section-card-image {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.section-card-body {
	padding: 1.5rem;
}

.section-card-body h3 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	margin-bottom: 0.75rem;
}

.section-card-body ul {
	padding-left: 1.3rem;
	color: var(--color-muted);
	margin-bottom: 1rem;
}

.section-card-body ul li {
	margin-bottom: 0.3rem;
}


/* ==========================================================================
   11. Section Cards (Dark / MMS-style)
   ========================================================================== */

.section-cards-grid {
	padding: 0 1.5rem 4rem;
	gap: 2rem;
}

.section-card-dark {
	background: var(--color-card-dark-bg);
	border-radius: var(--radius);
	padding: 1.75rem 1.5rem;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.section-card-dark h3 {
	font-family: var(--font-heading);
	color: var(--color-accent-mms);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.section-card-dark .wp-block-image {
	float: right;
	width: 200px;
	height: 200px;
	margin: 0 0 1rem 1.5rem;
	shape-outside: circle(50%);
}

.section-card-dark .wp-block-image img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
}

.section-card-dark ul {
	color: var(--color-card-dark-text);
	padding-left: 1.2rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	line-height: 1.8;
}

.section-card-dark ul li {
	margin-bottom: 0.2rem;
}

.btn-card .wp-block-button__link {
	background: transparent;
	color: var(--color-accent-mms);
	border: 1px solid var(--color-accent-mms);
	padding: 0.5rem 1.25rem;
	font-size: 0.85rem;
	border-radius: 3px;
	text-decoration: none;
	display: inline-block;
	transition: background var(--transition), color var(--transition);
}

.btn-card .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.15);
}


/* ==========================================================================
   12. Area Cards
   ========================================================================== */

.area-card {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	transition: transform var(--transition), box-shadow var(--transition);
}

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

.price-badge {
	display: inline-block;
	background: var(--color-accent);
	color: #0d1b2a;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.7rem;
	border-radius: 100px;
	margin-bottom: 0.75rem;
}


/* ==========================================================================
   13. Contact CTA
   ========================================================================== */

.contact-cta {
	background: var(--color-light-bg);
	border-radius: var(--radius);
	padding: 3rem 2rem;
	text-align: center;
	margin: 3rem 0;
}

.contact-cta h2 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	margin-bottom: 1rem;
}


/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq-container {
	max-width: 800px;
	margin: 2rem auto;
}

.faq-item {
	border-bottom: 1px solid #e5e9ef;
	padding: 1.1rem 0;
}

.faq-question {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	color: var(--color-primary);
	font-size: 1rem;
	user-select: none;
	list-style: none;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: "+";
	font-size: 1.3rem;
	color: var(--color-accent);
	transition: transform var(--transition);
	flex-shrink: 0;
	margin-left: 1rem;
}

.faq-item.open .faq-question::after {
	content: "\2212";
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	color: var(--color-muted);
}

.faq-answer.open {
	max-height: 600px;
}

.faq-answer p {
	padding-top: 0.75rem;
	line-height: 1.7;
}


/* ==========================================================================
   15. Buttons
   ========================================================================== */

.btn,
.wp-block-button__link {
	display: inline-block;
	background: var(--color-primary);
	color: white;
	padding: 0.65rem 1.5rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background var(--transition);
}

.btn:hover,
.wp-block-button__link:hover {
	background: var(--color-primary-dark);
	color: white;
}

.btn-accent,
.is-style-accent .wp-block-button__link {
	background: var(--color-accent);
	color: #0d1b2a;
}

.btn-accent:hover,
.is-style-accent .wp-block-button__link:hover {
	filter: brightness(0.9);
}


/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding: 2rem 1.5rem 1.25rem;
}

.footer-cols {
	gap: 2.5rem;
}

/* Headings — !important needed to beat WP global .has-text-color rule */
.site-footer .footer-cols h4.wp-block-heading {
	color: var(--color-accent-mms) !important;
	margin-bottom: 1rem;
	font-size: 1rem;
}

.footer-cols p {
	color: var(--color-footer-text);
	font-size: 0.85rem;
}

.footer-cols a {
	color: var(--color-footer-text);
	text-decoration: none;
}

.footer-cols a:hover {
	color: white;
}

/* Logo column */
.footer-logo {
	display: flex;
	justify-content: center;
}

.footer-tagline {
	font-family: var(--font-heading);
	font-style: italic;
	color: var(--color-footer-muted);
	margin-top: 0.5rem;
	font-size: 0.95rem;
	text-align: center;
	white-space: nowrap;
}

/* Navigation links — !important to override WP block inline colours */
.footer-nav,
.footer-nav a,
.footer-nav .wp-block-navigation-item a,
.footer-nav .wp-block-navigation-link a {
	color: var(--color-footer-text) !important;
	text-decoration: none;
	font-size: 0.85rem;
}

.footer-nav a:hover {
	color: white !important;
}

/* Divider & copyright */
.footer-divider {
	border-color: #1e3a55;
	margin: 1.25rem 0;
}

.footer-copy {
	color: var(--color-footer-dim);
	font-size: 0.8rem;
}

.footer-copy a {
	color: var(--color-footer-muted);
}

.footer-copy a:hover {
	color: white;
}


/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.welcome-section {
		grid-template-columns: 1fr;
	}

	.welcome-section img {
		order: -1;
	}
}

@media (max-width: 768px) {
	.hero-slider {
		height: 60vh;
		min-height: 340px;
	}

	.welcome-columns {
		flex-direction: column-reverse;
	}

	.welcome-photo img {
		max-width: 220px;
		margin-bottom: 1rem;
	}
}

@media (max-width: 600px) {
	.section-card-dark .wp-block-image {
		float: none;
		width: 120px;
		height: 120px;
		margin: 0 auto 1rem;
	}

	.section-card-dark .wp-block-image img {
		width: 120px;
		height: 120px;
	}

	.welcome-photo {
		float: none;
		margin: 0 auto 1.5rem;
		max-width: 200px;
	}

	.footer-cols,
	.wp-block-columns.footer-cols {
		flex-direction: column;
	}

	.contact-cta {
		padding: 2rem 1rem;
	}
}