/*
Theme Name: Papan's Landing
Author: Whiz Kid PC Services
Description: Custom theme for Papan's Landing Senior Center, matched to the original Wix design.
Version: 1.6
Requires at least: 6.0
Text Domain: papans
*/

:root {
	--pl-steel: #4682b4;
	--pl-sky: #3d9be9;
	--pl-navy: #324158;
	--pl-slate: #373b4d;
	--pl-brick: #8e504b;
	--pl-light: #a6d5f2;
	--pl-pill: #e5ebfa;
	--pl-active: #7cceBE;
	--pl-gray: #8a8a8a;
	--pl-wide: 980px;
	--pl-display: "Fahkwang", "Helvetica Neue", Arial, sans-serif;
	--pl-heavy: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--pl-nav: "Raleway", "Helvetica Neue", Arial, sans-serif;
	--pl-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html, body { margin: 0; padding: 0; }

body {
	background: var(--pl-steel);
	color: #fff;
	font-family: var(--pl-body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: #fff; text-decoration: underline; }
a:hover { opacity: .85; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Header ---------- */
.pl-header {
	background: var(--pl-steel) linear-gradient(to bottom, rgba(255,255,255,.32), rgba(255,255,255,.05));
	text-align: center;
	padding: 6px 16px 14px;
}
.pl-site-title {
	font-family: var(--pl-display);
	font-weight: 400;
	font-size: 60px;
	line-height: 1.2;
	margin: 0;
}
.pl-site-title a { text-decoration: none; color: #fff; }
.pl-nav ul {
	list-style: none; margin: 2px 0 0; padding: 0;
	display: flex; justify-content: center; flex-wrap: wrap; gap: 0 34px;
}
.pl-nav a {
	font-family: var(--pl-nav);
	font-size: 27px;
	color: #fff; text-decoration: none; line-height: 1.6;
}
.pl-nav .current a, .pl-nav a[aria-current="page"] { color: var(--pl-active); }

/* ---------- Layout helpers ---------- */
.pl-band { width: 100%; padding: 40px 16px; }
.pl-band > .pl-inner, .pl-inner { max-width: var(--pl-wide); margin: 0 auto; }
.pl-inner-wide { max-width: 1500px; margin: 0 auto; }

.pl-steel { background: var(--pl-steel); }
.pl-sky { background: var(--pl-sky); }
.pl-navy { background: var(--pl-navy); }
.pl-slate { background: var(--pl-slate); }
.pl-black { background: #000; }
.pl-brick { background: var(--pl-brick); }
.pl-light { background: var(--pl-light); }

.pl-display {
	font-family: var(--pl-heavy);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	text-align: center;
	font-size: 65px;
	line-height: 1.25;
	margin: 0 0 18px;
	color: #fff;
}

.pl-center { text-align: center; }

/* ---------- Home ---------- */
.pl-hero { position: relative; max-width: var(--pl-wide); margin: 0 auto; }
.pl-hero figure { margin: 0; }
.pl-hero img { width: 100%; aspect-ratio: 980 / 513; object-fit: cover; display: block; }
.pl-hero-title {
	position: absolute; left: 0; right: 0; bottom: 4%;
	margin: 0; text-align: center;
	font-family: var(--pl-display); font-weight: 400;
	font-size: 67px; line-height: 1.2;
	color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.pl-intro { max-width: var(--pl-wide); margin: 0 auto; padding: 4px 16px 30px; }
.pl-intro p { font-size: 20px; line-height: 1.67; margin: 0 0 28px; }
.pl-intro p.pl-small { font-size: 17px; line-height: 1.96; margin-bottom: 0; }

.pl-notice {
	background: #000; max-width: var(--pl-wide); margin: 0 auto;
	padding: 14px 8px 18px; text-align: center; font-size: 13px; line-height: 1.75;
}
.pl-notice p { margin: 0; }
.pl-notice ul { margin: 14px 0 0; padding: 0 0 0 0; list-style-position: inside; }
.pl-notice li { margin: 0 0 14px; }
.pl-notice li:last-child { margin-bottom: 0; }

.pl-events { min-height: 420px; padding-top: 44px; }
.pl-events h2 {
	font-family: var(--pl-display); font-weight: 700; letter-spacing: .06em;
	font-size: 56px; line-height: normal; text-align: center; margin: 0 0 24px;
}

/* Contact */
.pl-contact { padding: 30px 16px 60px; }
.pl-contact-grid {
	max-width: 1130px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px 140px; align-items: start;
}
.pl-contact h2 {
	font-family: var(--pl-heavy); font-weight: 800; letter-spacing: .2em;
	text-transform: uppercase; font-size: 50px; line-height: 1.35;
	text-align: center; margin: 0 0 36px;
}
.pl-contact-info { text-align: center; font-size: 25px; line-height: 1.88; }
.pl-contact-info p { margin: 0 0 30px; }
.pl-map { margin-top: 40px; }
.pl-map iframe { width: 100%; height: 241px; border: 0; display: block; }

.pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pl-form .pl-full { grid-column: 1 / -1; }
.pl-form label { display: block; font-size: 30px; line-height: 1; padding: 0 4px; }
.pl-form input, .pl-form textarea {
	width: 100%; background: transparent; color: #fff;
	border: 0; border-bottom: 1px solid rgba(255,255,255,.75);
	font: 16px var(--pl-body); padding: 8px 4px 12px; outline: none;
}
.pl-form input::placeholder, .pl-form textarea::placeholder { color: rgba(255,255,255,.85); }
.pl-form textarea { min-height: 96px; resize: vertical; }
.pl-form button {
	grid-column: 1 / -1; margin-top: 14px;
	background: #fff; color: #000; border: 0; padding: 11px; font: 18px var(--pl-body); cursor: pointer;
}
.pl-form .pl-hp { position: absolute; left: -9999px; }
.pl-form-msg { grid-column: 1 / -1; padding: 10px; background: rgba(255,255,255,.12); margin-bottom: 8px; }

/* ---------- About ---------- */
.pl-about-top { padding: 36px 16px 44px; }
.pl-about-top p { max-width: 960px; margin: 0 auto 30px; text-align: center; font-size: 20px; line-height: 1.67; }
.pl-about-top p:last-child { margin-bottom: 0; }
.pl-divider { height: 11px; background: #fafafa; }
.pl-team { padding: 40px 16px 60px; }
.pl-team .pl-team-photo { max-width: 918px; margin: 0 auto; }
.pl-team .pl-team-photo img { width: 100%; aspect-ratio: 918 / 534; object-fit: cover; object-position: 50% 38%; display: block; }
.pl-team-names {
	background: var(--pl-navy); max-width: 1405px; margin: 16px auto 0;
	display: grid; grid-template-columns: repeat(4, 160px); justify-content: center; gap: 0 60px;
	padding: 10px 16px 14px;
}
.pl-team-names h3 {
	font-family: var(--pl-display); font-weight: 600; font-size: 22px; line-height: 1.41;
	text-align: center; margin: 0;
}
.pl-team-names h3:nth-child(2), .pl-team-names h3:nth-child(4) { margin-top: 68px; }

/* Classic themes wrap group content; let grid/flex layouts see the real children. */
[class*="pl-"] > .wp-block-group__inner-container { display: contents; }

/* ---------- Services ---------- */
.pl-services-top { padding: 44px 16px 0; }
.pl-services-top .pl-display { margin-bottom: 60px; }
.pl-services-grid {
	max-width: 1300px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; justify-items: center;
}
.pl-services-grid figure { margin: 0; width: 254px; }
.pl-services-grid img { width: 254px; height: 254px; object-fit: cover; display: block; }
.pl-services-text { padding: 46px 16px 70px; }
.pl-services-text .pl-col { width: 260px; text-align: center; font-family: var(--pl-display); font-size: 22px; line-height: 1.41; }
.pl-services-text h2 { font-family: var(--pl-display); font-weight: 700; font-size: 22px; margin: 0 0 28px; line-height: 1.41; }
.pl-services-text p { margin: 0 0 28px; }
.pl-btn-white {
	display: inline-block; background: #fff; color: #000 !important; text-decoration: none !important;
	font: 15px var(--pl-body); padding: 10px 18px; margin-top: 12px;
}

/* ---------- Support ---------- */
.pl-support-top { padding: 34px 16px; }
.pl-support-top figure { margin: 0 auto; width: 261px; }
.pl-support-top img { width: 100%; display: block; }
.pl-support-band { padding: 26px 16px 70px; }
.pl-support-grid { display: flex; justify-content: center; gap: 130px; flex-wrap: wrap; }
.pl-support-grid > div { text-align: center; }
.pl-support-grid h2 {
	font-family: var(--pl-display); font-style: italic; font-weight: 700;
	font-size: 40px; line-height: 1.35; color: #1d5eb8; margin: 0 0 6px;
}
.pl-pill {
	display: inline-block; background: var(--pl-pill); color: #1d4a8c !important;
	text-decoration: none !important; border-radius: 60px; padding: 4px 26px;
	font-family: Georgia, "Times New Roman", serif; letter-spacing: .06em; font-size: 30px; line-height: 1.2;
}

/* ---------- Footer ---------- */
.pl-footer {
	background: #9a9a9a linear-gradient(to bottom, #a6a6a6, #7d7d7d);
	text-align: center; padding: 34px 16px 30px; font-size: 15px;
}
.pl-footer .pl-org { font-family: var(--pl-display); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0 0 16px; }
.pl-footer .pl-org span { display: block; }
.pl-footer a { text-decoration: none; }
.pl-footer .pl-fb { display: inline-block; margin: 18px 0 14px; }
.pl-footer .pl-fb svg { width: 20px; height: 20px; display: block; }
.pl-footer .pl-copy { margin: 0; font-family: var(--pl-nav); font-size: 13px; }

/* ---------- Preview gate ---------- */
.pl-gate { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.pl-gate form { background: var(--pl-navy); padding: 30px; max-width: 360px; width: 100%; text-align: center; }
.pl-gate input { width: 100%; padding: 10px; font-size: 16px; margin: 12px 0; }
.pl-gate button { padding: 10px 24px; font-size: 16px; cursor: pointer; }

/* ---------- Narrow windows: Wix keeps a fixed 980px layout, so only scale below that ---------- */
@media (max-width: 1000px) {
	.pl-site-title { font-size: clamp(30px, 6vw, 60px); }
	.pl-nav a { font-size: clamp(17px, 2.7vw, 27px); }
	.pl-display { font-size: clamp(32px, 6.5vw, 65px); }
	.pl-hero-title { font-size: clamp(24px, 6.8vw, 67px); }
	.pl-events h2 { font-size: clamp(30px, 5.6vw, 56px); }
	.pl-contact h2 { font-size: clamp(30px, 5vw, 50px); }
	.pl-support-grid h2 { font-size: clamp(26px, 4vw, 40px); }
}

/* ---------- Desktop geometry measured from the Wix site (1556px window) ---------- */
@media (min-width: 1001px) {
	/* Header: 148px tall like Wix */
	.pl-header { height: 148px; padding: 0 16px; }
	.pl-site-title { line-height: 78px; position: relative; top: -2px; }
	.pl-nav ul { margin-top: 3px; gap: 0; padding-left: 32px; }
	.pl-nav li:nth-child(1) { margin-right: 62px; }
	.pl-nav li:nth-child(2) { margin-right: 21px; }
	.pl-nav li:nth-child(3) { margin-right: 9px; }
	.pl-nav a { display: inline-block; line-height: 43px; padding: 0 10px; }
	.pl-display { line-height: 96px; }

	/* Home */
	.pl-hero-title { bottom: 36px; line-height: 88px; }
	.pl-intro { max-width: 980px; padding: 5px 0 6px; }
	.pl-intro p { margin-bottom: 35px; }
	.pl-intro p.pl-small { margin-bottom: 0; }
	.pl-band.pl-sky { padding-top: 36px; padding-bottom: 36px; }
	.pl-notice { padding: 15px 8px 15px; }
	.pl-notice ul { margin-top: 26px; }
	.pl-notice li { margin-bottom: 23px; }
	.pl-events { padding-top: 51px; }
	.pl-events h2 { line-height: 72px; }
	.pl-contact { padding: 85px 16px 69px; }
	.pl-contact-grid { max-width: 1188px; grid-template-columns: 551px 460px; justify-content: space-between; gap: 0; }
	.pl-contact h2 { line-height: 75px; margin-bottom: 69px; }
	.pl-contact-info p { line-height: 29px; margin-bottom: 37px; }
	.pl-map { margin-top: 141px; }
	.pl-map iframe { height: 280px; }
	.pl-form { padding-top: 22px; row-gap: 21px; }
	.pl-form textarea { min-height: 98px; }

	/* Footer: 282px tall like Wix */
	.pl-footer { padding: 39px 16px 30px; }
	.pl-footer .pl-org { line-height: 29.5px; margin-bottom: 26px; }
	.pl-footer > a:not(.pl-fb) { line-height: 17px; }
	.pl-footer .pl-fb { margin: 30px 0 29px; }
	.pl-footer .pl-copy { line-height: 16px; }

	/* About */
	.pl-about-top { padding: 29px 16px 58px; }
	.pl-about-top .pl-display { margin-bottom: 31px; }
	.pl-about-top p { margin-bottom: 35px; }
	.pl-team { padding: 57px 16px 69px; }
	.pl-team .pl-display { margin-bottom: 11px; }
	.pl-team-names {
		display: block; position: relative; height: 193px; max-width: 1396px;
		margin-top: 18px; padding: 0;
	}
	.pl-team-names h3 {
		position: absolute; left: 50%; transform: translateX(-50%);
		font-weight: 700; line-height: 30px; margin: 0 !important; white-space: nowrap; width: auto !important;
	}
	.pl-team-names h3:nth-of-type(1) { top: 1px;   width: 170px; margin-left: -274px !important; }
	.pl-team-names h3:nth-of-type(2) { top: 94px;  width: 178px; margin-left: -82px !important; }
	.pl-team-names h3:nth-of-type(3) { top: 16px;  width: 221px; margin-left: 82px !important; }
	.pl-team-names h3:nth-of-type(4) { top: 109px; width: 162px; margin-left: 209px !important; }

	/* Services */
	.pl-services-top { padding: 78px 16px 5px; }
	.pl-services-top .pl-display { margin-bottom: 85px; }
	.pl-services-grid { max-width: none; grid-template-columns: repeat(3, 311px); column-gap: 203px; justify-content: center; }
	.pl-services-grid figure { width: 311px; }
	.pl-services-grid img { width: 311px; height: 312px; }
	.pl-services-text { min-height: 759px; padding: 44px 16px 35px; }
	.pl-services-text .pl-col { width: 300px; position: relative; height: 100%; min-height: 680px; }
	.pl-services-text h2 { line-height: 31px; margin-bottom: 31px; }
	.pl-services-text p { line-height: 31px; margin-bottom: 31px; }
	.pl-services-text .pl-col:nth-child(2) p { line-height: 38.5px; margin-bottom: 0; }
	.pl-services-text .pl-col:nth-child(2) a { overflow-wrap: anywhere; text-decoration: none; }
	.pl-services-text .pl-btn-white { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
	.pl-services-text .pl-col:nth-child(1) .pl-btn-white { top: 538px; }
	.pl-services-text .pl-col:nth-child(3) .pl-btn-white { top: 632px; }

	/* Support */
	.pl-support-top { padding: 45px 16px 29px; }
	.pl-support-top figure { width: 319px; transform: translateX(12px); }
	.pl-support-top img { height: 396px; object-fit: cover; }
	.pl-support-band { padding: 30px 16px 81px; }
	.pl-support-grid { gap: 168px; }
	.pl-support-grid h2 { line-height: 52px; margin-bottom: 17px; }
	.pl-pill { line-height: 40px; padding: 3px 32px; }
}
@media (min-width: 1340px) {
	.pl-contact-grid { margin-left: calc(50% - 634px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
	.pl-contact-grid { grid-template-columns: 1fr; gap: 30px; }
	.pl-form { grid-template-columns: 1fr; }
	.pl-services-grid { grid-template-columns: 1fr; gap: 24px; }
	.pl-services-text .pl-services-grid { gap: 40px; }
	.pl-team-names { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
	.pl-team-names h3:nth-child(2), .pl-team-names h3:nth-child(4) { margin-top: 0; }
	.pl-support-grid { flex-direction: column; gap: 24px; }
	.pl-intro p { font-size: 18px; }
	.pl-pill { font-size: 22px; }
	.pl-contact-info { font-size: 20px; }
	.pl-form label { font-size: 24px; }
	.pl-team-names h3, .pl-services-text .pl-col, .pl-services-text h2 { font-size: 19px; }
	.pl-hero-title { font-size: 6.2vw; padding: 0 8px; }
	.pl-services-text a, .pl-intro a { overflow-wrap: anywhere; }
}