/* ==========================================================================
   Palmetto's Finest — section pattern styles   v1.4.0
   --------------------------------------------------------------------------
   TOKENS: mapped to the site's ACTUAL Blocksy palette, read from the existing
   page markup (Retaining Walls, Sept 2026). Same double-fallback form the
   Greenshift sections already use, so these resolve identically.

     palette-color-1  #FD5320  ORANGE — leftover from the Blocksy "landscape"
                               starter template. Not a brand color. Unused here.
     palette-color-2  #438b22  green (accent, links, form headings)
     palette-color-3  #213631  dark green (headings, accordion titles)
     palette-color-4  #0f1a17  near-black (dark section backgrounds)
     palette-color-5  #F0F2F3  light grey (borders, icon box fills)
     palette-color-8  #ffffff  white

   Cream has no palette slot, so it stays a literal. If a cream gets added to
   the Customizer palette later, point --pf-cream at it.
   ========================================================================== */

:root {
	--pf-green:    var(--wp--preset--color--palette-color-2, var(--theme-palette-color-2, #438b22));
	--pf-ink:      var(--wp--preset--color--palette-color-3, var(--theme-palette-color-3, #213631));
	--pf-deep:     var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #0f1a17));
	--pf-line:     var(--wp--preset--color--palette-color-5, var(--theme-palette-color-5, #F0F2F3));
	--pf-white:    var(--wp--preset--color--palette-color-8, var(--theme-palette-color-8, #ffffff));

	--pf-green-dk: #35701b;              /* no palette slot — hover/darker green */
	--pf-green-band: #3d7d1f;            /* CTA band: brand green is 4.24:1 with white,
	                                        just under AA. This shade is 5.06:1. */
	--pf-cream:    #FAF7F2;              /* no palette slot */
	--pf-body:     var(--theme-text-color, #3C443C);
	--pf-green-soft: #E9F1E4;            /* tint for callouts */

	--pf-radius: 20px;                   /* matches existing Greenshift cards */
	--pf-radius-img: 10px;               /* matches existing image radius */
	--pf-section-y: 72px;
	--pf-section-y-mobile: 48px;
	--pf-gap: 20px;
}

/* --------------------------------------------------------------------------
   Section shell

   NOTE ON :where() — everything here that someone might reasonably want to
   change from the block sidebar (padding, background, lead type) is wrapped in
   :where(), which carries ZERO specificity. That makes these defaults rather
   than rules: set padding or a background colour on the group in the editor
   and your value wins, no !important needed. The structural rules further down
   (grids, card internals) stay at normal specificity because they hold the
   layouts together.
   -------------------------------------------------------------------------- */
:where(.pf-c) { padding-block: var(--pf-section-y); }
:where(.pf-c .pf-inner) { max-width: var(--theme-content-width, 1200px); margin: 0 auto; padding-inline: 24px; }
:where(.pf-c .pf-lead) { font-size: 19px; line-height: 1.55; color: var(--pf-body); }

:where(.pf-band-cream) { background: var(--pf-cream); }
:where(.pf-band-white) { background: var(--pf-white); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); }
:where(.pf-band-dark)  { background: var(--pf-ink); color: var(--pf-white); padding-block: 32px; }
:where(.pf-band-deep)  { background: var(--pf-deep); color: var(--pf-white); }
:where(.pf-band-green) { background: var(--pf-green-band); color: var(--pf-white); }
:where(.pf-band-gradient) { background: linear-gradient(90deg, rgb(6,46,3) 1%, rgba(58,87,44,.98) 99%); color: var(--pf-white); }

/* Light text on the dark bands. Zero specificity too, but declared AFTER the
   .pf-lead default above, so it wins the tie. A colour picked in the sidebar
   renders inline and still beats both. */
:where(.pf-band-dark, .pf-band-deep, .pf-band-green, .pf-band-gradient) :is(p, h2, h3, h4, .pf-lead) { color: var(--pf-white); }
:where(.pf-band-dark) a { color: var(--pf-white); }

/* Sections end flush — stops the dead space under the last block in a band. */
:where(.pf-c .pf-inner) > :last-child { margin-bottom: 0; }
:where(.pf-c .pf-inner) > :first-child { margin-top: 0; }

/* Bands butt up against each other. WordPress/Blocksy put a block gap between
   sibling top-level blocks; because each band paints its own background, that
   gap renders as a stripe of page background between sections. This one is NOT
   in :where() — its job is to beat the theme. A margin set in the sidebar still
   overrides it, since block margin renders as an inline style. */
.pf-c.pf-c { margin-top: 0; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tile grid — short labels, no images
   -------------------------------------------------------------------------- */
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; }
.pf-tiles p {
	margin: 0; padding: 20px; font-weight: 600; color: var(--pf-ink);
	background: var(--pf-white); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
}
.pf-band-white .pf-tiles p { background: var(--pf-cream); }

/* --------------------------------------------------------------------------
   Card grid — image + heading + copy + link
   -------------------------------------------------------------------------- */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pf-gap); margin-top: 32px; }
.pf-card { background: var(--pf-white); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden; }
.pf-card .wp-block-image { margin: 0; }
.pf-card .wp-block-image img { width: 100%; aspect-ratio: 488 / 250; object-fit: cover; display: block; }
.pf-card h3 { margin: 16px 20px 6px; font-size: 20px; }
.pf-card p { margin: 0 20px 16px; font-size: 15px; color: var(--pf-body); }
.pf-card a { font-weight: 600; white-space: nowrap; }

/* A card carrying its own background sets its own text color — without this the
   dark CTA card inherited near-black body text on a near-black card. */
.pf-card.has-background p,
.pf-card.has-text-color p,
.pf-card.has-background a,
.pf-card.has-text-color a { color: inherit; }

/* --------------------------------------------------------------------------
   Icon card row — benefits on a dark band
   -------------------------------------------------------------------------- */
.pf-iconcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 5px; margin-top: 32px; }
.pf-iconcard { text-align: center; padding: 0 10px; }
.pf-iconcard .pf-icon { margin: 0 auto 20px; min-height: 90px; }
/* The icon slot expects a simple line icon (SVG or transparent PNG, ~240px square)
   and sits it on a light chip. A photograph in here ends up tiny — for photos,
   add the class pf-thumb to the image block (Advanced > Additional CSS class). */
.pf-iconcard .pf-icon img {
	width: 110px; height: 110px; object-fit: contain; padding: 22px;
	background: var(--pf-line); border-radius: var(--pf-radius-img); box-sizing: border-box;
}

/* Photo variant — full-width thumbnail instead of an icon chip. */
.pf-iconcard .pf-thumb img {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	padding: 0; background: none; border-radius: var(--pf-radius-img);
}
.pf-iconcard-title { margin: 0 0 4px; font-size: 18px; }
.pf-iconcard p { font-size: 15px; margin: 0; }

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.pf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 32px; align-items: stretch; }
/* height:100% makes every step fill its grid row, so the white bodies bottom-align
   instead of floating at three different heights. */
.pf-step { position: relative; height: 100%; box-sizing: border-box; border-radius: var(--pf-radius); overflow: hidden; min-height: 480px; display: flex; align-items: flex-end; background: var(--pf-deep); }
.pf-step .pf-step-img { margin: 0; position: absolute; inset: 0; }
.pf-step .pf-step-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-step-body { position: relative; margin: 30px; padding: 30px; background: var(--pf-white); border-radius: var(--pf-radius-img); width: 100%; box-sizing: border-box; }
.pf-step-num { margin: 0 0 4px; font-weight: 700; color: var(--pf-green); }
.pf-step-body h3 { margin: 0 0 12px; color: var(--pf-ink); font-size: 22px; }
.pf-step-body p { margin: 0; color: var(--pf-body); font-size: 15px; }

/* --------------------------------------------------------------------------
   Intro copy
   -------------------------------------------------------------------------- */
.pf-intro { margin-top: 0; }
.pf-intro h2 { margin-top: 0; }

/* --------------------------------------------------------------------------
   Inline form card
   -------------------------------------------------------------------------- */
.pf-formcard {
	max-width: 650px; margin: 0 auto; padding: 40px;
	background: #fcfcfc; border-radius: var(--pf-radius);
	box-shadow: 0 2px 24px rgba(15, 26, 23, .08);
}
.pf-formcard-title { margin: 0 0 10px; color: var(--pf-green); font-size: 22px; }

/* --------------------------------------------------------------------------
   Callout / checklist / areas / communities
   -------------------------------------------------------------------------- */
.pf-callout { background: var(--pf-green-soft); border-radius: var(--pf-radius); padding: 32px; margin-top: 32px; }
.pf-callout h3 { margin-top: 0; color: var(--pf-ink); }
.pf-callout p { color: var(--pf-body); }

.pf-checks { list-style: none; padding: 0; margin-top: 24px; }
.pf-checks li { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--pf-line); color: var(--pf-body); }
.pf-checks li:last-child { border-bottom: 0; }
.pf-checks li strong { display: block; color: var(--pf-ink); font-size: 18px; margin-bottom: 4px; }

.pf-areas, .pf-communities { columns: 2; column-gap: 32px; font-size: 17px; line-height: 2; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.pf-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pf-gap); margin-top: 32px; }
.pf-quote { background: var(--pf-cream); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 28px; }
.pf-quote p { color: var(--pf-body); }
.pf-quote-name { margin-bottom: 0; font-weight: 600; color: var(--pf-ink); font-size: 15px; }

/* --------------------------------------------------------------------------
   Buttons — shape only; colors come from Blocksy's button settings
   -------------------------------------------------------------------------- */
.pf-c .wp-block-button__link { border-radius: 6px; padding: 15px 28px; font-weight: 600; }
.pf-btn-light .wp-block-button__link { background: var(--pf-white); color: var(--pf-green-dk); }

/* --------------------------------------------------------------------------
   FAQ — native core/details blocks
   -------------------------------------------------------------------------- */
.pf-faq { background: var(--pf-white); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 20px 24px; margin-bottom: 12px; }
.pf-faq summary { font-weight: 600; font-size: 16px; cursor: pointer; color: var(--pf-ink); }
.pf-faq summary:hover { color: var(--pf-green); }
.pf-faq summary::marker { color: var(--pf-green); }
.pf-faq p { margin: 12px 0 0; color: var(--pf-body); }

/* --------------------------------------------------------------------------
   Editor
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .pf-c { padding: 40px 0; }
.editor-styles-wrapper .pf-step { min-height: 320px; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.pf-c { padding: var(--pf-section-y-mobile) 0; }
	.pf-areas, .pf-communities { columns: 1; }
	.pf-callout, .pf-formcard { padding: 24px; }
	.pf-step { min-height: 420px; }
	.pf-step-body { margin: 20px; padding: 24px; }
}