/* ====================================================================
   NAPLES — Preservé Breast Augmentation page
   --------------------------------------------------------------------
   Scoped styles for the Preservé page template (page-preserve.php).
   All layout comes from inline styles in the PHP template (1:1 with
   the design mockup). This file only handles: font loading, container
   escape, FAQ interactivity, and responsive breakpoints.
   ==================================================================== */

/* Load Playfair Display + Poppins from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* Root wrapper — escape the theme's container constraints */
.preserve-page-main {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #55666D;
	font-size: 16px;
	line-height: 1.75;
	background: #ffffff;
}

.preserve-page-main h1,
.preserve-page-main h2,
.preserve-page-main h3 {
	font-family: 'Playfair Display', Georgia, serif;
	color: #1B3E49;
}

/* FAQ toggle interactivity — + rotates to × when open */
.preserve-page-main details[open] .faq-plus {
	transform: rotate(45deg);
}

.preserve-page-main details summary::-webkit-details-marker {
	display: none;
}

.preserve-page-main details summary {
	list-style: none;
}

/* Responsive — collapse 2-col grids to 1-col on tablet/mobile */
@media (max-width: 900px) {
	.preserve-page-main div[style*="grid-template-columns: 1.2fr 1fr"],
	.preserve-page-main div[style*="grid-template-columns: 1fr 1.2fr"],
	.preserve-page-main div[style*="grid-template-columns: 1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* Section padding — smaller on mobile */
@media (max-width: 600px) {
	.preserve-page-main section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}


/* Extra spacing before the site's contact form (which comes right after) */
.preserve-page-main {
	padding-bottom: 96px;
}

@media (max-width: 600px) {
	.preserve-page-main {
		padding-bottom: 64px;
	}
}