/* =========================================================
   BEACON — personal resume theme.
   Dark navy hero with a wave divider into a light, rounded-card
   body. Vivid rose/pink accent throughout. Colors, fonts, and
   spacing come from theme.json; this file carries the signature
   visual details block settings can't express.
   ========================================================= */

/* Critical reset — without this, any element that combines padding
   with a percentage/100% width (form fields, cards, columns) renders
   WIDER than its container and causes horizontal scroll on phones.
   This was missing entirely, and is the root cause of the mobile
   overflow. */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	/* Smooth-scrolls to in-page anchors (#experience, #contact, etc.)
	   instead of jumping instantly. scroll-padding-top keeps the
	   sticky header from covering the top of whatever section you
	   jump to. */
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body { background: var(--wp--preset--color--cloud); }

/* ---------------- Sticky header ---------------- */
html, body {
	/* A non-visible overflow on ANY ancestor silently disables
	   position:sticky on everything inside it. Force this explicitly —
	   some hosts/plugins add overflow-x:hidden to fix horizontal-scroll
	   issues, which is the most common reason a sticky header stops
	   working after launch. */
	overflow-x: visible;
}
header.site-header-block,
.site-header-block {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 14px;
	padding-bottom: 14px;
	margin-bottom: 0 !important;
}
.site-header-block .wp-block-site-title { font-size: 18px; white-space: nowrap; }
@media (max-width: 480px) {
	.site-header-block .wp-block-site-title { font-size: 15px; }
}
.brand-mark-footer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(135deg, #EE3F66 0%, #7A3F8F 60%, #232B3D 100%);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13px;
	margin: 0;
	line-height: 1;
}

/* ---------------- Mobile hamburger menu (core Navigation block) ----------------
   Scoped to the same breakpoint core WordPress uses for collapsing the
   Navigation block (782px). Without this @media wrapper, "display:flex
   !important" forces the hamburger/close buttons to show even on
   desktop, floating on top of the normal inline menu — that was the bug. */
@media (max-width: 782px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 10px;
		background: rgba(238,63,102,0.1) !important;
		border: none !important;
	}
	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-open .wp-block-navigation__icon svg {
		stroke: var(--wp--preset--color--navy) !important;
		width: 22px;
		height: 22px;
	}
	.wp-block-navigation__responsive-container-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 10px;
		background: rgba(255,255,255,0.12) !important;
		border: none !important;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.wp-block-navigation__responsive-container-close svg {
		stroke: #fff !important;
		width: 22px;
		height: 22px;
	}
	.wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--navy) !important;
		padding: 80px 32px 40px !important;
		z-index: 9999 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		margin-bottom: 4px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		color: #fff !important;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		font-size: 20px !important;
		padding: 14px 0 !important;
		display: block;
		border-bottom: 1px solid rgba(255,255,255,0.12);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--teal) !important;
	}
}

/* Belt-and-suspenders: explicitly hide both buttons above the mobile
   breakpoint in case any theme/plugin CSS elsewhere forces them open. */
@media (min-width: 783px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}
}


/* ---------------- Hero: full-bleed navy + wave divider ----------------
   Deliberately NOT using width:100vw + negative margins here — that
   classic "full-bleed" trick risks creating horizontal overflow, which
   in turn is the most common reason a sticky header silently breaks
   (see the overflow-x rule above). This block is already a top-level
   block with nothing constraining its width, so plain 100% is enough
   and carries zero risk. */
.hero-dark-bg {
	background: var(--wp--preset--color--navy);
	width: 100%;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}
.hero-block { padding-top: 70px; padding-bottom: 40px; margin-top: 0 !important; }

.wave-divider {
	display: block;
	width: 100%;
	height: 90px;
	margin-top: -2px;
}

.eyebrow-badge {
	display: inline-block;
	background: rgba(238,63,102,0.16);
	color: #FF87A6;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13px;
	padding: 6px 16px;
	border-radius: 999px;
	margin: 0 0 20px;
}

.hero-heading { color: #fff; }
.hero-heading__accent { color: var(--wp--preset--color--teal); }
.hero-lede {
	color: #B7BECC;
	max-width: 46ch;
	margin: 0 0 32px;
}

.portrait-stage {
	position: relative;
	max-width: 340px;
	margin: 0 auto;
}
.portrait-stage::before {
	content: '';
	position: absolute;
	top: -20px; right: -20px;
	width: 88%;
	height: 88%;
	background: var(--wp--preset--color--teal);
	opacity: 0.25;
	border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
	z-index: 0;
	animation: blob-float 7s ease-in-out infinite;
}
@keyframes blob-float {
	0%, 100% { transform: translate(0,0) rotate(0deg); }
	50% { transform: translate(6px,-10px) rotate(6deg); }
}
.portrait-shot {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 50px -14px rgba(0,0,0,0.5);
	margin: 0;
}
.portrait-shot img { display: block; width: 100%; }

.floating-badge {
	position: absolute;
	z-index: 2;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	padding: 12px 18px;
}
.floating-badge--top { top: 18px; left: -34px; }
.floating-badge--bottom { bottom: 18px; right: -28px; }
.floating-badge__eyebrow {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--steel);
	margin: 0;
}
.floating-badge__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--wp--preset--color--ink);
	margin: 2px 0 0;
}

.hero-stats { display: flex !important; gap: 36px !important; margin-top: 10px !important; flex-wrap: wrap; }
.hero-stats__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 26px;
	color: #fff;
	margin: 0;
}
.hero-stats__label { font-size: 12.5px; color: #9DA5B8; margin: 2px 0 0; }

@media (min-width: 783px) {
	.hero-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
	.hero-columns > .wp-block-column:first-child { flex: 1 1 54% !important; }
	.hero-columns > .wp-block-column:last-child { flex: 1 1 46% !important; }
}

/* Light outline button used on dark hero */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255,255,255,0.5);
	color: #fff;
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--navy) !important;
	border-color: #fff;
}

/* ---------------- "Why work with me" icon cards ---------------- */
.why-block { padding-top: 44px; padding-bottom: 30px; }
.why-grid { gap: 24px !important; }
.why-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(31,36,48,0.08);
	padding: 30px 26px;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(31,36,48,0.14); }
.why-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: rgba(238,63,102,0.1);
	font-size: 24px;
	margin: 0 auto 16px;
}
.why-card h3 { margin-bottom: 8px; }

/* ---------------- Section heading with numbered index ---------------- */
.section-block { padding-top: 20px; padding-bottom: 56px; }
.section-heading { align-items: baseline !important; gap: 14px !important; margin-bottom: 28px; }
.section-index {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 15px;
	color: var(--wp--preset--color--coral);
	margin: 0;
}
.section-heading h2 { margin: 0; }

/* ---------------- Experience cards ---------------- */
.exp-card {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(31,36,48,0.06);
	padding: 28px 30px;
	margin-bottom: 20px;
	transition: box-shadow 0.25s ease;
}
.exp-card:hover { box-shadow: 0 10px 30px rgba(31,36,48,0.12); }
.exp-card > .wp-block-group:first-child {
	display: flex !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 8px 16px;
}
.date-pill {
	display: inline-block;
	background: rgba(238,63,102,0.1);
	color: var(--wp--preset--color--teal-deep);
	font-size: 13px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 999px;
	margin: 0;
}
.exp-card ul { margin: 14px 0 0; padding-left: 18px; }
.exp-card li { margin-bottom: 6px; }
.exp-card li::marker { color: var(--wp--preset--color--teal); }

/* ---------------- Pills (skills / tools) ---------------- */
.pills-row { gap: 10px !important; margin-top: 14px !important; }
.wp-block-button.is-style-pill .wp-block-button__link {
	background: rgba(238,63,102,0.1);
	color: var(--wp--preset--color--teal-deep);
	border: none;
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.2s ease;
}
.wp-block-button.is-style-pill .wp-block-button__link:hover {
	background: rgba(238,63,102,0.2);
	transform: translateY(-2px);
}
.pills-row--coral .wp-block-button.is-style-pill .wp-block-button__link {
	background: rgba(35,43,61,0.06);
	color: var(--wp--preset--color--navy);
}
.pills-row--coral .wp-block-button.is-style-pill .wp-block-button__link:hover {
	background: rgba(35,43,61,0.12);
}

/* ---------------- Outline button (Get in touch, on light bg) ---------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--teal);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal);
	color: #fff !important;
}

/* ---------------- Card grid: certifications, portfolio, blog ---------------- */
.card-grid { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; margin-top: 4px; }
.info-card {
	flex: 1 1 300px;
	max-width: 340px;
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(31,36,48,0.06);
	overflow: hidden;
	padding-bottom: 20px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.info-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(31,36,48,0.14); }
.card-image, .info-card .wp-block-post-featured-image { margin: 0 0 16px; overflow: hidden; }
.card-image img, .info-card .wp-block-post-featured-image img { width: 100%; display: block; transition: transform 0.4s ease; }
.info-card:hover .card-image img, .info-card:hover .wp-block-post-featured-image img { transform: scale(1.06); }
.info-card h3, .info-card p, .info-card .wp-block-post-title, .info-card .wp-block-post-excerpt, .info-card .date-pill {
	margin-left: 20px;
	margin-right: 20px;
}
.info-card h3, .info-card .wp-block-post-title { margin-top: 0; margin-bottom: 6px; }
.info-card__title { font-weight: 600; color: var(--wp--preset--color--ink); }
.info-card .date-pill { margin-bottom: 10px; }
.info-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.info-card .wp-block-post-title a:hover { color: var(--wp--preset--color--teal); }

/* ---------------- Contact ---------------- */
.contact-columns {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 32px !important;
}
.contact-columns > .wp-block-column:first-child { flex: 1 1 calc(38% - 32px) !important; }
.contact-columns > .wp-block-column:last-child { flex: 2 1 calc(62% - 32px) !important; }
@media (max-width: 700px) {
	/* The desktop calc()-based flex-basis above doesn't collapse on its
	   own — without this override the cards stay too wide and cause
	   horizontal scroll on phones. Force both columns to full width and
	   stack them. */
	.contact-columns > .wp-block-column:first-child,
	.contact-columns > .wp-block-column:last-child {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}
.contact-info-card { background: var(--wp--preset--color--navy); color: #fff; border-radius: 16px; padding: 26px 28px; height: 100%; }
.contact-info-card a { color: #fff; }
.contact-info-card__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #FF87A6;
	margin: 0 0 4px;
}
.contact-info-card p:not(.contact-info-card__label) { margin: 0 0 18px; }

.contact-form-card { background: var(--wp--preset--color--white); border-radius: 16px; box-shadow: 0 2px 16px rgba(31,36,48,0.06); padding: 30px; }
.contact-form-card__row { display: flex; gap: 18px; flex-wrap: wrap; }
.contact-form-card__field { flex: 1 1 200px; margin-bottom: 16px; display: flex; flex-direction: column; }
.contact-form-card label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--steel);
	margin-bottom: 6px;
}
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cloud);
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 12px 14px;
	resize: vertical;
	transition: border-color 0.2s ease;
}
.contact-form-card input:focus, .contact-form-card textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal);
	background: #fff;
}
.contact-form-card__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form-card__row--submit { align-items: center; gap: 18px; margin-top: 4px; }
.contact-form-card__submit {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14.5px;
	font-weight: 600;
	padding: 13px 28px;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--coral);
	color: #fff;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-form-card__submit:hover { opacity: 0.9; transform: translateY(-2px); }
.contact-form-card__submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.contact-form-card__status.is-success { color: #2E7D4F; }
.contact-form-card__status.is-error { color: #C0392B; }

/* ---------------- Footer ---------------- */
.site-footer-block { padding: 32px 0; }
.footer-meta { color: #9DA5B8; margin: 0; }

/* ---------------- Reveal-on-scroll ---------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 782px) {
	.hero-block { padding-top: 44px; padding-bottom: 30px; }
	.portrait-stage { max-width: 240px; margin: 0 auto 50px; }
	.floating-badge--top { left: 0; top: -16px; }
	.floating-badge--bottom { right: 0; bottom: -16px; }
	.floating-badge { padding: 10px 14px; }
	.hero-stats { gap: 24px !important; justify-content: center; }
	.exp-card { padding: 22px 20px; }
	.why-grid.wp-block-columns { flex-direction: column; }
	.wave-divider { height: 50px; }
	.section-block { padding-bottom: 40px; }
}

@media (max-width: 480px) {
	.hero-heading.has-xx-large-font-size { font-size: 34px; }
	.hero-lede { font-size: 14.5px; }
	.eyebrow-badge { font-size: 12px; }
	.floating-badge__title { font-size: 12.5px; }
	.floating-badge__eyebrow { font-size: 10px; }
	.hero-stats__num { font-size: 22px; }
	.why-card, .exp-card, .contact-info-card, .contact-form-card { padding-left: 18px; padding-right: 18px; }
}