/*
 * Extra presentational CSS that theme.json cannot express on its own:
 * - the eyebrow label with a line on each side ("WHO WE ARE", "WHAT WE OFFER")
 * - the flip-card hover effect used in the Products section
 * - the responsive product card grid
 * - the hero heading drop shadow
 *
 * Everything here is applied through "Additional CSS class(es)" on ordinary
 * Group/Heading/Paragraph blocks, so all the actual TEXT and IMAGES stay
 * 100% editable in the block editor. This file only controls appearance.
 */

/* ---------- Eyebrow label (e.g. "WHO WE ARE") ---------- */
.eyebrow-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1px;
}
.eyebrow-label::before,
.eyebrow-label::after {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background-color: currentColor;
	opacity: 0.6;
}

/* ---------- Section heading (uppercase, light weight, big) ---------- */
.section-heading {
	text-transform: uppercase;
	font-weight: 200;
}

/* ---------- Hero heading drop shadow ---------- */
.hero-heading {
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45);
}

/* ---------- Product card grid ---------- */
.product-card-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.product-card-grid > * {
	flex: 1 1 300px;
	max-width: 340px;
	/* WordPress core adds a "> * + *" margin-top fallback for blocks
	   authored with layout type "default"; this grid is flexed via the
	   rules above, so that stray margin must be zeroed or every card
	   after the first one drops lower than its row (misaligned rows). */
	margin-top: 0 !important;
}

/* ---------- Flip card ---------- */
.flip-card {
	background-color: transparent;
	perspective: 1000px;
	height: 340px;
	width: 100%;
	/* Belt-and-braces: nothing from the front/back faces (or any future
	   stray spacing) should ever be able to visually spill outside the
	   card's own box into whatever sits behind/below it on the page. */
	overflow: hidden;
	position: relative;
	isolation: isolate;
}
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
	transform: rotateY(180deg);
}
/* .flip-card-back is the SECOND child inside .flip-card-inner, so it was
   getting the same stray WordPress "> * + *" 24px margin-top fallback seen
   elsewhere in this file. On an absolutely positioned element with
   inset:0 + an explicit height, a non-zero margin-top still shifts the box
   down by that amount WITHOUT shrinking its height — so the back panel
   ended up 24px lower than the card and overflowing 24px past its bottom,
   leaving a 24px gap at the top where whatever sits behind the card (the
   page background, or the next section down) showed through. That's what
   made the flipped card look like it "dropped below the line" with a
   sliver of unrelated content peeking out above it. */
.flip-card-front,
.flip-card-back {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	backface-visibility: hidden;
}
.flip-card-back {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow: auto;
}
.flip-card-back h3 {
	margin-top: 0;
	margin-bottom: 12px;
}
.flip-card-front {
	padding: 0;
	background-color: #1abc9c;
	overflow: hidden;
}
.flip-card-front .wp-block-image {
	height: 100%;
	width: 100%;
	margin: 0;
}
.flip-card-front .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.flip-card-back {
	background-color: #004c6c;
	color: #ffffff;
	transform: rotateY(180deg);
}
.flip-card-back h3,
.flip-card-back p {
	color: #ffffff;
}
.flip-card-back p {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Contact/footer navy panel: force full-bleed background ----------
 * The panel is a plain (non-"alignfull") group nested inside the #contact
 * section, so its background only spans the 1140px content width instead of
 * the full browser width. This reproduces WordPress's own alignfull
 * technique via CSS so it fixes ANY page that already has this block saved
 * (no need to re-edit and re-publish the page) alongside the block-markup
 * fix already applied in patterns/homepage.php for fresh installs.
 */
#contact > .has-accent-navy-background-color {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* The Google Maps embed is authored as a plain Custom HTML block (no
 * "alignfull" attribute), so — same root cause as the navy panel above —
 * it only stretches to the 1140px content width instead of the full
 * browser width. It's always the first element inside #contact, so target
 * it positionally rather than requiring a class change in the saved page
 * content. */
#contact > div:first-child {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* WordPress adds a default 24px "root" block gap between the <main> content
   and the <footer> template part; that shows up as an unwanted white strip
   between the navy contact panel and the copyright bar. Remove it so the
   two sit flush, matching the original design. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}

/* Same default 24px gap also lands between EVERY top-level section of the
   homepage (hero -> about -> products -> full-width image break -> contact)
   because each is authored as a separate full-bleed block. All of these are
   deliberately meant to butt up against each other with no gap (the visual
   spacing inside each section comes from its own padding, not from margin
   between sections) so the stray margin must be zeroed here too. */
.wp-block-post-content > * {
	margin-top: 0 !important;
}

/* ---------- Footer "back to top" link ---------- */
.back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	font-weight: 500;
}

@media (max-width: 782px) {
	.hero-heading {
		font-size: 34px !important;
		line-height: 1.3 !important;
	}
	.section-heading {
		font-size: 34px !important;
		line-height: 1.3 !important;
	}
	.flip-card {
		height: 300px;
	}
}