/*
Theme Name: ITEMA
Theme URI: https://itema.dk
Author: ITEMA
Description: ITEMA website 2.0. Block theme built on Website Kit from the static ITEMA handoff (2026-10-06).
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: itema
*/

/* ---------------------------------------------------------------------------
   Colours, type, spacing, buttons and links are tokens in theme.json.
   This file holds only what theme.json cannot express: grids, the hero and
   photo-bridge backgrounds, card geometry, breakpoints and motion.
   Source of the geometry: source/styles.css in the handoff. Class names are
   prefixed itema- so they never collide with core.
   --------------------------------------------------------------------------- */

/* --- Gutter (root padding) ----------------------------------------------- */
:root { --itema-gutter: var(--wp--custom--gutter--desktop, 48px); }
@media (max-width: 840px) { :root { --itema-gutter: var(--wp--custom--gutter--tablet, 24px); } }
@media (max-width: 560px) { :root { --itema-gutter: var(--wp--custom--gutter--mobile, 22px); } }

html { scroll-behavior: smooth; }

/* Sections butt against each other; the global block gap is for text, not
   for full-bleed bands. */
.wp-site-blocks > * + *,
.wp-block-post-content > * + * { margin-block-start: 0; }
[class*="itema-"], [class*="itema-"] *, [class*="itema-"] *::before, [class*="itema-"] *::after { box-sizing: border-box; }

/* Grid/flex containers: cancel the flow-layout top margin on their children. */
.itema-g > * { margin-block: 0; }

/* --- Focus ---------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--wp--preset--color--action); outline-offset: 5px; }
.is-dark :focus-visible,
.itema-hero :focus-visible,
.itema-photo-bridge :focus-visible,
.itema-footer :focus-visible { outline-color: var(--wp--preset--color--mint); }

/* --- Text primitives ------------------------------------------------------ */
.itema-eyebrow {
  font-size: var(--wp--preset--font-size--eyebrow);
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--wp--preset--spacing--40);
}
.itema-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; max-width: 720px; }
.itema-caption { font-size: 12px; line-height: 1.5; color: var(--wp--preset--color--muted); }
.itema-num { color: var(--wp--preset--color--action); font-size: 12px; letter-spacing: .1em; }
h1 em, h2 em { font-style: normal; color: var(--wp--preset--color--mint); }
.itema-text-link a,
.is-style-text-link .wp-block-button__link {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}
.itema-card__more { font-weight: 700; font-size: 13px; color: var(--wp--preset--color--action); }

/* --- Buttons: block styles registered in functions.php ------------------- */
.wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; transition: background-color var(--wp--custom--duration); }
.is-style-light .wp-block-button__link { background: #e7f3ef; color: #0c3436; }
.is-style-light .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: #0c3436; }
.is-style-text-link .wp-block-button__link,
.is-style-text-link .wp-block-button__link:hover {
  background: none; color: inherit; min-height: 0; border-radius: 0;
  padding: 0 0 5px;
}
.wp-block-buttons { gap: 28px; align-items: center; }

/* --- Sections ------------------------------------------------------------- */
.itema-section { padding-block: var(--wp--preset--spacing--80); }
.itema-section--tight-top { padding-top: 0; }
.is-dark { background: var(--wp--preset--color--dark); color: #eef8f5; }
.is-tint { background: var(--wp--preset--color--tint); }
.itema-page-hero { padding-top: var(--wp--preset--spacing--80); padding-bottom: 72px; }
.itema-page-hero h1 { max-width: 1100px; }
.itema-page-hero .itema-lead { max-width: 800px; }

.itema-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 48px !important; }
.itema-section-heading h2 { margin: 0; }
.itema-section-heading > p { max-width: 380px; color: var(--wp--preset--color--muted); }
.is-dark .itema-section-heading > p { color: #b7d0ca; }

.itema-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.itema-split--panel > :last-child { padding: 40px; background: var(--wp--preset--color--tint); border: 1px solid var(--wp--preset--color--line); }
.itema-split--panel h2 { font-size: clamp(2rem, 3vw, 3.2rem); }

/* --- Header --------------------------------------------------------------- */
.itema-header { background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--line); }
.itema-header__inner { min-height: 88px; gap: 32px; }
.itema-wordmark { margin: 0; min-width: 112px; }
.itema-wordmark a { color: var(--wp--preset--color--action); }
.itema-wordmark a::after { content: "."; color: #42847d; }
.itema-header .itema-nav { margin-inline: auto; }
.itema-header .itema-nav a { padding-block: 16px; }
.itema-header .itema-nav a:hover,
.itema-header .itema-nav .current-menu-item > a { color: var(--wp--preset--color--action); text-decoration: underline; text-underline-offset: 7px; }
.itema-header__actions { gap: 16px; font-size: 12px; font-weight: 700; }

/* --- Home hero ------------------------------------------------------------ */
/* Background is a fixed brand image. Editors change the copy, not the
   image - see DESIGN.md. */
.itema-hero {
  color: #f5faf8;
  background:
    linear-gradient(90deg, rgba(5,20,22,.94), rgba(5,20,22,.83) 42%, rgba(5,20,22,.15) 76%),
    url('assets/images/emma-hero-no-blazer.webp') center 44% / cover no-repeat;
}
.itema-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; min-height: 680px; }
.itema-hero__copy { padding-block: 96px; align-self: center; }
.itema-hero h1 { line-height: .98; margin-bottom: 32px; color: inherit; }
.itema-hero .itema-lead { max-width: 620px; margin-bottom: 32px; }
.itema-hero .itema-eyebrow { color: #b9d3cf; }
.itema-workflow { align-self: end; justify-self: end; width: min(320px, 100%); margin-bottom: 48px !important; border: 1px solid #688c86; background: #0c2b2e; padding: 24px; }
.itema-workflow .itema-eyebrow { color: #bedbd5; }
.itema-workflow__row { display: flex; gap: 16px; padding-block: 16px; border-bottom: 1px solid #476866; margin: 0 !important; }
.itema-workflow__row.is-selected { margin-inline: -24px !important; padding-inline: 24px; background: #1b504e; border: 0; }
.itema-workflow__num { color: var(--wp--preset--color--mint); font-size: 12px; font-weight: 700; }
.itema-workflow__text { font-size: 12px; color: #cee1dc; }
.itema-workflow__text strong { display: block; font-size: 17px; font-weight: 600; color: #f5faf8; margin-bottom: 6px; }
.itema-hero__caption { display: flex; justify-content: space-between; gap: 24px; font-size: 11px; color: #cde3dc; padding-bottom: 24px; }

/* --- Platform strip ------------------------------------------------------- */
.itema-platform { background: #153236; color: #dbeae6; padding-block: 24px; }
.itema-platform__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.itema-platform__label { font-size: 10px; letter-spacing: .13em; }
.itema-platform__row strong { font-size: 14px; font-weight: 600; }

/* --- Whole-card links (IntentLinks, ServiceRow) ---------------------------- */
/* The heading link is the only link; its ::after covers the card so the
   whole card is clickable while screen readers hear one link. */
.itema-card-link { position: relative; }
.itema-card-link h2 a::after,
.itema-card-link h3 a::after { content: ""; position: absolute; inset: 0; }
.itema-card-link:focus-within { outline: 3px solid var(--wp--preset--color--action); outline-offset: -3px; }
.itema-card-link a:focus-visible { outline: none; }

.itema-intent-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line); }
.itema-intent-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 32px; margin: 0 !important; background: var(--wp--preset--color--tint); border-bottom: 1px solid var(--wp--preset--color--line); border-right: 1px solid var(--wp--preset--color--line); }
.itema-intent-card:hover { background: #deece7; }
.itema-intent-card > * { grid-column: 2; margin: 0 !important; }
.itema-intent-card > .itema-num { grid-column: 1; grid-row: 1 / 4; }
.itema-intent-card h3 { font-size: 26px; font-family: var(--wp--preset--font-family--body); font-weight: 800; letter-spacing: -.04em; line-height: 1.25; }
.itema-intent-card h3 + p { margin: 16px 0 24px !important; max-width: 480px; }

/* --- Method rail ---------------------------------------------------------- */
.itema-rail { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #526c6e; margin-bottom: 40px !important; }
.itema-rail > article { min-height: 300px; border-right: 1px solid #526c6e; margin-right: 20px !important; padding: 24px 20px 0 0; display: flex; flex-direction: column; }
.itema-rail > article:last-child { border: 0; margin: 0 !important; }
.itema-rail > article > * { margin: 0; }
.itema-step-code { color: var(--wp--preset--color--mint); font-size: 11px; letter-spacing: .1em; }
.itema-rail h3 { font-size: 30px; margin: auto 0 16px !important; }
.itema-rail p:last-child { font-size: 14px; color: #bfd3cd; line-height: 1.6; }

/* --- Feature trio --------------------------------------------------------- */
.itema-feature-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.itema-feature { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--tint); display: flex; flex-direction: column; }
.itema-feature .wp-block-image { margin: 0; }
.itema-feature img { width: 100%; height: 220px; object-fit: cover; }
.itema-feature__body { padding: 28px; display: flex; flex-direction: column; flex: 1; margin: 0 !important; }
.itema-feature__body h3 { font-size: 36px; }
.itema-feature__body p:not([class]) { font-size: 15px; }
.itema-feature__body .itema-eyebrow { color: var(--wp--preset--color--action); }
.itema-feature__body .itema-card__more { border-top: 1px solid var(--wp--preset--color--line); padding-top: 16px; margin-top: auto; }
.itema-feature-grid + .itema-caption { margin-top: 16px; }

/* --- Photo bridge --------------------------------------------------------- */
.itema-photo-bridge {
  color: var(--wp--preset--color--white);
  padding-block: 80px;
  background: linear-gradient(90deg, rgba(9,30,31,.94), rgba(9,30,31,.35)), url('assets/images/emma-method.webp') center / cover;
}
.itema-photo-bridge h2 { max-width: 820px; }
.itema-photo-bridge .itema-caption { color: #e0eee8; }

/* --- Result note ---------------------------------------------------------- */
.itema-note { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--tint); padding: 32px; margin-block: 32px !important; }
.itema-note .itema-eyebrow { color: var(--wp--preset--color--action); }
.itema-note li { padding-block: 8px; }
.itema-note > p:last-child { font-size: 14px; margin-bottom: 0; }

/* --- Illustration figure -------------------------------------------------- */
.itema-photo { margin: 0; }
.itema-photo img { width: 100%; height: 440px; object-fit: cover; object-position: center 43%; }
.itema-photo figcaption { max-width: 700px; }

/* --- Service index -------------------------------------------------------- */
.itema-service-row { display: grid; grid-template-columns: 145px 1.2fr .8fr 20px; gap: 32px; padding-block: 32px; border-top: 1px solid var(--wp--preset--color--line); align-items: center; }
.itema-service-row:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.itema-service-row::after { content: "↗"; font-weight: 700; }
.itema-service-row h2 { font-size: clamp(2rem, 3.2vw, 3.5rem); margin: 0; }
.itema-service-row p:not(.itema-num) { color: var(--wp--preset--color--muted); }
.itema-service-row:hover h2 { text-decoration: underline; text-underline-offset: 7px; }

/* --- Task rows / FAQ / related ------------------------------------------- */
.itema-task-row { display: flex; gap: 24px; border-top: 1px solid var(--wp--preset--color--line); padding-block: 32px; }
.itema-task-row p:not(.itema-num) { margin: 0; }
.itema-faq { max-width: 1000px; }
.itema-faq h2 { font-size: clamp(2rem, 3.4vw, 3.6rem); }
.itema-related { display: flex; flex-wrap: wrap; gap: 0 24px; }
.itema-related a { display: inline-block; border-bottom: 1px solid var(--wp--preset--color--line); font-weight: 700; margin-bottom: 16px; }

/* --- Contact -------------------------------------------------------------- */
.itema-address > * + * { margin-top: 0 !important; }
.itema-contact-number { font-family: var(--wp--preset--font-family--body); font-size: clamp(2.3rem, 4.3vw, 4.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.2; margin-block: 24px !important; }
.itema-split--panel li { padding-block: 8px; }

/* --- Team ----------------------------------------------------------------- */
.itema-team-row { display: grid; grid-template-columns: 80px 1.2fr 1fr; gap: 24px; align-items: baseline; border-top: 1px solid var(--wp--preset--color--line); padding-block: 32px; }
.itema-team-row h2 { font-size: 30px; margin: 0; }
.itema-team-row p:not(.itema-num) { color: var(--wp--preset--color--muted); }

/* --- Prose ---------------------------------------------------------------- */
.itema-prose { max-width: 900px; }
.itema-prose h2 { font-size: 32px; margin-top: 48px; }

/* --- Footer --------------------------------------------------------------- */
.itema-footer { background: var(--wp--preset--color--footer); color: #f0f9f5; }
.itema-footer__invite { padding-block: 80px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.itema-footer__invite h2 { margin: 0; }
.itema-footer .itema-wordmark a { color: #d9f5ed; }
.itema-footer .itema-wordmark a::after { color: #a8d9ce; }
.itema-footer__links { border-top: 1px solid #567575; padding-block: 40px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; font-size: 14px; }
.itema-footer__links a { text-decoration: underline; text-underline-offset: 4px; }
.itema-footer__links .itema-wordmark a { text-decoration: none; }
.itema-footer__links p { margin: 0 0 12px; }
.itema-footer__base { border-top: 1px solid #567575; padding-block: 24px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; }

/* --- 404 ------------------------------------------------------------------ */
.itema-404 { padding-block: 96px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1150px) {
  .itema-header__inner { flex-wrap: wrap !important; padding-block: 16px; gap: 20px; }
  .itema-header .itema-nav { order: 3; width: 100%; justify-content: center; }
  .itema-header__actions { margin-left: auto; }
  .itema-rail { grid-template-columns: repeat(3, 1fr); gap: 32px 0; }
  .itema-rail > article { min-height: 260px; }
}
@media (max-width: 840px) {
  .itema-section { padding-block: 64px; }
  .itema-section--tight-top { padding-top: 0; }
  .itema-page-hero { padding-top: 64px; }
  .itema-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .itema-hero__copy { padding-block: 64px 32px; }
  .itema-workflow { margin-bottom: 32px !important; }
  .itema-hero__caption { flex-direction: column; gap: 8px; }
  .itema-hero { background-position: 0 0, 65% center; }
  .itema-section-heading { display: block; }
  .itema-section-heading > :last-child { margin-top: 24px !important; }
  .itema-feature-grid { grid-template-columns: 1fr; }
  .itema-feature { display: grid; grid-template-columns: 1fr 1fr; }
  .itema-feature img { height: 100%; min-height: 280px; }
  .itema-feature__body h3 { font-size: 26px; }
  .itema-split { grid-template-columns: 1fr; gap: 32px; }
  .itema-service-row { grid-template-columns: 80px 1fr 20px; gap: 16px; }
  .itema-service-row p:not(.itema-num) { grid-column: 2; }
  .itema-service-row::after { grid-column: 3; grid-row: 1; }
  .itema-photo img { height: 340px; }
  .itema-footer__links { grid-template-columns: 1fr 1fr; }
  .itema-footer__links > :first-child { grid-column: 1 / -1; }
  .itema-footer__base { flex-wrap: wrap; }
  .itema-team-row { grid-template-columns: 32px 1fr; }
  .itema-team-row p:not(.itema-num) { grid-column: 2; }
}
@media (max-width: 560px) {
  h1 { font-size: clamp(3.2rem, 13vw, 4.3rem) !important; }
  .itema-wordmark { font-size: 28px !important; min-width: 90px; }
  .itema-header__actions .wp-block-button__link { padding: 10px 14px; min-height: 44px; font-size: 12px; }
  .itema-hero { background: linear-gradient(180deg, rgba(5,20,22,.91), rgba(5,20,22,.72)), url('assets/images/emma-hero-no-blazer.webp') 63% center / cover; }
  .itema-hero__copy { padding-top: 56px; }
  .itema-workflow { width: 100%; }
  .itema-intent-grid { grid-template-columns: 1fr; }
  .itema-intent-card { padding: 24px; }
  .itema-intent-card h3 { font-size: 23px; }
  .itema-rail { grid-template-columns: 1fr; gap: 0; }
  .itema-rail > article { min-height: 0; border-right: 0; border-bottom: 1px solid #526c6e; padding: 24px 0; margin: 0 !important; }
  .itema-rail h3 { margin-top: 24px !important; }
  .itema-feature { display: block; }
  .itema-feature img { height: 230px; min-height: 0; }
  .itema-feature__body { padding: 24px; }
  .itema-feature__body h3 { font-size: 32px; }
  .itema-platform__label { width: 100%; }
  .itema-photo-bridge { padding-block: 64px; }
  .itema-note { padding: 24px; }
  .itema-split--panel > :last-child { padding: 24px; }
  .itema-footer__invite { display: block; padding-block: 64px; }
  .itema-footer__invite .wp-block-buttons { margin-top: 24px; }
  .itema-footer__links { grid-template-columns: 1fr; gap: 16px; }
  .itema-footer__links > :first-child { grid-column: auto; }
  .itema-footer__base { display: block; }
  .itema-footer__base > * { margin-top: 16px !important; }
  .itema-service-row { grid-template-columns: 1fr 24px; }
  .itema-service-row > .itema-num { grid-column: 1 / -1; }
  .itema-service-row p:not(.itema-num) { grid-column: 1; }
  .itema-service-row::after { grid-column: 2; grid-row: 2; }
  .itema-service-row h2 { font-size: 32px; }
  .itema-photo img { height: 260px; }
  .itema-team-row h2 { font-size: 24px; }
  .itema-related { display: block; }
  .itema-related a { display: block; padding-block: 12px; margin: 0; }
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}