/*!
 * Theme Name: HTL Blocks
 * Theme URI: https://htlterveys.fi
 * Description: Block-theme rebuild of the HTL site (HTL – Terveytesi jäljillä). Design tokens live in theme.json; this sheet only carries rules that block attributes cannot express.
 * Author: WP-SEO-AI Agency
 * Version: 1.0.0
 * Requires at least: 7.1
 * Tested up to: 7.1
 * Requires PHP: 8.2
 * License: GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: htl-blocks
 */

/* ---------------------------------------------------------------------------
 * 1. Gutters
 * Desktop keeps the theme.json token (4vw); phones use the source's 6vw.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --wp--custom--gutter: 6vw;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Fluid type on phones (portrait), mirroring the source's mobile branch.
 * Bare elements are raised to (0,1,1) to beat theme.json's :root :where(...)
 * rules; preset classes are restated so a scaled block keeps its own size.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) and (orientation: portrait) {
  :root h1,
  :root h2 {
    font-size: calc(1.5 * .012 * min(100vh, 900px) + 1rem);
  }
  :root h3 {
    font-size: calc(1.1 * .012 * min(100vh, 900px) + 1rem);
  }
  :root h4 {
    font-size: calc(0.4 * .012 * min(100vh, 900px) + 1rem);
  }
  :root h5,
  :root h6 {
    font-size: calc(0.1 * .012 * min(100vh, 900px) + 1rem);
  }
  :root p {
    font-size: calc(0.1 * .012 * min(100vh, 900px) + 1rem);
  }
  :root .has-display-font-size {
    font-size: max(min(calc((2.5 - 1) * 1.2vw + 1rem), max(calc((2.5 - 1) * 0.012 * 1400px + 1rem), calc(2.5 * 1rem))), calc(1.5 * .012 * min(100vh, 900px) + 1rem));
  }
  :root .has-section-font-size {
    font-size: max(min(calc((2.1 - 1) * 1.2vw + 1rem), max(calc((2.1 - 1) * 0.012 * 1400px + 1rem), calc(2.1 * 1rem))), calc(1.1 * .012 * min(100vh, 900px) + 1rem));
  }
  :root .has-subheading-font-size {
    font-size: max(min(calc((1.4 - 1) * 1.2vw + 1rem), max(calc((1.4 - 1) * 0.012 * 1400px + 1rem), calc(1.4 * 1rem))), calc(0.4 * .012 * min(100vh, 900px) + 1rem));
  }
  :root .has-body-font-size {
    font-size: max(min(calc((1.1 - 1) * 1.2vw + 1rem), max(calc((1.1 - 1) * 0.012 * 1400px + 1rem), calc(1.1 * 1rem))), calc(0.1 * .012 * min(100vh, 900px) + 1rem));
  }
  :root .has-small-font-size {
    font-size: max(min(calc((0.9 - 1) * 1.2vw + 1rem), max(calc((0.9 - 1) * 0.012 * 1400px + 1rem), calc(0.9 * 1rem))), calc(-0.1 * .012 * min(100vh, 900px) + 1rem));
  }
  :root .wp-block-button__link {
    font-size: calc(-0.2 * .012 * min(100vh, 900px) + 1rem);
  }
}

/* ---------------------------------------------------------------------------
 * 3. Section text themes
 * Headings carry the brand green from theme.json; on dark surfaces the blocks
 * themselves set textColor (source section themes), so no inheritance tricks
 * are needed here. Paragraphs inherit their group's colour.
 * ------------------------------------------------------------------------ */

/* Paragraphs inside coloured containers follow the surface colour. */
.has-text-color > .wp-block-paragraph {
  color: inherit;
}

/* ---------------------------------------------------------------------------
 * 4. Buttons
 * Source: content buttons are 68px tall boxes (59px on phones) with the label
 * optically centred; the header CTA opts out via its own attributes.
 * ------------------------------------------------------------------------ */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .wp-block-button__link {
    min-height: 59px;
  }
}

/* Source buttons fill their grid cell (a wrapping group holds the measure). */
.wp-block-buttons > .wp-block-button {
  flex-grow: 1;
}

.wp-block-buttons > .wp-block-button > .wp-block-button__link {
  width: 100%;
}

/* The header CTA hugs its label instead. */
header.wp-block-template-part .wp-block-buttons > .wp-block-button {
  flex-grow: 0;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--wp--preset--color--green-ink);
}

/* Outline buttons (source secondary): 1px green edge, transparent face. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--green);
  border-radius: 10px;
  background-color: transparent;
  color: var(--wp--preset--color--green);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
 * 5. Header
 * Solid white bar, 85px on desktop; the source pins it while scrolling.
 * ------------------------------------------------------------------------ */
.wp-block-template-part > .wp-block-group.alignfull:first-child {
  z-index: 100;
}

header.wp-block-group .wp-block-site-logo img {
  display: block;
}

/* Navigation: source rhythm — 17.68px/600 links with ~2rem spacing. */
header .wp-block-navigation .wp-block-navigation-item {
  padding: 0.11rem 0;
}

/* The header CTA is a compact 50px control in the source, not a 68px box. */
header.wp-block-template-part .wp-block-button__link {
  min-height: 0;
  padding: 1rem 1.3rem;
}

header .wp-block-navigation .wp-block-navigation-item__content {
  padding: 0;
}

header .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Mobile overlay: white sheet, stacked green links (source menu overlay). */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--green-ink);
}

/* ---------------------------------------------------------------------------
 * 6. Accordion
 * Source: hairline-free rows, 30px vertical rhythm, Nunito 600 green titles,
 * plus/minus icon on the right.
 * ------------------------------------------------------------------------ */
.wp-block-accordion .wp-block-accordion-heading__toggle {
  padding: 1.875rem 0;
  align-items: center;
  gap: 1rem;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-title {
  font-size: inherit;
  font-weight: 600;
  color: var(--wp--preset--color--green);
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--preset--color--green);
}

/* Replace the core chevron with the source's plus/minus glyph. */
.wp-block-accordion .wp-block-accordion-heading__toggle-icon svg {
  display: none;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background-color: currentColor;
  transition: transform .2s;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
  transform: rotate(90deg);
}

.wp-block-accordion [aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::after {
  transform: rotate(0deg);
}

/* Accordions that ship the source's hairlines (top edge and closing edge). */
.wp-block-accordion.is-style-divided .wp-block-accordion-item {
  border-top: 1px solid var(--wp--preset--color--ink);
}

.wp-block-accordion.is-style-divided .wp-block-accordion-item:last-child {
  border-bottom: 1px solid var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
 * 7. Footer
 * Green slab; links are underlined there (source footer treatment).
 * ------------------------------------------------------------------------ */
footer.wp-block-group .wp-block-paragraph a {
  text-decoration: underline;
}

footer.wp-block-group .wp-block-paragraph {
  margin: 0;
  line-height: 1.5;
}

footer.wp-block-group h4 {
  margin: 0 0 1.2rem;
}

/* ---------------------------------------------------------------------------
 * 8. Misc
 * ------------------------------------------------------------------------ */
/* Finnish compounds break cleanly instead of mid-word. */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  hyphens: auto;
}

/* Cards and images: keep media flush inside their group. */
.wp-block-image img {
  display: block;
}

/* Search form: match the source's plain input row. */
.wp-block-search__input {
  border: 0 solid var(--wp--preset--color--base);
  border-bottom-width: 1px;
  border-radius: 0;
  background: transparent;
  padding: .5rem 0;
}