/* ShieldCo Site Editor — pattern styles (sc-* sections).
 * Loaded after ShieldCo-Theme/style.css on the front end AND inside the block editor via
 * add_editor_style(). Units are px on purpose: the theme root is 62.5% (1rem = 10px) but the
 * editor canvas is 16px, so rem would not match. Selectors are descendant selectors on the
 * front-end DOM; every block here uses useInnerBlocksProps so the editor DOM is identical.
 * Brand tokens come from the theme's :root vars; the fallbacks are the same hex values. */

/* --- Section shell (every pattern's outer block carries .sc-section) -------------------- */
.wp-block-group.sc-section,
.wp-block-cover.sc-section,
.wp-block-columns.sc-section {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-top: 0;
  margin-bottom: 0;
  /* Theme: sections pad 10rem (100px) and wrap content at 92% / 1280px. Full-bleed block, so the
   * side padding is the gutter that centres a 1280px content area. */
  padding: 100px max(4%, calc((100% - 1280px) / 2));
}
.sc-section h1, .sc-section h2, .sc-section h3 { margin-top: 0; }
.sc-section h2 { margin-bottom: 30px; }
.sc-section .wp-block-image { margin: 0; }
.sc-section .wp-block-image img { width: 100%; height: auto; display: block; }
/* Blog posts: the entry column is 760px, so let a full band bleed to the viewport edges. */
.single-post .entry-content .sc-section.alignfull {
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* --- Buttons: the theme's gold pill (.custom-button a.button) on core/button ------------- */
.sc-section .wp-block-buttons { margin-top: 10px; }
.sc-section .wp-block-button__link {
  background-color: var(--shieldco-primary, #f8af4c);
  color: var(--shieldco-black, #000);
  font-family: 'Roboto Condensed', 'Roboto Condensed Fallback', sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1; text-transform: uppercase;
  padding: 16px 26px;
  border: 1.5px solid var(--shieldco-primary, #f8af4c);
  border-radius: 50px;
  box-shadow: none; text-decoration: none;
  transition: 0.25s ease-in-out all;
}
.sc-section .wp-block-button__link:hover,
.sc-section .wp-block-button__link:focus { color: var(--shieldco-black, #000); filter: brightness(1.08); }
.sc-section .is-style-outline .wp-block-button__link {
  background-color: transparent; color: var(--shieldco-black, #000); border-color: var(--shieldco-black, #000);
}
.sc-section .is-style-outline .wp-block-button__link:hover { background-color: var(--shieldco-black, #000); color: #fff; filter: none; }
.sc-hero .is-style-outline .wp-block-button__link,
.sc-feature-boxes .is-style-outline .wp-block-button__link,
.sc-stat-band .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; }

/* --- Hero (theme .header-section) --------------------------------------------------------- */
.wp-block-cover.sc-hero {
  background-color: var(--shieldco-secondary, #25242d);
  padding-top: 230px; /* theme: calc(130px + 10rem) — the fixed site header sits over the hero */
  padding-bottom: 100px;
  min-height: 520px;
}
.sc-hero h1 {
  color: #fff; font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
  font-size: 50px; font-weight: 500; line-height: 1.4;
  max-width: 640px; margin: 0 0 20px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
.sc-hero p {
  color: #fff; font-size: 18px; font-weight: 500; max-width: 560px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.sc-hero p a { color: #fff; }
.sc-hero p a:hover { color: var(--shieldco-light, #e7be86); }

/* --- Image + text 50/50 (theme .standout-section) ---------------------------------------- */
.wp-block-columns.sc-image-text { gap: 80px; }
.sc-image-text p { font-size: 22px; }
.sc-image-text .wp-block-column { min-width: 0; }

/* --- Three feature boxes (theme .why-us-boxes on the charcoal fp9 section) --------------- */
.sc-feature-boxes { background-color: var(--shieldco-secondary, #25242d); color: #fff; }
.sc-feature-boxes h2 { color: #fff; margin-bottom: 40px; }
.sc-feature-boxes .wp-block-columns { gap: 40px; }
.sc-feature-boxes .wp-block-column { background-color: #373542; padding: 30px; }
.sc-feature-boxes h3 {
  color: var(--shieldco-primary, #f8af4c); font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 22px; font-weight: 500; margin: 0 0 20px;
}
.sc-feature-boxes p { color: #fff; font-size: 16px; }

/* --- Stat band --------------------------------------------------------------------------- */
.sc-stat-band { background-color: var(--shieldco-secondary, #25242d); color: #fff; text-align: center; }
.sc-stat-band h2 { color: var(--shieldco-light, #e7be86); margin-bottom: 50px; }
.sc-stat-band .wp-block-columns { gap: 20px; }
.sc-stat-band .sc-stat-number {
  color: var(--shieldco-primary, #f8af4c); font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
  font-size: 56px; font-weight: 500; line-height: 1.1; margin: 0 0 8px;
}
.sc-stat-band .sc-stat-label { color: #fff; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; margin: 0; }

/* --- Testimonial (theme .reviews-slider .testimonial) ------------------------------------- */
.sc-testimonial { background-color: #f8f4ee; text-align: center; }
.sc-testimonial .sc-stars { color: #edb25e; font-size: 22px; letter-spacing: 4px; margin: 0 0 20px; }
.sc-testimonial .wp-block-quote { max-width: 860px; margin: 0 auto; padding: 0; border: 0; font-style: normal; }
.sc-testimonial .wp-block-quote p {
  font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
  font-size: 24px; line-height: 1.5; margin: 0 0 24px;
}
.sc-testimonial .wp-block-quote cite {
  display: block; color: var(--shieldco-black, #000); font-size: 15px; font-style: normal; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}

/* --- CTA band (gold; the live .bottom-page-cta reusable block is charcoal + gold tagline) --- */
.sc-cta-band { background-color: var(--shieldco-primary, #f8af4c); color: var(--shieldco-black, #000); text-align: center; }
.sc-cta-band h2 { color: var(--shieldco-secondary, #25242d); margin-bottom: 15px; }
.sc-cta-band p { font-size: 18px; max-width: 720px; margin: 0 auto 30px; }
.sc-cta-band .wp-block-button__link {
  background-color: var(--shieldco-secondary, #25242d); border-color: var(--shieldco-secondary, #25242d); color: #fff;
}
.sc-cta-band .wp-block-button__link:hover { background-color: #000; border-color: #000; color: #fff; filter: none; }

/* --- FAQ (core/details accordion) --------------------------------------------------------- */
.sc-faq h2 { text-align: center; margin-bottom: 40px; }
.sc-faq .wp-block-details { max-width: 860px; margin: 0 auto; padding: 20px 0; border-bottom: 1.5px solid #ddd; }
.sc-faq .wp-block-details summary {
  position: relative; padding-right: 40px; cursor: pointer; list-style: none;
  font-size: 20px; font-weight: 600; line-height: 1.4;
}
.sc-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.sc-faq .wp-block-details summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--shieldco-dark, #d08825); font-size: 30px; font-weight: 300; line-height: 1;
}
.sc-faq .wp-block-details[open] summary::after { content: '\2013'; }
.sc-faq .wp-block-details p { font-size: 17px; margin: 16px 0 0; }

/* --- Photo grid (core/gallery, 3 columns, cropped to 4:3) --------------------------------- */
.sc-photo-grid h2 { text-align: center; margin-bottom: 40px; }
.sc-photo-grid .wp-block-gallery .wp-block-image img {
  aspect-ratio: 4 / 3; width: 100%; height: auto !important; /* beats core's #individual-image hack */
  object-fit: cover;
}

/* --- Logo strip (theme .client-logos on the #ebe8e3 journalists section) ----------------- */
.sc-logo-strip { background-color: #ebe8e3; text-align: center; }
.sc-logo-strip h2 { margin-bottom: 30px; }
.sc-logo-strip .sc-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 40px 60px; max-width: 1040px; margin: 0 auto;
}
.sc-logo-strip .sc-logos .wp-block-image {
  display: flex; align-items: center; justify-content: center; height: 75px; max-width: 200px; margin: 0;
}
.sc-logo-strip .sc-logos .wp-block-image img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* --- Case study: facts row + challenge/solution ------------------------------------------ */
.wp-block-group.sc-facts { background-color: #f8f4ee; padding-top: 40px; padding-bottom: 40px; text-align: center; }
.sc-facts .sc-fact-label { color: #777; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; }
.sc-facts .sc-fact-value { color: var(--shieldco-secondary, #25242d); font-size: 22px; font-weight: 600; margin: 0; }
.wp-block-columns.sc-two-col { gap: 80px; }
.sc-two-col h2 { font-size: 32px; }
.sc-two-col li { margin-bottom: 8px; }

/* --- Responsive ------------------------------------------------------------------------- */
@media (max-width: 781px) { /* core/columns stacks at 781px */
  .sc-stat-band .wp-block-columns .wp-block-column { flex-basis: calc(50% - 10px) !important; }
  .wp-block-columns.sc-image-text, .wp-block-columns.sc-two-col { gap: 40px; }
  .sc-feature-boxes .wp-block-columns { gap: 20px; }
}
@media (max-width: 767px) { /* theme: 8rem section padding, 4vw gutter, 4.2rem h1 */
  .wp-block-group.sc-section, .wp-block-cover.sc-section, .wp-block-columns.sc-section { padding: 80px 4vw; }
  .wp-block-cover.sc-hero { padding-top: 100px; padding-bottom: 80px; min-height: 0; }
  .sc-hero h1 { font-size: 38px; }
  .sc-image-text p { font-size: 17px; }
  .sc-stat-band .sc-stat-number { font-size: 40px; }
  .sc-testimonial .wp-block-quote p { font-size: 20px; }
  .sc-logo-strip .sc-logos { gap: 20px 30px; }
  .sc-logo-strip .sc-logos .wp-block-image { height: 45px; max-width: 120px; }
}