/* ==========================================================================
   Cities: /cities/ and /cities/<city>/
   Same brand system as the Products pages: chilli red, marigold, earth-brown
   ink, Rozha One + Hind, and the stitched rice-sack seam as the one motif.
   Background is left to the theme.
   ========================================================================== */

.pc-page {
	--pa-ink: #2b1d12;
	--pa-muted: #6b5a4b;
	--pa-red: #b8231b;
	--pa-red-dark: #93190f;
	--pa-marigold: #f2b312;
	--pa-paper: #fffdf7;
	--pa-hem: #f4ead3;
	--pa-line: #e6d9bd;
	--pa-display: "Rozha One", "Young Serif", Georgia, serif;
	--pa-sans: "Hind", "Segoe UI", Roboto, system-ui, sans-serif;

	background: transparent;
	color: var(--pa-ink);
	font-family: var(--pa-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	padding-bottom: clamp(3rem, 7vw, 6rem);
}
.pc-page *, .pc-page *::before, .pc-page *::after { box-sizing: border-box; }
.pc-page img { max-width: 100%; height: auto; }
.pc-page :focus-visible { outline: 3px solid var(--pa-red); outline-offset: 3px; }

.pc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

.pc-page .pc-muted { color: var(--pa-muted); margin: 0 0 1rem; }

/* ---------- Breadcrumb ---------- */
.pc-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 1.5rem 0 1rem; font-size: .9rem; color: var(--pa-muted); }
.pc-crumbs li + li::before { content: "/"; margin-right: .25rem; opacity: .5; }
.pc-page .pc-crumbs a { color: inherit; text-decoration: none; }
.pc-page .pc-crumbs a:hover { color: var(--pa-red); text-decoration: underline; }
.pc-crumbs [aria-current] { color: var(--pa-ink); }

/* ---------- Hero ---------- */
.pc-page .pc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: end;
	padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--pa-line);
}
.pc-page .pc-hero__title {
	font-family: var(--pa-display); font-weight: 400;
	font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem);
	line-height: 1; letter-spacing: -0.015em;
	color: var(--pa-ink); margin: 0;
	text-wrap: balance;
}
.pc-page .pc-hero__place { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 0; color: var(--pa-muted); font-weight: 500; }
.pc-page .pc-hero__place svg { color: var(--pa-red); }
.pc-page .pc-hero__intro { font-size: 1.125rem; line-height: 1.6; color: var(--pa-muted); max-width: 46ch; margin: 0; }
.pc-page .pc-hero__intro p { margin: 0 0 .8em; }
.pc-page .pc-hero__intro > :last-child { margin-bottom: 0; }

.pc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Buttons ---------- */
.pc-page .pc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 50px; padding: .6rem 1.4rem;
	border-radius: 6px; border: 0;
	font: 700 1rem/1.2 var(--pa-sans);
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.pc-page .pc-btn--wa { background: var(--pa-red); color: #fff; }
.pc-page .pc-btn--wa:hover { background: var(--pa-red-dark); color: #fff; }
.pc-page .pc-btn--line { background: transparent; color: var(--pa-ink); box-shadow: inset 0 0 0 1.5px var(--pa-ink); }
.pc-page .pc-btn--line:hover { background: var(--pa-ink); color: #fffdf7; }

/* ---------- Sections ---------- */
.pc-page .pc-section { margin-top: clamp(3rem, 7vw, 5rem); }
.pc-page .pc-h2 {
	font-family: var(--pa-display); font-weight: 400;
	font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem);
	line-height: 1.1; color: var(--pa-ink);
	margin: 0 0 1.25rem;
}

/* ---------- Order form + dealers ---------- */
.pc-page .pc-order { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pc-page .pc-order--single { grid-template-columns: minmax(0, 720px); }

/* The form sits on a sack panel: folded hem with red stitching. */
.pc-page .pc-form {
	position: relative;
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1rem;
	padding: calc(26px + 1.5rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
	background: var(--pa-paper);
	border: 1px solid var(--pa-line);
	border-radius: 3px 3px 14px 14px;
}
.pc-page .pc-form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--pa-hem); border-bottom: 1px solid var(--pa-line); border-radius: 3px 3px 0 0; }
.pc-page .pc-form::after { content: ""; position: absolute; left: 10px; right: 10px; top: 12px; border-top: 2px dashed var(--pa-red); opacity: .85; }

.pc-form__row { grid-column: 1 / -1; display: grid; gap: .3rem; }
.pc-form__row--half { grid-column: auto; }
.pc-page .pc-form label { font-weight: 600; font-size: .95rem; }
.pc-page .pc-form input,
.pc-page .pc-form select,
.pc-page .pc-form textarea {
	width: 100%; min-height: 48px;
	padding: .6rem .8rem;
	font: 400 1rem/1.4 var(--pa-sans); color: var(--pa-ink);
	background: #fff;
	border: 1px solid #cdbf9f; border-radius: 6px;
}
.pc-page .pc-form textarea { min-height: 0; resize: vertical; }
.pc-page .pc-form input:focus, .pc-page .pc-form select:focus, .pc-page .pc-form textarea:focus { outline: 2px solid var(--pa-red); outline-offset: 0; border-color: var(--pa-red); }
.pc-page .pc-form [aria-invalid="true"] { border-color: var(--pa-red); background: #fff5f3; }
.pc-page .pc-form__error { grid-column: 1 / -1; margin: 0; color: var(--pa-red); font-weight: 600; }
.pc-page .pc-form__send { grid-column: 1 / -1; width: 100%; margin-top: .25rem; }

.pc-page .pc-dealers ul { list-style: none; margin: 0; padding: 0; }
.pc-page .pc-dealer { padding: 1.1rem 0; border-bottom: 1px dashed #cdbf9f; }
.pc-page .pc-dealer:first-child { padding-top: 0; }
.pc-page .pc-dealer h3 { font-family: var(--pa-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .25rem; color: var(--pa-ink); }
.pc-page .pc-dealer p { margin: 0; color: var(--pa-muted); }
.pc-page .pc-dealer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .45rem !important; }
.pc-page .pc-dealer__links a { color: var(--pa-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Delivery areas + map ---------- */
.pc-page .pc-areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pc-page .pc-areas--single { grid-template-columns: 1fr; }
.pc-page .pc-areas__list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-page .pc-areas__list li { padding: .3rem .9rem; border: 1px solid var(--pa-line); border-radius: 999px; background: var(--pa-paper); font-weight: 500; }
.pc-page .pc-map { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--pa-line); background: var(--pa-hem); }
.pc-page .pc-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Long text ---------- */
.pc-page .pc-prose { max-width: 68ch; }
.pc-page .pc-prose > :first-child { margin-top: 0; }
.pc-page .pc-prose p, .pc-page .pc-prose ul, .pc-page .pc-prose ol { margin: 0 0 1.1em; }
.pc-page .pc-prose h2, .pc-page .pc-prose h3 { font-family: var(--pa-display); font-weight: 400; color: var(--pa-ink); line-height: 1.15; }
.pc-page .pc-prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin: 1.6em 0 .5em; }
.pc-page .pc-prose h3 { font-size: 1.35rem; margin: 1.4em 0 .4em; }
.pc-page .pc-prose a { color: var(--pa-red); }

/* ---------- FAQs ---------- */
.pc-page .pc-faqs { max-width: 820px; }
.pc-page .pc-faq { border-bottom: 1px solid var(--pa-line); }
.pc-page .pc-faq summary {
	display: flex; justify-content: space-between; gap: 1rem; align-items: center;
	padding: 1.1rem 0; cursor: pointer; list-style: none;
	font-weight: 600; font-size: 1.1rem;
}
.pc-page .pc-faq summary::-webkit-details-marker { display: none; }
.pc-page .pc-faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--pa-sans); font-weight: 500; font-size: 1.9rem; line-height: 1; color: var(--pa-red); transition: transform .2s ease; }
.pc-page .pc-faq[open] summary::after { transform: rotate(45deg); }
.pc-page .pc-faq .pc-prose { padding: 0 0 1.1rem; color: var(--pa-muted); }

/* ---------- Other cities ---------- */
.pc-page .pc-others ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-page .pc-others a { display: inline-block; padding: .4rem 1rem; border: 1px solid var(--pa-line); border-radius: 999px; background: var(--pa-paper); color: var(--pa-ink); text-decoration: none; font-weight: 500; }
.pc-page .pc-others a:hover { border-color: var(--pa-red); color: var(--pa-red); }
.pc-page .pc-others .pc-others__all { background: var(--pa-ink); border-color: var(--pa-ink); color: #fffdf7; }
.pc-page .pc-others .pc-others__all:hover { background: var(--pa-red); border-color: var(--pa-red); color: #fff; }

/* ---------- /cities/ directory ---------- */
.pc-page .pc-find { margin-top: 1.5rem; display: grid; gap: .35rem; max-width: 420px; }
.pc-page .pc-find label { font-weight: 600; }
.pc-page .pc-find input {
	width: 100%; min-height: 50px; padding: .6rem 1rem;
	font: 400 1.05rem/1.4 var(--pa-sans); color: var(--pa-ink);
	background: #fff; border: 1.5px solid var(--pa-ink); border-radius: 6px;
}
.pc-page .pc-find input:focus { outline: 3px solid var(--pa-red); outline-offset: 2px; }

.pc-page .pc-states { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.pc-page .pc-state { position: relative; padding-top: 1.75rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.pc-page .pc-state::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed var(--pa-red); opacity: .8; }
.pc-page .pc-state:first-child { margin-top: 0; }
.pc-page .pc-state__name {
	display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
	font-family: var(--pa-display); font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1;
	color: var(--pa-ink); margin: 0 0 1rem;
}
.pc-page .pc-state__name span { font-family: var(--pa-sans); font-size: .95rem; color: var(--pa-muted); }
.pc-page .pc-state__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .25rem 2rem; }
.pc-page .pc-state__list a {
	display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
	padding: .65rem 0; border-bottom: 1px solid var(--pa-line);
	color: var(--pa-ink); text-decoration: none;
}
.pc-page .pc-city__name { font-size: 1.15rem; font-weight: 600; }
.pc-page .pc-city__meta { font-size: .85rem; color: var(--pa-muted); white-space: nowrap; }
.pc-page .pc-state__list a:hover .pc-city__name { color: var(--pa-red); text-decoration: underline; text-underline-offset: 4px; }
.pc-page .pc-find__none { margin-top: 1.5rem; color: var(--pa-muted); font-size: 1.1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pc-page .pc-hero, .pc-page .pc-order, .pc-page .pc-areas { grid-template-columns: 1fr; }
	.pc-page .pc-hero { align-items: start; }
}
@media (max-width: 520px) {
	.pc-page .pc-form { grid-template-columns: 1fr; }
	.pc-form__row--half { grid-column: 1 / -1; }
	.pc-actions .pc-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.pc-page .pc-faq summary::after, .pc-page .pc-btn { transition: none; }
}

/* ---------- Guard against theme styles ---------- */
/* Themes often set their own font on lists and form controls, and colour every <button>. */
.pc-page ul, .pc-page ol, .pc-page li, .pc-page p, .pc-page label,
.pc-page input, .pc-page select, .pc-page textarea, .pc-page button, .pc-page summary { font-family: var(--pa-sans); }
.pc-page button.pc-btn--wa,
.pc-page button.pc-btn--wa:not(:hover):not(:active) { background: var(--pa-red) !important; color: #fff !important; border: 0 !important; text-decoration: none; }
.pc-page button.pc-btn--wa:hover,
.pc-page button.pc-btn--wa:focus-visible { background: var(--pa-red-dark) !important; color: #fff !important; }
.pc-page.pc-dir .pc-hero { border-bottom: 0; padding-bottom: clamp(1.5rem, 3vw, 2rem); }