/*
Theme Name: Bureau Toimitilat
Theme URI: https://www.bref.fi
Author: Bureau Real Estate Finland Oy
Description: Räätälöity hakukoneoptimoitu teema toimitilavälitysyrityksen verkkosivuille. Sisältää valmiit pohjat etusivulle, vapaiden toimitilojen hakuun (paginoituna), kohdesivulle, blogille, palveluille, referensseille ja meistä-sivulle.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bureau
Tags: business, blog, seo, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/

/* =====================================================================
   BUREAU DESIGN SYSTEM — design tokens (brand v1.0)
   ---------------------------------------------------------------------
   Lähde: brandi/brand-guide.pdf, kohta 8.
   Pääpaletti: Bureau Navy #0D1F3F + Bureau Cyan #00B6ED + Soft Sky.
   Fontti: Geist (Google Fonts).

   Kaikki värit, välistykset, typografia ja efektit yhden lähteen takaa.
   Komponenttitasoiset tyylit asuvat assets/css/main.css -tiedostossa,
   joka kuluttaa näitä muuttujia. Vanhat alias-nimet (--color-dark,
   --color-accent, --color-ink-2 jne.) säilyvät, jotta tokeneja kuluttava
   main.css toimii ilman selektorimuutoksia.
   ===================================================================== */
:root {
  /* -------- Brändipaletti (brand guide kohta 2) -------- */
  --color-navy:  #0D1F3F; /* primary — sectionien tausta, otsikot */
  --color-cyan:  #00B6ED; /* accent — viivat, ikonit, eyebrowt, hover */
  --color-ink:   #1D1D1B; /* leipätekstin oletusväri */
  --color-white: #FFFFFF;
  --color-soft:  #EAF5FD; /* Soft Sky — vaihtelevat sectionit, callout */
  --color-pink:  #DC3089; /* Pink Spot — erottuva CTA, badget (max 1 / sivu) */

  /* -------- Neutraalit (alias-nimet, joita main.css käyttää) -------- */
  --color-bg:        #FFFFFF; /* sivun perustausta */
  --color-surface:   #FFFFFF; /* kortit, hakupalkki, lomakkeet */
  --color-surface-2: var(--color-soft); /* alternate section, upotetut laatikot */
  --color-surface-3: #D7E9F6; /* hover / divider Soft Sky -tummennus */

  --color-ink-2:     #1D1D1B; /* leipäteksti (sama kuin --color-ink) */
  --color-ink-3:     #5B6470; /* tertiäärinen teksti */
  --color-muted:     #5B6470; /* placeholderit, metat (text-muted) */
  --color-faint:     #B5B6BB; /* micro-labels, disabled */
  --color-line:      #E5E7EB; /* kortit, kevyet rajat */
  --color-line-soft: #EFF3F8; /* sectionien jakajat */

  /* -------- Tumma (hero, footer, nav) — Bureau Navy -------- */
  --color-dark:   var(--color-navy);
  --color-dark-2: #14264C; /* hero-gradientin vaaleampi pää */
  --color-dark-3: #08152D; /* footer (hieman tummempi navy) */

  /* -------- Aksentti — Bureau Cyan -------- */
  --color-accent:       var(--color-cyan);
  --color-accent-ink:   var(--color-navy); /* text-on-accent (kontrasti) */
  --color-accent-soft:  var(--color-soft); /* pale background */
  --color-accent-hover: #0098C9;

  /* -------- Status (brand guide kohta 2) -------- */
  --color-success:     #10B981;
  --color-success-bg:  #E6FAF3;
  --color-success-ink: #0E9C6E;
  --color-warning:     #F97316;
  --color-warn-bg:     #FFF1E6;
  --color-warn-ink:    #BC5800;
  --color-error:       #EF4444;
  --color-danger-bg:   #FEEBEB;
  --color-danger-ink:  #B82828;

  /* -------- Radius (brand guide: 4 / 8 / 16 / pill) -------- */
  --radius-xs:  4px;  /* brand sm */
  --radius-sm:  6px;  /* lomakekentät (brand: input radius 6) */
  --radius-md:  8px;  /* napit, kortit (brand base) */
  --radius-lg:  16px; /* isot pinnat */
  --radius-xl:  24px; /* hero, modaalit */
  --radius-pill: 999px;

  /* -------- Varjot (navy alpha) -------- */
  --shadow-xs:   0 1px 2px rgba(13,31,63,0.04);
  --shadow-sm:   0 1px 3px rgba(13,31,63,0.06), 0 1px 2px rgba(13,31,63,0.04);
  --shadow-md:   0 4px 12px rgba(13,31,63,0.08), 0 2px 4px rgba(13,31,63,0.04);
  --shadow-lg:   0 12px 32px rgba(13,31,63,0.12), 0 4px 8px rgba(13,31,63,0.05);
  --shadow-focus: 0 0 0 2px var(--color-cyan); /* brand: focus = cyan 2px + offset 2px */

  /* -------- Typografia (brand: Geist yksin) -------- */
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Tyypografinen skaala — brand guide kohta 3 antaa selkeät arvot.
     Käytetään clamp()-yksiköitä, jotta mobiili pysyy mukana.
     Display 32→42, H1 26→32, H2 20→24, H3 18, lede 18, body 16, small 14. */
  --fs-display: clamp(2rem,    3vw + 0.8rem, 2.625rem); /* 32 → 42 */
  --fs-h1:      clamp(1.625rem, 2vw + 0.6rem, 2rem);    /* 26 → 32 */
  --fs-h2:      clamp(1.25rem,  1vw + 0.8rem, 1.5rem);  /* 20 → 24 */
  --fs-h3:      1.125rem; /* 18 */
  --fs-lg:      1.125rem; /* 18 — lede */
  --fs-md:      1rem;     /* 16 — body */
  --fs-sm:      0.875rem; /* 14 — small */
  --fs-xs:      0.8125rem;/* 13 */
  --fs-2xs:     0.75rem;  /* 12 — eyebrow */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.18em; /* brand eyebrow +0.18em */

  /* -------- Spacing — 8 px-asteikko -------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* -------- Layout (brand: container 1200, content 65ch) -------- */
  --container:        1200px;
  --container-narrow: 720px;  /* prose-leveys (~65ch) */
  --container-article: 920px; /* artikkelin ja prose-sivujen tekstileveys */
  --container-wide:   1320px; /* media-text-blokit */
  --content-max:      65ch;   /* leipäteksti */
  --hero-text-max:    14ch;   /* hero H1 / display */
  /* --gutter: täysleveiden sectionien sisäpadding, joka työntää sisällön
   * --container-leveyteen leveillä näytöillä. ÄLÄ käytä elementeillä joilla
   * on max-width pienempi kuin --container — silloin gutter syö
   * sisältötilan ja teksti murskautuu. Käytä silloin --gutter-inset. */
  --gutter: max(var(--space-5), calc((100% - var(--container)) / 2));
  /* --gutter-inset: rajattu, leveydestä riippumaton sisäpadding, jota voi
   * käyttää max-width-rajatuissa konteissa ilman puikko-bugia. */
  --gutter-inset: clamp(var(--space-4), 4vw, var(--space-6));
  --header-h: 72px;

  /* -------- Transitions -------- */
  --easing: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 120ms;
  --t-med:  200ms;
  --t-slow: 320ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  background: var(--color-bg);
  color: var(--color-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--lh-normal);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  text-rendering: optimizeLegibility;
}

img:not(.wp-block-cover__image-background), svg, video { max-width: 100%; height: auto; display: block; }

/* Brand guide: leipätekstilinkki = navy (kontrasti valkoista vasten 15.6:1).
   Cyaniä ei käytetä body-linkin perusvärinä, vain hover-tilana. */
a { color: var(--color-navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--t-fast) var(--easing); }
a:hover { color: var(--color-cyan); }

button { font: inherit; cursor: pointer; }

/* Yhtenäinen focus-rengas kaikille interaktioille. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-accent-soft); color: var(--color-accent-ink); }