/**
 * pages.css — Agora reskin of the static content pages.
 *
 * Loaded only on the legal/info pages and the contacts page (see
 * includes/enqueue.php + includes/pages.php). Everything is scoped under the
 * `.gp-legal` or `.gp-contacts` body classes so it never touches WoodMart-built
 * content on other routes. Tokens come from core.css.
 *
 * These pages are built with WoodMart's Elementor widgets (wd_title,
 * text-editor, wd_infobox, wd_menu_price, wd_list, wd_social_buttons, CF7,
 * google_maps). WoodMart injects each widget's own part-CSS inline in the body,
 * *after* this file loads — so every rule here carries the extra body-class in
 * its selector, which lifts specificity above WoodMart's part rules regardless
 * of source order.
 *
 * @package woodmart-child
 */

/* ============================================================ *
 * Shared — reading layout reflow
 * ============================================================ *
 * The legal pages inherit WoodMart's right sidebar (recent blog posts), which
 * is noise on a terms/policy page. Drop it and let the content span the row;
 * the payment + contacts pages are already full-width, so this is a no-op there.
 */
.gp-page .wd-sidebar { display: none; }
/* WoodMart also prints a floating burger that opens the sidebar as an off-canvas
   drawer on mobile — hide it too, or it dangles over the reflowed content. */
.gp-page .wd-sidebar-opener { display: none; }
.gp-page main.wd-content-layout { display: block; }
.gp-page .wd-content-area { width: 100%; max-width: 100%; flex: none; }

/* ============================================================ *
 * Legal / info pages (.gp-legal)
 * ============================================================ */

/* Constrain the Elementor content to a centred reading measure. Everything the
   client authored (titles, prose, delivery cards) lives inside `.elementor`. */
.gp-legal .elementor {
	max-width: 900px;
	margin-inline: auto;
	padding: 8px 0 24px;
}

/* ── Section titles (wd_title) → Playfair, ink, left ─────────── */
.gp-legal .title-wrapper,
.gp-legal .title-wrapper.text-center { text-align: left; }
.gp-legal .title-wrapper .liner-continer { display: block; }
.gp-legal .woodmart-title-container.title {
	font-family: var(--gp-serif);
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--gp-ink);
	text-transform: none;
	margin: 1.4em 0 .5em;
}

/* ── Body prose (text-editor) → DM Sans reading column ───────── */
.gp-legal .elementor-widget-text-editor {
	font-family: var(--gp-sans);
	font-size: 16px;
	line-height: 1.75;
	color: var(--gp-text);
	text-align: left;
}
.gp-legal .elementor-widget-text-editor p { margin: 0 0 1.15em; }
.gp-legal .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.gp-legal .elementor-widget-text-editor a {
	color: var(--gp-sea);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gp-legal .elementor-widget-text-editor a:hover { color: var(--gp-sea-deep); }
.gp-legal .elementor-widget-text-editor strong,
.gp-legal .elementor-widget-text-editor b { color: var(--gp-ink); font-weight: 600; }
.gp-legal .elementor-widget-text-editor ul,
.gp-legal .elementor-widget-text-editor ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.gp-legal .elementor-widget-text-editor li { margin-bottom: .5em; }

/* ── Intro callout (the one wd_infobox that opens offer/terms/privacy) ── */
.gp-legal .wd-info-box {
	background: var(--gp-paper-warm);
	border: 1px solid var(--gp-line);
	border-radius: 16px;
	padding: 28px 32px;
	text-align: center;
}
/* Some callouts carry the *old* green logo as their icon — redundant next to
   the new header logo, and off-palette. Drop it for a clean text-only lead. */
.gp-legal .wd-info-box .box-icon-wrapper { display: none; }
.gp-legal .wd-info-box .info-box-title.title {
	font-family: var(--gp-serif);
	font-weight: 500;
	color: var(--gp-ink);
	line-height: 1.25;
	margin: 0 0 12px;
}
.gp-legal .wd-info-box .info-box-inner {
	font-family: var(--gp-sans);
	font-size: 16px;
	line-height: 1.7;
	color: var(--gp-text-soft);
}
.gp-legal .wd-info-box .info-box-inner a { color: var(--gp-sea); text-decoration: none; }
.gp-legal .wd-info-box .info-box-inner a:hover { color: var(--gp-sea-deep); text-decoration: underline; }

/* ── Delivery methods (wd_menu_price, payment page) ─────────── */
.gp-legal .menu-price-title.wd-entities-title,
.gp-legal .menu-price-title.wd-entities-title span {
	font-family: var(--gp-serif);
	font-weight: 500;
	font-size: 22px;
	color: var(--gp-ink);
	text-transform: none;
	letter-spacing: 0;
}
/* Override WoodMart's green `.amount` on the price element itself (0,3,0 beats
   its part rule + any WooCommerce .amount colour). */
.gp-legal .menu-price-price.amount {
	font-family: var(--gp-sans);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .01em;
	color: var(--gp-sea);
}
.gp-legal .menu-price-details {
	font-family: var(--gp-sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--gp-text-soft);
}

/* ── Icon checklists (wd_list) → sea ticks, DM Sans text ─────── */
.gp-legal .wd-list.wd-type-icon .wd-icon,
.gp-legal .wd-list .wd-icon > span { color: var(--gp-sea); }
.gp-legal .wd-list .wd-list-content,
.gp-legal .wd-list .list-content {
	font-family: var(--gp-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--gp-text);
}

/* ============================================================ *
 * Contacts page (.gp-contacts)
 * ============================================================ */

/* ── Contact info cards (wd_infobox × 4) → Agora surface cards ── */
.gp-contacts .wd-info-box {
	background: var(--gp-surface);
	border: 1px solid var(--gp-border);
	border-radius: 16px;
	padding: 26px 28px;
	box-shadow: none;
	transition: border-color .2s var(--gp-ease), transform .2s var(--gp-ease);
	height: 100%;
}
.gp-contacts .wd-info-box:hover { border-color: var(--gp-sea); transform: translateY(-2px); }
/* Icon: recolour WoodMart's green glyph to Agora sea. The icons are external
   SVG *files* loaded as <img>, so `color`/`fill` can't reach them — a filter
   chain re-tints the rendered pixels to ≈ var(--gp-sea) #0052a0 instead. Also
   cover the currentColor / font-icon cases in case a card uses those. */
.gp-contacts .wd-info-box .box-icon-wrapper { color: var(--gp-sea); }
.gp-contacts .wd-info-box .box-icon-wrapper .info-box-icon img {
	filter: brightness(0) saturate(100%) invert(21%) sepia(83%) saturate(2470%) hue-rotate(198deg) brightness(93%) contrast(101%);
}
.gp-contacts .wd-info-box .box-icon-wrapper svg,
.gp-contacts .wd-info-box .box-icon-wrapper svg * { fill: currentColor; color: var(--gp-sea); }
.gp-contacts .wd-info-box .box-icon-wrapper i { color: var(--gp-sea); }
.gp-contacts .wd-info-box .info-box-title.title {
	font-family: var(--gp-serif);
	font-weight: 500;
	font-size: 19px;
	color: var(--gp-ink);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 6px;
}
.gp-contacts .wd-info-box .info-box-inner {
	font-family: var(--gp-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--gp-text-soft);
}
.gp-contacts .wd-info-box .info-box-inner a { color: var(--gp-text-soft); }
.gp-contacts .wd-info-box .info-box-inner a:hover { color: var(--gp-sea); }

/* ── Social buttons → Agora circular outline ────────────────── */
.gp-contacts .wd-social-icon {
	background: transparent;
	color: var(--gp-ink);
	border: 1px solid var(--gp-line);
	border-radius: 999px;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .18s var(--gp-ease);
}
.gp-contacts .wd-social-icon:hover {
	background: var(--gp-ink);
	color: #fff;
	border-color: var(--gp-ink);
}

/* ── "Get in touch" heading (wd_title) → Playfair, ink, left ── */
.gp-contacts .title-wrapper,
.gp-contacts .title-wrapper.text-center { text-align: left; }
.gp-contacts .woodmart-title-container.title {
	font-family: var(--gp-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--gp-ink);
	text-transform: none;
	letter-spacing: -.01em;
}

/* ── Contact form (Contact Form 7) → Agora fields ───────────── */
.gp-contacts .wpcf7 .wpcf7-form-control-wrap { display: block; }
.gp-contacts .wpcf7 input.wpcf7-text,
.gp-contacts .wpcf7 input[type="text"],
.gp-contacts .wpcf7 input[type="email"],
.gp-contacts .wpcf7 input[type="tel"],
.gp-contacts .wpcf7 textarea {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	color: var(--gp-ink);
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	border-radius: 10px;
	outline: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	transition: border-color .18s var(--gp-ease), box-shadow .18s var(--gp-ease);
}
.gp-contacts .wpcf7 textarea {
	height: auto;
	min-height: 140px;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}
.gp-contacts .wpcf7 input.wpcf7-text::placeholder,
.gp-contacts .wpcf7 textarea::placeholder { color: var(--gp-text-soft); opacity: .8; }
.gp-contacts .wpcf7 input.wpcf7-text:focus,
.gp-contacts .wpcf7 textarea:focus {
	border-color: var(--gp-sea);
	box-shadow: 0 0 0 3px rgba(0, 82, 160, .12);
}

/* Submit button — Agora ink pill (self-contained so it beats WoodMart .button) */
.gp-contacts .wpcf7 input[type="submit"],
.gp-contacts .wpcf7 button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 32px;
	font-family: var(--gp-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	background: var(--gp-ink);
	border: 1px solid var(--gp-ink);
	border-radius: 999px;
	cursor: pointer;
	text-transform: none;
	/* WoodMart ships the CF7 submit at opacity:.6 with a faux-bevel inset
	   shadow, both set with real !important — so these must use it too. */
	opacity: 1 !important;
	box-shadow: none !important;
	transition: background .18s var(--gp-ease), border-color .18s var(--gp-ease);
}
.gp-contacts .wpcf7 input[type="submit"]:hover,
.gp-contacts .wpcf7 button[type="submit"]:hover {
	background: var(--gp-sea-deep);
	border-color: var(--gp-sea-deep);
	opacity: 1;
}

/* CF7 response / validation messaging */
.gp-contacts .wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--gp-sans);
	font-size: 13px;
	color: #b0443c;
	margin-top: 4px;
}
.gp-contacts .wpcf7 .wpcf7-not-valid { border-color: #b0443c; }
.gp-contacts .wpcf7-response-output {
	font-family: var(--gp-sans);
	font-size: 14px;
	border-radius: 10px;
	margin: 18px 0 0;
	padding: 12px 16px;
}

/* ── Google map → rounded, framed ───────────────────────────── */
.gp-contacts .elementor-widget-google_maps iframe {
	border-radius: 16px;
	border: 1px solid var(--gp-border);
	display: block;
}

/* ============================================================ *
 * Mobile
 * ============================================================ */
@media (max-width: 767px) {
	.gp-legal .elementor { padding: 4px 0 16px; }
	.gp-legal .woodmart-title-container.title { font-size: 22px; }
	.gp-legal .elementor-widget-text-editor { font-size: 15px; }
	.gp-legal .wd-info-box { padding: 22px 20px; }

	.gp-contacts .wd-info-box { padding: 22px 20px; }
	.gp-contacts .wpcf7 input[type="submit"],
	.gp-contacts .wpcf7 button[type="submit"] { width: 100%; }
}