/*
Theme Name: CG Property Portfolio
Theme URI: https://cgpropertypreservation.com/
Description: Portfolio child theme for CG Property Preservation, built on Music Podcast. Keeps the parent's left sidebar application shell and replaces the music content with services, scope-of-work and subcontracting sections.
Author: CG Property Preservation
Template: music-podcast
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cg-property-portfolio
*/

/* ==========================================================================
   Typography: SF Pro via the system font stack.
   Apple's licence does not allow serving SF Pro files from a website, so the
   -apple-system keyword renders the genuine SF Pro on iPhone, iPad and Mac;
   other platforms fall back to their native UI font (Segoe UI, Roboto).
   Matches theme.json presets "display" and "body".
   ========================================================================== */
:root,
body {
	--mp-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mp-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* SF Pro tracks tighter than Sora at display sizes; keep headings crisp. */
h1, h2, h3,
.wp-block-heading {
	letter-spacing: -0.015em;
}

/* ==========================================================================
   Sidebar navigation icons for the portfolio anchors.
   The parent matches nav links by their href suffix; these add the new ones.
   ========================================================================== */
.mp-sidebar .wp-block-navigation-item__content[href$="#services"] { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.2L3.5 17.3a1.8 1.8 0 0 0 2.6 2.6l5.8-5.8a4 4 0 0 0 5.2-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.mp-sidebar .wp-block-navigation-item__content[href$="#work"] { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E"); }
.mp-sidebar .wp-block-navigation-item__content[href$="#process"] { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E"); }
.mp-sidebar .wp-block-navigation-item__content[href$="#contact"] { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7.5 8 5.5 8-5.5'/%3E%3C/svg%3E"); }

/* Brand mark links inherit no underline / colour shift. */
.mp-brand__mark a {
	display: block;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.mp-welcome h1 {
	max-width: 30ch;
}

.mp-welcome p:not(.mp-eyebrow) {
	max-width: 70ch;
}

.mp-hero .cg-hero__title {
	font-size: var(--mp-fs-xl);
	margin: 0 0 8px;
}

.cg-note {
	color: var(--mp-muted);
	font-size: var(--mp-fs-xs);
	margin: 12px 0 0;
}

/* ==========================================================================
   Featured service card (replaces the parent's player in the left rail)
   ========================================================================== */
.cg-feature .mp-player__meta {
	margin-bottom: 12px;
}

.cg-feature__cta {
	display: flex;
}

.cg-feature__cta .wp-block-button,
.cg-feature__cta .wp-block-button__link {
	text-align: center;
	width: 100%;
}

/* ==========================================================================
   Scope-of-work tiles: landscape crops suit job photos better than squares.
   ========================================================================== */
.mp-rail--5 .mp-cover img {
	aspect-ratio: 4 / 3;
}

.mp-tile--feature .mp-tile__meta {
	color: rgba(26, 18, 8, .72);
}

/* ==========================================================================
   Services grid
   ========================================================================== */
.mp-eps .mp-ep {
	grid-template-columns: 120px minmax(0, 1fr);
}

.mp-eps .mp-ep__art img {
	aspect-ratio: 4 / 3;
}

.mp-eps .mp-ep__desc {
	font-size: var(--mp-fs-sm);
	line-height: 1.55;
}

/* ==========================================================================
   How we work
   ========================================================================== */
.cg-steps {
	counter-reset: cg-step;
	display: grid;
	gap: var(--mp-rail-gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cg-step {
	background: var(--mp-surface-2);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-md);
	color: var(--mp-muted);
	counter-increment: cg-step;
	font-size: var(--mp-fs-sm);
	line-height: 1.55;
	padding: 20px;
}

.cg-step::before {
	align-items: center;
	background: var(--mp-brand-grad);
	border-radius: 50%;
	color: var(--mp-on-brand);
	content: counter(cg-step);
	display: flex;
	font-family: var(--mp-font-display);
	font-weight: 800;
	height: 34px;
	justify-content: center;
	margin-bottom: 14px;
	width: 34px;
}

.cg-step strong {
	color: var(--mp-text);
	display: block;
	font-family: var(--mp-font-display);
	font-size: var(--mp-fs-base);
	margin-bottom: 6px;
}

/* ==========================================================================
   Commercial capabilities
   ========================================================================== */
.mp-sidebar .wp-block-navigation-item__content[href$="#capabilities"] { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-5h6v5M9 10h.01M15 10h.01M9 13h.01M15 13h.01'/%3E%3C/svg%3E"); }

.cg-caps {
	display: grid;
	gap: var(--mp-rail-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cg-cap {
	background: var(--mp-surface-2);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-md);
	padding: 20px;
	transition: background-color .18s ease, border-color .18s ease;
}

.cg-cap:hover {
	background: var(--mp-surface-3);
	border-color: var(--mp-line-2);
}

.cg-cap::before {
	background: var(--mp-brand-grad);
	content: "";
	display: block;
	height: 26px;
	margin-bottom: 14px;
	-webkit-mask: var(--cg-cap-icon) center/contain no-repeat;
	mask: var(--cg-cap-icon) center/contain no-repeat;
	width: 26px;
}

.cg-cap .cg-cap__title {
	font-size: var(--mp-fs-md);
	margin: 0 0 12px;
}

.cg-cap__list {
	color: var(--mp-text-2);
	display: grid;
	font-size: var(--mp-fs-sm);
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cg-cap__list li {
	padding-left: 18px;
	position: relative;
}

.cg-cap__list li::before {
	background: var(--mp-amber-1);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 2px;
	position: absolute;
	top: .6em;
	width: 6px;
}

.cg-cap--carpentry { --cg-cap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-8.4 8.4a2 2 0 0 1-2.8-2.8L12.2 9'/%3E%3Cpath d='M17.6 14.6 22 10.2 13.8 2 9.4 6.4z'/%3E%3C/svg%3E"); }
.cg-cap--door { --cg-cap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 21V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M14 12h.01'/%3E%3C/svg%3E"); }
.cg-cap--fixture { --cg-cap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M12 3v18'/%3E%3C/svg%3E"); }
.cg-cap--paint { --cg-cap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='15' height='6' rx='2'/%3E%3Cpath d='M18 6h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-8v3'/%3E%3Crect x='10' y='14' width='4' height='7' rx='1'/%3E%3C/svg%3E"); }
.cg-cap--fence { --cg-cap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6l2-3 2 3v15M10 21V6l2-3 2 3v15M16 21V6l2-3 2 3v15M2 10h20M2 16h20'/%3E%3C/svg%3E"); }
.cg-cap--grounds { --cg-cap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.1-6C9.5 14.5 12 13 13 12'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Contact band
   ========================================================================== */
.cg-pending,
.cg-area {
	color: rgba(26, 18, 8, .78);
	font-size: var(--mp-fs-sm);
	font-weight: 700;
	margin: 0;
}

.cg-area {
	margin-top: 16px;
}

.cg-collage {
	height: 300px;
	position: relative;
}

.cg-collage figure {
	border: 5px solid #17171d;
	border-radius: var(--mp-r-lg);
	box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .6);
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 70%;
}

.cg-collage img {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

.cg-collage__back {
	right: 0;
	top: 0;
	transform: rotate(4deg);
}

.cg-collage__front {
	bottom: 0;
	left: 0;
	transform: rotate(-3deg);
}

/* ==========================================================================
   Footer: four columns instead of the parent's six.
   ========================================================================== */
.cg-footer__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr;
}

/* Contact icons by type, not position (the parent uses :nth-child). */
.mp-footer__contact li.cg-ci-mail { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7.5 8 5.5 8-5.5'/%3E%3C/svg%3E"); }
.mp-footer__contact li.cg-ci-phone { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h2.6l1.6 4-2 1.4a12 12 0 0 0 5.9 5.9l1.4-2 4 1.6V17a3.5 3.5 0 0 1-3.8 3.5A16.5 16.5 0 0 1 3.5 7.3 3.5 3.5 0 0 1 7 3.5z'/%3E%3C/svg%3E"); }
.mp-footer__contact li.cg-ci-pin { --mp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.4 7-11.2A7 7 0 1 0 5 10.3c0 4.8 7 11.2 7 11.2z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }

/* Long email addresses must wrap instead of running into the next column. */
.mp-footer__contact li,
.mp-footer__contact a {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The location chip is a link, not a selector: drop the dropdown chevron. */
.mp-selectish::after {
	display: none;
}

.mp-footer__legal a:hover {
	color: var(--mp-amber-1);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
	.cg-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.cg-collage { display: none; }
}

@media (max-width: 560px) {
	.cg-steps { grid-template-columns: minmax(0, 1fr); }
	.cg-caps { grid-template-columns: minmax(0, 1fr); }
	.cg-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.mp-eps .mp-ep { grid-template-columns: 84px minmax(0, 1fr); }
	/* The drawer and hero both carry this call to action on small screens. */
	.mp-topbar .cg-topbar-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cg-collage figure { transform: none; }
}