/*
Theme Name: PADI Mediation
Theme URI: https://padimediation.co.uk
Author: PADI Mediation
Description: Custom theme for PADI Mediation, a family mediation practice. Built from the Claude Design "PADI Mediation site review".
Version: 1.0.0
Text Domain: padi-mediation
*/

body {
	margin: 0;
	background: #FBF8F3;
	font-family: 'Inter', sans-serif;
	color: #2B2420;
}

* {
	box-sizing: border-box;
}

a {
	color: #86672E;
	text-decoration: none;
}

/*
 * Hover darkens to the brand brown rather than lightening to #A6803D. The
 * lighter gold is only 3.43:1 on the cream background, so the old hover dropped
 * the link below AA at the moment of interaction. #2B2420 is 12.4:1.
 */
a:hover {
	color: #2B2420;
}

/*
 * Links sitting inside body copy must not rely on colour alone: #86672E against
 * the #5C5248 body text is 1.45:1, far below the 3:1 that WCAG requires before
 * colour can be the only distinction. Underlining them satisfies it directly.
 *
 * Scoped to prose (paragraphs, list items, table cells) so navigation, buttons
 * and card links — which are identifiable from their position and styling —
 * stay undecorated. .padi-btn is excluded in case a button ever sits in a <p>.
 */
main p a:not(.padi-btn):not(.padi-submit-btn),
main li a:not(.padi-btn):not(.padi-submit-btn),
main td a:not(.padi-btn):not(.padi-submit-btn) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/*
 * Form controls and buttons do not inherit font-family from the document — the
 * browser substitutes its own UI font. Without this, every <button> and any
 * <input> lacking an inline font-family rendered in Arial while the rest of the
 * page used Inter, including the two main call-to-action buttons.
 */
button,
input,
select,
textarea {
	font-family: inherit;
}

/*
 * Scroll-reveal only hides content once JS confirms it's running (body.js-ready).
 * Without this gate, a slow/blocked/erroring script would leave every
 * [data-reveal] section permanently invisible — content must never depend
 * on JS succeeding to be seen at all.
 */
body.js-ready [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-ready [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes goldDrift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.padi-nav-link {
	font-size: 15px;
	font-weight: 500;
	color: #EDE6D8;
	border-bottom: 2px solid transparent;
	padding-bottom: 3px;
	transition: color 0.15s ease, border-color 0.2s ease;
}

.padi-nav-link:hover {
	color: #C9A868;
	border-bottom-color: #C9A868;
}

.padi-dropdown-link {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: #EDE6D8;
	border-radius: 6px;
	white-space: nowrap;
	display: block;
}

.padi-dropdown-link:hover {
	background: rgba(251, 248, 243, 0.1);
	color: #EDE6D8;
}

.padi-footer-link {
	font-size: 14px;
	color: #C9C2B6;
	font-weight: 500;
}

.padi-footer-link:hover {
	color: #C9A868;
}

.padi-footer-social:hover {
	color: #C9A868;
}

/* ==========================================================================
   WhatsApp chat box (bottom-right, all pages)
   A greeting panel that opens from a floating button, in PADI's gold rather
   than WhatsApp green. "Open chat" hands off to WhatsApp, so replies land in
   the practice's WhatsApp rather than being stored on the site.
   ========================================================================== */
.padi-chat {
	position: fixed;
	right: 20px;
	/* env() keeps it clear of the iOS home-indicator bar; 20px is the
	   fallback for browsers without support. */
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.padi-chat-toggle {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: #A6803D;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 6px 18px rgba(43, 36, 32, 0.28);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.padi-chat-toggle svg {
	width: 28px;
	height: 28px;
}

.padi-chat-toggle:hover,
.padi-chat-toggle:focus-visible {
	background: #86672E;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(43, 36, 32, 0.34);
}

/* Panel is collapsed by default and only revealed once the button is
   clicked, so it never covers content unprompted. */
.padi-chat-panel {
	display: none;
	width: min(300px, calc(100vw - 40px));
	background: #FBF8F3;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(43, 36, 32, 0.28);
}

.padi-chat.is-open .padi-chat-panel {
	display: block;
	animation: padiChatIn 0.22s ease;
}

@keyframes padiChatIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.padi-chat-head {
	background: #86672E;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.padi-chat-title {
	font-family: 'Playfair Display', serif;
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
}

.padi-chat-close {
	/* Darkens the gold header behind it rather than lightening it: a white
	   overlay put the white "×" at 3.66:1, this puts it at 7.57:1. */
	background: rgba(0, 0, 0, 0.22);
	border: 0;
	color: #FFFFFF;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.padi-chat-close:hover,
.padi-chat-close:focus-visible {
	background: rgba(0, 0, 0, 0.38);
}

.padi-chat-body {
	padding: 18px 16px 4px;
}

.padi-chat-bubble {
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #E6DFD3;
	border-radius: 12px;
	border-top-left-radius: 2px;
	padding: 14px 16px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #2B2420;
}

.padi-chat-open {
	margin: 14px 16px 18px;
	background: #86672E;
	color: #FFFFFF;
	border-radius: 24px;
	padding: 12px 20px;
	font-size: 14.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background 0.2s ease;
}

.padi-chat-open:hover,
.padi-chat-open:focus-visible {
	background: #2B2420;
	color: #FFFFFF;
}

.padi-chat-open-icon {
	display: flex;
}

.padi-chat-open-icon svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 780px) {
	.padi-chat {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.padi-chat-toggle {
		width: 52px;
		height: 52px;
	}
}

/* Respect reduced-motion: keep colour feedback, drop movement. */
@media (prefers-reduced-motion: reduce) {
	.padi-chat-toggle {
		transition: background 0.2s ease;
	}

	.padi-chat-toggle:hover,
	.padi-chat-toggle:focus-visible {
		transform: none;
	}

	.padi-chat.is-open .padi-chat-panel {
		animation: none;
	}
}

.padi-wordmark {
	color: #C9A868;
}

.padi-toggle-bar {
	width: 20px;
	height: 2px;
	background: #C9A868;
	display: block;
}

.padi-mobile-toggle {
	background: none;
	border: 1px solid rgba(201, 168, 104, 0.55);
	border-radius: 8px;
	width: 44px;
	height: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
}

.padi-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(20, 16, 12, 0.68);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid rgba(251, 248, 243, 0.1);
	transition: background 0.3s ease;
}

.padi-header.is-scrolled {
	background: rgba(20, 16, 12, 0.97);
}

/* While the mobile menu is open the top bar turns gold, so the wordmark and
   hamburger flip to white to stay readable against it. Declared after the
   .is-scrolled rule so it wins at equal specificity, and capped at 999px so a
   resize to desktop (where the menu is hidden anyway) can't leave it gold. */
@media (max-width: 999px) {
	.padi-header.is-menu-open,
	.padi-header.is-scrolled.is-menu-open {
		/* Same gold as the "Book a MIAM" button. On the lighter #A6803D the white
		   22px wordmark was only 3.64:1; on this it is 5.26:1. */
		background: #86672E;
	}

	.padi-header.is-menu-open .padi-wordmark {
		color: #FFFFFF;
	}

	.padi-header.is-menu-open .padi-toggle-bar {
		background: #FFFFFF;
	}

	.padi-header.is-menu-open .padi-mobile-toggle {
		border-color: rgba(255, 255, 255, 0.7);
	}
}

@media (max-width: 999px) {
	.padi-desktop-nav { display: none !important; }
	.padi-mobile-toggle-wrap { display: flex !important; }
}

@media (min-width: 1000px) {
	.padi-desktop-nav { display: flex !important; }
	.padi-mobile-toggle-wrap { display: none !important; }
	.padi-mobile-menu { display: none !important; }
}

.padi-services-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 14px;
	display: none;
}

.padi-services-wrap:hover .padi-services-dropdown {
	display: block;
}

.padi-hero-cta:hover {
	background: #443A32;
}

.padi-learn-more:hover {
	color: #2B2420;
}

/* Actual links (homepage services grid) — hover signals clickability. */
.padi-service-card {
	transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.padi-service-card:hover {
	background: #F4EEE3;
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(43, 36, 32, 0.1);
}

/* Static informational boxes (approach/how-it-works panels) — no hover
   effect, since these aren't links and shouldn't look clickable. */
.padi-info-card {
	/* intentionally no transition/transform/shadow */
}

/* The button's resting state is now #86672E (the old hover), so hover darkens
   to the brand brown instead. Both states clear AA against the cream label:
   4.96:1 resting, 14.41:1 on hover. */
.padi-submit-btn:hover {
	background: #2B2420;
}

.padi-faq-question {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 22px 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	font-family: inherit;
}

.padi-faq-answer {
	display: none;
	font-size: 15px;
	line-height: 1.7;
	color: #5C5248;
	margin: 0 0 24px;
	padding: 0 4px;
}

.padi-faq-item.is-open .padi-faq-answer {
	display: block;
}

.padi-faq-symbol::before {
	content: '+';
}

.padi-faq-item.is-open .padi-faq-symbol::before {
	content: '\2212';
}

.padi-hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Darkened so the white headline sitting on top stays legible over the
	   busier parts of these photos. Mobile gets more, since the text block
	   covers proportionally more of the image there. */
	filter: grayscale(1) contrast(1.05) brightness(0.62);
}

@media (max-width: 780px) {
	.padi-hero-photo {
		filter: grayscale(1) contrast(1.05) brightness(0.5);
	}
}

/* --- Active page indicators --- */
.padi-nav-link.is-active {
	color: #C9A868;
	border-bottom-color: #C9A868;
}

.padi-nav-services {
	border-bottom: 2px solid transparent;
	padding-bottom: 3px;
}

.padi-dropdown-link.is-active {
	color: #C9A868;
}

.padi-mobile-link {
	color: #EDE6D8;
}

.padi-mobile-link.is-active {
	color: #C9A868;
}

.padi-mobile-sublink {
	color: #C9C2B6;
}

.padi-mobile-sublink.is-active {
	color: #C9A868;
}

/* --- Mobile Services accordion ---
   Collapsed by default so the menu isn't cluttered; the caret mirrors the
   desktop dropdown's affordance. Opens automatically when you're already on
   one of the service pages, so the current page is never hidden. */
.padi-mobile-services {
	display: flex;
	flex-direction: column;
}

.padi-mobile-services-toggle {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.padi-mobile-services-arrow {
	font-size: 10px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.padi-mobile-services.is-open .padi-mobile-services-arrow {
	transform: rotate(180deg);
}

.padi-mobile-services-panel {
	display: none;
	flex-direction: column;
	gap: 14px;
	padding-left: 16px;
	padding-top: 16px;
}

.padi-mobile-services.is-open .padi-mobile-services-panel {
	display: flex;
}

/* ==========================================================================
   Mobile-only adjustments (max-width: 780px)
   All rules below use attribute-substring selectors matching the literal
   inline `style="font-size:Npx"` text, since every element on this site is
   styled inline rather than through shared classes. `!important` is the one
   case where an external stylesheet legitimately overrides inline styles —
   used here (not as a specificity workaround) so these rules automatically
   stop applying above 780px, without any JS reading/writing font sizes.
   ========================================================================== */
@media (max-width: 780px) {
	/* Body text, one step larger throughout (headings/stats/prices at 19px+
	   already scale via clamp() and are left alone). */
	[style*="font-size:12px"]   { font-size: 13px !important; }
	[style*="font-size:12.5px"] { font-size: 13.5px !important; }
	[style*="font-size:13px"]   { font-size: 14px !important; }
	[style*="font-size:13.5px"] { font-size: 14.5px !important; }
	[style*="font-size:14px"]   { font-size: 15px !important; }
	[style*="font-size:14.5px"] { font-size: 15.5px !important; }
	[style*="font-size:15px"]   { font-size: 16px !important; }
	[style*="font-size:15.5px"] { font-size: 16.5px !important; }
	[style*="font-size:16px"]   { font-size: 17px !important; }
	[style*="font-size:16.5px"] { font-size: 17.5px !important; }
	[style*="font-size:17px"]   { font-size: 18px !important; }
	[style*="font-size:18px"]   { font-size: 19px !important; }

	/* More breathing room between mobile menu items — they were reading as
	   cramped against each other. */
	.padi-mobile-menu {
		gap: 26px !important;
	}

	/* Hero spacing.
	   The header is 84px tall and each hero uses margin-top:-85px to sit
	   behind it, so the inner block's top padding is measured from *behind*
	   the header — the visible gap is (padding-top - 84px). The design's
	   clamp() minimum of 90px therefore left only ~6px of real clearance at
	   phone widths. 124px gives a consistent ~40px gap below the header on
	   every page, with a balanced 48px at the bottom. */
	.padi-hero-inner {
		padding-top: 124px !important;
		padding-bottom: 48px !important;
	}
}

/* Visually hidden but still announced by screen readers — used to keep the
   heading outline (h1 > h2 > h3...) intact for sections that don't have a
   visible heading of their own in the design. */
.padi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Focus ---------- */
/*
 * Site-wide gold focus ring. Without this the homepage and contact forms fell
 * back to the browser's default blue, which is both off-brand and inconsistent
 * with the intake form, where the ring was already gold.
 *
 * :focus-visible rather than :focus, so a mouse click on a button does not draw
 * a ring — browsers still show it for text fields whichever way they are
 * focused, which is the case that prompted this.
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #A6803D;
	outline-offset: 2px;
}

/* The gold ring reads as the whole signal, so the blue inner glow some browsers
   add on top of it is removed. */
input:focus,
select:focus,
textarea:focus {
	box-shadow: none;
}

/* Keeps the text cursor in the site's own ink rather than the browser default. */
input,
select,
textarea {
	caret-color: #2B2420;
}

/* ---------- Scrollbar gutter ---------- */
/*
 * Reserve the scrollbar's width whether or not the page needs one.
 *
 * Step 3 of the intake form is about 1,130px tall and step 2 about 1,840px, so on
 * a tall window one fits and the other does not — the scrollbar appears and
 * disappears as you move between them, shifting every centred column sideways by
 * half its width. Reserving the gutter keeps the page still.
 *
 * Unsupported in older Safari, which simply behaves as before — no regression.
 */
html {
	scrollbar-gutter: stable;
}

/*
 * Skip link. Off-screen until it receives keyboard focus, then pinned to the
 * top-left. Uses top/left rather than transform so it cannot be caught by an
 * ancestor's overflow or stacking context.
 */
.padi-skiplink {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 10000;
	padding: 12px 18px;
	background: #201A14;
	color: #FBF8F3;
	font-size: 15px;
	font-weight: 600;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
}

.padi-skiplink:focus,
.padi-skiplink:focus-visible {
	top: 0;
	color: #FBF8F3;
}