/* WP-Flash Flash Blocks — section styles for block content (Raw PHP themes).
   Loaded on the site AND inside the block editor, so what the client edits looks exactly like the live page.
   Every value comes from the theme's design tokens (style.css :root), with safe fallbacks. */

.wpf-s {
  --wpf-pad: var(--spacing-xl, 80px);
  --wpf-gap: var(--spacing-md, 24px);
  --wpf-r: var(--radius, 10px);
  --wpf-r-lg: var(--radius-lg, 18px);
  --wpf-fg: var(--color-text, #1c1c1f);
  --wpf-muted: var(--color-text-muted, #5b5b63);
  --wpf-bg: var(--color-bg, #ffffff);
  --wpf-card: var(--color-surface, #f6f6f8);
  --wpf-line: var(--color-border, #e5e5ea);
  --wpf-pri: var(--color-primary, #1f5eff);
  --wpf-on-pri: var(--on-primary, #ffffff);
  --wpf-acc: var(--color-accent, var(--wpf-pri));
  position: relative;
  margin: 0 !important;
  padding: var(--wpf-pad) 0;
  background: var(--wpf-bg);
  color: var(--wpf-fg);
  font-family: var(--font-body, inherit);
}
.wpf-s .wpf-inner { max-width: var(--container, 1200px); margin: 0 auto !important; padding: 0 24px; }
.wpf-s h1, .wpf-s h2, .wpf-s h3 { font-family: var(--font-heading, inherit); color: inherit; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5em; }
.wpf-s p { margin: 0 0 1em; line-height: 1.7; }
.wpf-s a { color: var(--wpf-pri); }
.wpf-s .wpf-title { font-size: clamp(28px, 4vw, 40px); }
.wpf-s .wpf-intro { color: var(--wpf-muted); font-size: 1.1em; max-width: 720px; }
.wpf-s .wpf-kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wpf-pri); background: color-mix(in srgb, var(--wpf-pri) 12%, transparent); border-radius: 999px; padding: 6px 12px; margin-bottom: 14px;
}
.wpf-s .wp-block-columns.wpf-grid { gap: var(--wpf-gap); margin: 0 0 var(--wpf-gap); }
.wpf-s .wpf-inner > :last-child, .wpf-s .wp-block-column > :last-child, .wpf-card > :last-child { margin-bottom: 0 !important; }

/* tones */
.wpf-tone-dark { --wpf-bg: var(--color-text, #111114); --wpf-fg: #fff; --wpf-muted: rgba(255, 255, 255, 0.78); --wpf-card: rgba(255, 255, 255, 0.06); --wpf-line: rgba(255, 255, 255, 0.14); }
.wpf-tone-primary { --wpf-bg: var(--wpf-pri); --wpf-fg: var(--wpf-on-pri); --wpf-muted: color-mix(in srgb, var(--wpf-on-pri) 82%, transparent); }
.wpf-tone-primary a { color: inherit; }
.wpf-tone-soft { --wpf-bg: var(--color-surface, #f6f6f8); --wpf-card: var(--color-bg, #fff); }
.wpf-tone-dark .wpf-kicker, .wpf-tone-primary .wpf-kicker { color: inherit; background: rgba(255, 255, 255, 0.14); }

/* buttons */
.wpf-s .wp-block-buttons { gap: 12px; margin: 8px 0 18px; }
.wpf-s .wp-block-button .wp-block-button__link {
  border-radius: var(--wpf-r); padding: 14px 24px; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wpf-s .wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.wpf-s .wpf-btn-primary .wp-block-button__link { background: var(--wpf-acc); color: var(--on-accent, var(--wpf-on-pri)); }
.wpf-s .wpf-btn-secondary .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.wpf-s .wpf-btn-light .wp-block-button__link { background: #fff; color: var(--wpf-pri); }

/* icons (CSS masks — no HTML blocks needed) */
.wpf-ic::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.5em; vertical-align: -0.2em;
  background: currentColor; -webkit-mask: var(--wpf-i) center / contain no-repeat; mask: var(--wpf-i) center / contain no-repeat;
}
.wpf-ic-check { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.wpf-ic-phone { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.wpf-ic-clock { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.wpf-ic-shield { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.6 8 11 4.6-1.4 8-6 8-11V5z'/%3E%3C/svg%3E"); }
.wpf-ic-star { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.wpf-ic-bolt { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.wpf-ic-tag { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12V3h9l9 9-9 9zm4.5-4.5a1.5 1.5 0 1 0 0-.01z'/%3E%3C/svg%3E"); }
.wpf-ic-map { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
.wpf-ic-wrench { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.7 6.3 18 10l-4-4 3.7-3.7a6 6 0 0 0-7.6 7.6l-7.4 7.4a2 2 0 1 0 2.9 2.9l7.4-7.4a6 6 0 0 0 7.7-7.6z'/%3E%3C/svg%3E"); }
.wpf-ic-mail { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3zm2 2v.5l7 4.5 7-4.5V7l-7 4.5z'/%3E%3C/svg%3E"); }
.wpf-ic-home { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E"); }
.wpf-ic-award { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 1 0 0 14 7 7 0 0 0 0-14M8 16.9 6 23l6-3 6 3-2-6.1A9 9 0 0 1 12 18a9 9 0 0 1-4-1.1'/%3E%3C/svg%3E"); }
.wpf-ic-users { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8m7 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6M1 21c0-4 3.6-7 8-7s8 3 8 7zm16.5 0c0-2.4-.9-4.5-2.4-6 3.9.2 7.9 2.4 7.9 6z'/%3E%3C/svg%3E"); }
.wpf-ic-leaf { --wpf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 16c0 1.7.4 3.3 1 4.6L7 19c2-5 6-8 10-9-4 2-7 5-8.6 9.7A8 8 0 0 0 11 20c6.6 0 10-6 9-17'/%3E%3C/svg%3E"); }

/* hero */
.wpf-hero { --wpf-pad: clamp(64px, 9vw, 120px); }
.wpf-hero .wpf-h1 { font-size: clamp(36px, 5vw, 56px); max-width: 16ch; }
.wpf-hero .wpf-lead { font-size: clamp(17px, 2vw, 20px); color: var(--wpf-muted); max-width: 46ch; }
.wpf-hero .wpf-hero-cols { align-items: center; gap: clamp(24px, 4vw, 56px); }
.wpf-hero .wpf-hero-media img { border-radius: var(--wpf-r-lg); width: 100%; height: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
/* Classic (Raw PHP) themes wrap a group's blocks in .wp-block-group__inner-container — flex rows go on that wrapper too. */
.wpf-trust, .wpf-trust > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.wpf-trust { margin-top: 8px; }
.wpf-trust > .wp-block-group__inner-container { flex: 1 1 100%; }
.wpf-trust > .wp-block-group__inner-container > * { margin: 0; }
.wpf-trust p { margin: 0; font-weight: 600; font-size: 15px; color: var(--wpf-muted); }
.wpf-trust .wpf-ic::before { color: var(--wpf-acc); }

.wpf-hero-page { --wpf-pad: clamp(40px, 6vw, 72px); }
.wpf-hero-page .wpf-h1 { font-size: clamp(32px, 4.4vw, 48px); max-width: 22ch; }
.wpf-crumbs { font-size: 14px; color: var(--wpf-muted); margin-bottom: 14px !important; }
.wpf-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* stats */
.wpf-stats { --wpf-pad: 44px; text-align: center; }
.wpf-stats .wpf-stat-n { font-family: var(--font-heading, inherit); font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1; margin: 0 0 6px; }
.wpf-stats .wpf-stat-l { margin: 0; color: var(--wpf-muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.wpf-stats .wpf-grid { margin: 0; }

/* cards */
.wpf-card { height: 100%; background: var(--wpf-card); border: 1px solid var(--wpf-line); border-radius: var(--wpf-r-lg); padding: 26px; transition: transform .15s ease, box-shadow .15s ease; }
.wpf-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08); }
.wpf-card .wpf-card-t { font-size: 20px; margin-bottom: 8px; }
.wpf-card .wpf-card-t a { color: inherit; text-decoration: none; }
.wpf-card .wpf-card-p { color: var(--wpf-muted); margin: 0; }
.wpf-card .wpf-card-link { margin: 12px 0 0; font-weight: 700; }
.wpf-card .wpf-card-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin: 0 0 16px;
  color: var(--wpf-pri); background: color-mix(in srgb, var(--wpf-pri) 12%, transparent); }
.wpf-card .wpf-card-ic::before { margin: 0; width: 24px; height: 24px; }

/* media + text */
.wpf-media-text .wpf-mt { align-items: center; gap: clamp(24px, 4vw, 56px); }
.wpf-media-text .wpf-media img { border-radius: var(--wpf-r-lg); width: 100%; height: auto; }

/* steps */
.wpf-step { padding: 8px 4px; }
.wpf-step .wpf-step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: var(--wpf-pri); color: var(--wpf-on-pri); margin-bottom: 14px; }

/* reviews */
.wpf-review { height: 100%; margin: 0; background: var(--wpf-card); border: 1px solid var(--wpf-line); border-left: 4px solid var(--wpf-acc); border-radius: var(--wpf-r-lg); padding: 24px; }
.wpf-review p { font-size: 17px; }
.wpf-review cite { font-style: normal; font-weight: 700; font-size: 14px; color: var(--wpf-muted); }

/* faq */
.wpf-faq .wpf-faq-item { border: 1px solid var(--wpf-line); border-radius: var(--wpf-r); padding: 16px 20px; margin: 0 0 12px; background: var(--wpf-card); }
.wpf-faq .wpf-faq-item summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.wpf-faq .wpf-faq-item[open] summary { margin-bottom: 10px; }
.wpf-faq .wpf-faq-item p { margin: 0; color: var(--wpf-muted); }

/* cta */
.wpf-cta { text-align: center; --wpf-pad: clamp(56px, 7vw, 96px); }
.wpf-cta .wpf-lead { color: var(--wpf-muted); font-size: 18px; max-width: 640px; margin-left: auto; margin-right: auto; }
.wpf-cta .wp-block-buttons { justify-content: center; }

/* form */
.wpf-form .wpf-form-cols { gap: clamp(24px, 4vw, 56px); }
.wpf-form .wpf-ic { font-weight: 600; }
.wpf-form .wpf-ic::before { color: var(--wpf-acc); }

/* areas */
.wpf-areas .wpf-areas-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wpf-areas .wpf-areas-list li { background: var(--wpf-card); border: 1px solid var(--wpf-line); border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.wpf-areas .wpf-areas-list a { text-decoration: none; color: inherit; }

/* text */
.wpf-text .wpf-inner { max-width: var(--container-sm, 760px); }
.wpf-text ul { padding-left: 1.2em; margin: 0 0 1em; }
.wpf-text li { margin-bottom: 0.35em; line-height: 1.7; }

/* menu (skill 39) */
.wpf-menu .wpf-menu-cat { background: var(--wpf-card); border: 1px solid var(--wpf-line); border-radius: var(--wpf-r-lg); padding: 24px 26px; height: 100%; }
.wpf-menu .wpf-menu-cat-t { margin: 0 0 4px; }
.wpf-menu .wpf-menu-note { margin: 0 0 12px; color: var(--wpf-muted); font-size: 14px; }
.wpf-menu .wpf-menu-item { padding: 12px 0; border-bottom: 1px dashed var(--wpf-line); }
.wpf-menu .wpf-menu-item:last-child { border-bottom: 0; }
.wpf-menu .wpf-menu-top, .wpf-menu .wpf-menu-top > .wp-block-group__inner-container { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wpf-menu .wpf-menu-top > .wp-block-group__inner-container { flex: 1 1 100%; }
.wpf-menu .wpf-menu-top p, .wpf-menu .wpf-menu-top > .wp-block-group__inner-container > p { margin: 0; }
.wpf-menu .wpf-menu-price { font-weight: 700; color: var(--wpf-pri); white-space: nowrap; }
.wpf-menu .wpf-menu-desc { margin: 4px 0 0; color: var(--wpf-muted); font-size: 15px; }
.wpf-menu .wpf-menu-tags { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--wpf-acc); }
/* map (skill 39) */
.wpf-map .wpf-map-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--wpf-r-lg); overflow: hidden; border: 1px solid var(--wpf-line); }
.wpf-map .wpf-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wpf-map .wpf-areas-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wpf-map .wpf-areas-list li { background: var(--wpf-card); border: 1px solid var(--wpf-line); border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.wpf-map .wpf-areas-list a { text-decoration: none; color: inherit; }
/* before / after (skill 39) */
.wpf-before-after .wpf-ba-item { margin: 0 0 32px; }
.wpf-before-after .wpf-ba-label { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wpf-muted); }
.wpf-before-after .wpf-ba-after { color: var(--wpf-pri); }
.wpf-before-after .wpf-ba-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wpf-r); }
.wpf-before-after .wpf-ba-cap { margin: 10px 0 0; font-weight: 600; }

@media (max-width: 781px) {
  .wpf-s { --wpf-pad: 56px; }
  .wpf-hero .wpf-h1 { max-width: none; }
}

/* ── inside the block editor: full-width sections, no stray editor margins ── */
.editor-styles-wrapper .wpf-s.alignfull { max-width: none !important; width: auto; }
.editor-styles-wrapper .is-root-container > .wpf-s { margin-top: 0 !important; margin-bottom: 0 !important; }
/* classic-theme editors wrap full-width blocks in div.wp-block[data-align=full] with 28px margins */
.editor-styles-wrapper .wp-block[data-align="full"]:has(> .wpf-s) { margin-top: 0 !important; margin-bottom: 0 !important; }
.editor-styles-wrapper .wpf-s .wpf-inner > * { max-width: none; }
.editor-styles-wrapper .wpf-s .block-editor-block-list__layout > .wp-block { margin-left: 0; margin-right: 0; }

/* two plain (untoned) sections in a row: don't stack two full paddings */
.wpf-s:not([class*="wpf-tone-"]) + .wpf-s:not([class*="wpf-tone-"]) { padding-top: 0; }
.editor-styles-wrapper .wp-block[data-align="full"]:has(> .wpf-s:not([class*="wpf-tone-"])) + .wp-block[data-align="full"] > .wpf-s:not([class*="wpf-tone-"]) { padding-top: 0; }