/*
 * 04-block-styles.css – Blockstilar (Section, Card, Eyebrow …) och färgarv
 * Del av child-temat Haninge Grav. Se README.md.
 */

/* ==========================================================================
   Blockstilar
   Väljs under Block → Styles. Registreras i inc/block-styles.php.
   Princip: varianter inom samma familj delar ALLA mått (padding, radie,
   ram, avstånd, typografi). Bara färgerna skiljer dem åt.

   Färgerna sätts som lokala variabler (--x-*) på sektionen/kortet,
   och allt inuti läser dem. Så räcker det att byta stil för att
   rubriker, text, länkar och knappar ska få rätt kontrast.
   ========================================================================== */

/* ---------- Bilder ---------- */
.wp-block-image.is-style-rounded img,
.wp-block-image .is-style-rounded img,
.wp-block-image.is-style-hg-soft img { border-radius: var(--radius-xl); }

/* ---------- Sektioner: Section / Section alt / Section light / Section accent ---------- */
.wp-block-group:is(.is-style-hg-section, .is-style-hg-section-alt, .is-style-hg-section-light, .is-style-hg-section-accent) {
  --x-bg: var(--hg-bg);
  --x-fg: var(--hg-fg-muted);
  --x-heading: var(--hg-fg);
  --x-muted: var(--hg-fg-muted);
  --x-label: var(--hg-accent);
  --x-dot: var(--hg-accent);
  --x-link: var(--hg-accent);
  --x-data: var(--hg-accent);
  --x-line: var(--hg-divider);
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: var(--x-bg);
  color: var(--x-fg);
}
.wp-block-group.is-style-hg-section-alt { --x-bg: var(--hg-bg-alt); }
.wp-block-group.is-style-hg-section-light {
  --x-bg: var(--hg-light-bg);
  --x-fg: var(--hg-light-muted);
  --x-heading: var(--hg-light-fg);
  --x-muted: var(--hg-light-muted);
  --x-label: var(--hg-light-fg);
  --x-dot: var(--hg-accent);
  --x-link: var(--hg-light-fg);
  --x-data: var(--hg-light-fg);
  --x-line: var(--hg-light-border);
}
.wp-block-group.is-style-hg-section-accent {
  --x-bg: var(--hg-accent);
  --x-fg: var(--hg-on-accent);
  --x-heading: var(--hg-on-accent);
  --x-muted: var(--hg-on-accent);
  --x-label: var(--hg-on-accent);
  --x-dot: var(--hg-on-accent);
  --x-link: var(--hg-on-accent);
  --x-data: var(--hg-on-accent);
  --x-line: rgba(6, 6, 8, .2);
}

/* ---------- Kort: Card / Card light / Step ---------- */
.wp-block-group:is(.is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) {
  --x-bg: var(--hg-surface);
  --x-border: var(--hg-border);
  --x-fg: var(--hg-fg-muted);
  --x-heading: var(--hg-fg);
  --x-muted: var(--hg-fg-muted);
  --x-label: var(--hg-accent);
  --x-dot: var(--hg-accent);
  --x-link: var(--hg-accent);
  --x-data: var(--hg-accent);
  --x-line: var(--hg-divider);
  padding: 28px;
  border: 1px solid var(--x-border);
  border-radius: var(--radius-l);
  background: var(--x-bg);
  color: var(--x-fg);
}
.wp-block-group.is-style-hg-card-light {
  --x-bg: var(--hg-light-bg);
  --x-border: var(--hg-light-border);
  --x-fg: var(--hg-light-muted);
  --x-heading: var(--hg-light-fg);
  --x-muted: var(--hg-light-muted);
  --x-label: var(--hg-light-fg);
  --x-link: var(--hg-light-fg);
  --x-data: var(--hg-light-fg);
  --x-line: var(--hg-light-border);
}
/* Step: mörkt kort med gul överkant – för arbetsgång/processer */
.wp-block-group.is-style-hg-step {
  --x-bg: var(--hg-bg-alt);
  border-top: 3px solid var(--hg-accent);
}
/* Kort på alternerande sektion: lyft ett steg så det syns */
.is-style-hg-section-alt .wp-block-group.is-style-hg-step { --x-bg: var(--hg-surface); }

/* Kort som flexkolumn: jämnhöga i grid, länklista/läs mer i botten */
.wp-block-group:is(.is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) { display: flex; flex-direction: column; }
.wp-block-group:is(.is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) > :is(ul.is-style-hg-links, p.is-style-hg-more:last-child) { margin-block-start: auto; }

/* Kortens första/sista barn utan yttermarginal */
.wp-block-group:is(.is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) > :first-child { margin-top: 0; }
.wp-block-group:is(.is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) > :last-child  { margin-bottom: 0; }

/* ---------- Gemensam färgsättning inuti sektioner och kort ----------
   :where() håller styrkan låg och :not(.has-text-color) släpper igenom
   färger som väljs direkt på ett block i redigeraren. */
:where(.is-style-hg-section, .is-style-hg-section-alt, .is-style-hg-section-light, .is-style-hg-section-accent,
       .is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) :is(p, li):not(.has-text-color) { color: inherit; }
:where(.is-style-hg-section, .is-style-hg-section-alt, .is-style-hg-section-light, .is-style-hg-section-accent,
       .is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: var(--x-heading); }
:where(.is-style-hg-section, .is-style-hg-section-alt, .is-style-hg-section-light, .is-style-hg-section-accent,
       .is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) a:not(.has-text-color) { color: inherit; }
:where(.is-style-hg-section, .is-style-hg-section-alt, .is-style-hg-section-light, .is-style-hg-section-accent,
       .is-style-hg-card, .is-style-hg-card-light, .is-style-hg-step) p:not(.has-link-color) a:not(.has-text-color) { color: var(--x-link); }

/* ---------- Text: Eyebrow / Lead / Read more link / Data value ---------- */
p.is-style-hg-eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex; align-items: center; gap: 10px;
}
p.is-style-hg-eyebrow:not(.has-text-color) { color: var(--x-label, var(--hg-accent)); }
p.is-style-hg-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--x-dot, var(--hg-accent));
}
p.is-style-hg-lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 62ch; }
p.is-style-hg-lead:not(.has-text-color),
.wp-block-group p.is-style-hg-lead:not(.has-text-color) { color: var(--x-muted, var(--hg-fg-muted)); }
p.is-style-hg-more a,
.wp-block-group p.is-style-hg-more a {
  font-weight: 600; text-decoration: none;
  color: var(--x-link, var(--hg-accent));
}
p.is-style-hg-more a::after { content: " ›"; }
p.is-style-hg-more a:hover { text-decoration: underline; }
p.is-style-hg-data,
.wp-block-group p.is-style-hg-data { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
p.is-style-hg-data:not(.has-text-color),
.wp-block-group p.is-style-hg-data:not(.has-text-color) { color: var(--x-data, var(--hg-accent)); }

/* ---------- Listor: Link list / Tags ---------- */
ul.is-style-hg-links {
  list-style: none; margin-left: 0; padding: 12px 0 0;
  border-top: 1px solid var(--x-line, var(--hg-divider));
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px; font-weight: 500;
}
ul.is-style-hg-links a,
.wp-block-group ul.is-style-hg-links a { color: var(--x-link, var(--hg-accent)); text-decoration: none; }
ul.is-style-hg-links a:hover { text-decoration: underline; }

ul.is-style-hg-pills { list-style: none; margin-left: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.is-style-hg-pills li {
  border: 1px solid var(--x-line, var(--hg-border));
  border-radius: 999px; padding: 6px 16px; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
}
ul.is-style-hg-pills li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--x-dot, var(--hg-accent));
}

/* ---------- Knappar: Primary (standard) och Secondary – samma mått ---------- */
.wp-block-button .wp-block-button__link.wp-block-button__link {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-weight: 600; font-size: 16px; line-height: 1.3;
}
/* Primär: gul med mörk text */
.wp-block-button .wp-block-button__link.wp-block-button__link:not(.has-background) { background: var(--hg-accent); color: var(--hg-on-accent); }
.wp-block-button .wp-block-button__link.wp-block-button__link:not(.has-background):hover,
.wp-block-button .wp-block-button__link.wp-block-button__link:not(.has-background):focus { background: var(--hg-accent-hover); color: var(--hg-on-accent); }
/* Primär knapp på gul sektion blir mörk */
.is-style-hg-section-accent .wp-block-button:not(.is-style-hg-secondary):not(.is-style-outline) .wp-block-button__link.wp-block-button__link:not(.has-background) { background: var(--hg-bg); color: var(--hg-fg); }
.is-style-hg-section-accent .wp-block-button:not(.is-style-hg-secondary):not(.is-style-outline) .wp-block-button__link.wp-block-button__link:not(.has-background):hover,
.is-style-hg-section-accent .wp-block-button:not(.is-style-hg-secondary):not(.is-style-outline) .wp-block-button__link.wp-block-button__link:not(.has-background):focus { background: var(--hg-surface); color: var(--hg-fg); }

/* Sekundär: mörk platta med ram */
.wp-block-button.is-style-hg-secondary .wp-block-button__link.wp-block-button__link:not(.has-background) {
  background: var(--hg-surface);
  color: var(--hg-fg);
  border: 1px solid var(--hg-border);
}
.wp-block-button.is-style-hg-secondary .wp-block-button__link.wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-hg-secondary .wp-block-button__link.wp-block-button__link:not(.has-background):focus {
  background: var(--hg-surface);
  color: var(--hg-fg);
  border-color: var(--hg-accent);
}

/* ==========================================================================
   Knapp: Outline (WordPress inbyggda stil) – samma mått som övriga
   ========================================================================== */
.wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:not(.has-background) {
  background: transparent;
  color: var(--x-heading, var(--hg-fg));
  border: 1px solid currentColor;
  padding: 12px 26px;
}
.wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:not(.has-background):focus {
  background: var(--hg-accent);
  border-color: var(--hg-accent);
  color: var(--hg-on-accent);
}
/* På ljus och gul sektion: mörk kontur, fylls mörkt vid hover */
:is(.is-style-hg-section-light, .is-style-hg-section-accent, .is-style-hg-card-light) .wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:not(.has-background):hover,
:is(.is-style-hg-section-light, .is-style-hg-section-accent, .is-style-hg-card-light) .wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:not(.has-background):focus {
  background: var(--hg-bg);
  border-color: var(--hg-bg);
  color: var(--hg-fg);
}

/* ==========================================================================
   Textfärg på grupp/kolumn slår igenom på rubriker
   Väljer man Text color på en grupp (eller kolumn) ärver rubrikerna den,
   även inne i Section- och Card-stilarna. Färg satt direkt på en rubrik
   vinner fortfarande.
   ========================================================================== */
:is(.wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-cover__inner-container).has-text-color.has-text-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
:is(.wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-cover__inner-container).has-text-color.has-text-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) a {
  color: inherit;
}

/* Textstilar (Eyebrow, Lead, Data value) ärver också gruppens textfärg */
:is(.wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-cover__inner-container).has-text-color.has-text-color p:is(.is-style-hg-eyebrow, .is-style-hg-lead, .is-style-hg-data):not(.has-text-color) {
  color: inherit;
}