/**
 * Informational/legal pages — «Доставка и оплата», «Контакты»,
 * «Политика конфиденциальности», «Оферта».
 *
 * Template: template-info-page.php. Deliberately NOT a full page layout
 * on its own: the cover band is `.phc-page-cover`, styled in style.css
 * section 12 and always loaded, and the prose column + sticky table of
 * contents are already styled in assets/css/blog.css (`.phc-prose`,
 * `.phc-article-grid`, `.phc-toc`, `.phc-article-body`), enqueued
 * alongside this file for the template (see functions.php). This file
 * only adds what neither already covers: long-form legal text needs
 * (tables, nested lists) and the «Контакты» contact block. Contact
 * Form 7's own controls live in assets/css/forms.css.
 *
 * Every selector below is scoped under `.phc-info-page`/`.phc-info-prose`
 * or is a plain new class, on purpose — nothing here needs to out-rank
 * style.css's generic `.site-main a` / `h1,h2,h3,h4` rules, because this
 * template never uses `.site-main` and nothing new here sits on a dark
 * background (the one dark element, the cover band, brings its own
 * colours). Still checked directly: no heading or link introduced by this
 * file sits on `--phc-black`/`--phc-ink`.
 *
 * @package ProfHairClub_shop
 */

.phc-info-page {
	padding-bottom: 5rem;
}

/* -------------------------------------------------------------
   Legal prose extras: tables, nested lists.
   Top-level lists, blockquote, headings and links inside .phc-prose are
   already styled by blog.css — reused as-is via the shared class.
   ------------------------------------------------------------- */

/* Centrally wraps every <table> the editor pastes in (see
   template-info-page.php) so a wide pricing/comparison table scrolls
   instead of overflowing the 68ch column or forcing the whole page wider. */
.phc-table-scroll {
	overflow-x: auto;
	margin: 1.7rem 0;
}

.phc-info-prose table {
	width: 100%;
	min-width: 480px; /* below this a legal table's columns just collapse unreadably; scroll instead of squeezing */
	border-collapse: collapse;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
}

.phc-info-prose th,
.phc-info-prose td {
	padding: 0.65em 0.9em;
	border: 1px solid var(--phc-mist);
	text-align: left;
	vertical-align: top;
}

.phc-info-prose thead th {
	background: var(--phc-mist);
	font-weight: 700;
	color: var(--phc-ink);
}

/* Nested lists. blog.css only reaches the top-level `.phc-prose > ul/ol`
   (deliberately, per its own comment) — legal text is exactly the case
   that needs a second level: "1. …" then "а) …". Lower-alpha/roman on
   the inner levels reads as a legal document's own numbering rather than
   as a generic bullet list repeated three times. */
.phc-info-prose li > ul,
.phc-info-prose li > ol {
	margin: 0.5rem 0 0.5rem 0.2rem;
	padding-left: 1.3rem;
	font-size: 0.97em;
}

.phc-info-prose ol ol {
	list-style-type: lower-alpha;
}

.phc-info-prose ol ol ol {
	list-style-type: lower-roman;
}

.phc-info-prose li > ul,
.phc-info-prose li > ol {
	list-style-position: outside;
}

.phc-info-prose hr {
	border: none;
	border-top: 1px solid var(--phc-mist);
	margin: 2rem 0;
}

/* -------------------------------------------------------------
   «Контакты» extra block — see template-info-page.php for the
   has_shortcode() check that decides whether this prints at all.
   ------------------------------------------------------------- */
.phc-contact-block {
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--phc-mist);
}

/* One column by default, two from 720px — min-width like every other
   grid in this theme. It was written the other way round (a max-width
   override) which works but inverts the house convention, and mixing the
   two directions in one codebase is how a breakpoint ends up applying at
   both ends of the range. */
.phc-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.2rem, 3vw, 2rem);
	margin-top: 1.2rem;
	align-items: start;
}

/* `.phc-card` (style.css) already supplies background/radius/overflow —
   this only adds the internal spacing that's specific to this block. */
.phc-contact-card {
	padding: clamp(1.2rem, 3vw, 1.7rem);
}

.phc-contact-list {
	margin: 0;
}

.phc-contact-list__row {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--phc-mist);
}

.phc-contact-list__row:first-child {
	padding-top: 0;
}

.phc-contact-list__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.phc-contact-list__row dt {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--phc-stone);
	margin-bottom: 0.3rem;
}

.phc-contact-list__row dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--phc-ink);
}

/* Duplicated from assets/css/contacts.css (page-contacts.php-only, not
   loaded here) rather than pulled in whole — used by the
   [phc_pickup_info] shortcode's address row (inc/site-config.php). */
.phc-contacts__note {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--phc-stone);
}

.phc-contact-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

/* Placeholder for a future map embed — see the PHP comment on why this
   is static rather than a live iframe today. Sized to roughly match the
   contact card's height so the two-column row looks intentional even
   with no real content in either box yet. */
.phc-contact-map {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	border: 1px dashed var(--phc-mist);
	border-radius: var(--phc-radius-m);
	background: var(--phc-paper);
	text-align: center;
	padding: 1.5rem;
}

.phc-contact-map p {
	margin: 0;
	max-width: 26ch;
	font-size: 0.85rem;
	color: var(--phc-stone);
}

@media (min-width: 720px) {
	.phc-contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.phc-contact-map {
		min-height: 220px;
	}
}