/* =========================================================================
   Rokamat — Colors & Type
   Source: WordPress Divi Child-Theme (rokamat-de), Logo-Rokamat-RGB.svg
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Original site: Exo2 family (Divi default) + Roboto (user brief). */
@font-face { font-family: 'Exo 2'; font-weight: 200; src: url('fonts/Exo2-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Exo 2'; font-weight: 300; src: url('fonts/Exo2-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Exo 2'; font-weight: 400; src: url('fonts/Exo2-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Exo 2'; font-weight: 700; src: url('fonts/Exo2-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'ElegantIcons'; src: url('fonts/ElegantIcons.ttf') format('truetype'); }

/* Roboto via Google Fonts — @import kept at root so consumers can copy this file. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --rok-orange:        #ea5b0a;   /* primary brand — CTAs, accents, logo */
  --rok-orange-hover:  #c94d07;   /* darker for hover */
  --rok-orange-tint:   #fbd2b5;   /* soft tint — highlights, list backgrounds */
  --rok-orange-alpha:  hsla(22,96%,50%,0.85); /* over-image tint */

  /* ---------- Neutrals (from Child-Theme CSS) ---------- */
  --rok-ink:           #000000;   /* headings */
  --rok-navy:          #3d444e;   /* dark nav hover, secondary text (from logo tagline) */
  --rok-gray-700:      #808080;   /* body text, de-emphasised labels */
  --rok-gray-500:      #c5c5c5;   /* footer links */
  --rok-gray-300:      #d9d9d9;   /* table alt rows, flipbox child bg */
  --rok-gray-200:      #e6e6e6;   /* borders, dividers */
  --rok-gray-150:      #ededed;   /* breadcrumbs background */
  --rok-gray-100:      #ebebeb;   /* zebra rows */
  --rok-white:         #ffffff;

  /* ---------- Semantic ---------- */
  --rok-bg:            var(--rok-white);
  --rok-fg:            var(--rok-ink);
  --rok-fg-muted:      var(--rok-gray-700);
  --rok-border:        var(--rok-gray-200);
  --rok-border-strong: var(--rok-gray-300);
  --rok-accent:        var(--rok-orange);
  --rok-accent-fg:     var(--rok-white);
  --rok-link:          var(--rok-orange);
  --rok-link-hover:    var(--rok-orange-hover);
  --rok-nav-hover-bg:  var(--rok-navy);
  --rok-nav-hover-fg:  var(--rok-white);

  /* ---------- Typography ---------- */
  /* Stacks: the site uses a mix of Exo 2 (Divi heading) and Roboto body.
     Brief asks for Roboto — we keep Exo 2 for big display (logo/hero) and
     use Roboto as the primary UI/body face. */
  --rok-font-display:  'Exo 2', 'Roboto', system-ui, sans-serif;
  --rok-font-body:     'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;
  --rok-font-icons:    'ElegantIcons';

  /* Type scale — modular, minimalist, clear hierarchy */
  --rok-fs-xs:   12px;
  --rok-fs-sm:   14px;
  --rok-fs-base: 16px;
  --rok-fs-md:   18px;
  --rok-fs-lg:   22px;
  --rok-fs-xl:   28px;
  --rok-fs-2xl:  36px;
  --rok-fs-3xl:  48px;
  --rok-fs-4xl:  64px;

  --rok-lh-tight: 1.15;
  --rok-lh-snug:  1.3;
  --rok-lh-body:  1.6;

  --rok-fw-light:   300;
  --rok-fw-regular: 400;
  --rok-fw-medium:  500;
  --rok-fw-bold:    700;

  --rok-tracking-wide: 0.04em;
  --rok-tracking-hero: 0.02em;

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

  /* Divi row/container rule: --rok-container-w 90% of viewport, max 1200 */
  --rok-container-max: 1200px;
  --rok-container-pad: 5%;

  /* ---------- Radii & Borders ---------- */
  --rok-radius-0: 0;         /* site style is sharp, near-zero radius */
  --rok-radius-1: 2px;
  --rok-radius-2: 4px;
  --rok-border-w: 1px;
  --rok-border-accent-w: 2px; /* used on sidebar menu items */

  /* ---------- Shadows ---------- */
  --rok-shadow-none: 0 0 0 rgba(0,0,0,0);   /* Child-Theme explicitly disables header shadow */
  --rok-shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --rok-shadow-sm:   0 2px 6px rgba(0,0,0,.06);
  --rok-shadow-md:   0 6px 18px rgba(0,0,0,.08);
  --rok-shadow-lg:   0 16px 40px rgba(0,0,0,.12);

  /* ---------- Motion ---------- */
  --rok-ease:       cubic-bezier(.2,.7,.2,1);
  --rok-dur-fast:   120ms;
  --rok-dur-base:   200ms;
  --rok-dur-slow:   360ms;
}

/* =========================================================================
   Semantic element defaults
   ========================================================================= */
html { font-size: var(--rok-fs-base); }
body {
  font-family: var(--rok-font-body);
  font-weight: var(--rok-fw-regular);
  color: var(--rok-fg);
  background: var(--rok-bg);
  line-height: var(--rok-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rok-font-display);
  font-weight: var(--rok-fw-bold);
  color: var(--rok-fg);
  line-height: var(--rok-lh-tight);
  margin: 0 0 var(--rok-space-4);
  letter-spacing: var(--rok-tracking-hero);
}

h1 { font-size: clamp(var(--rok-fs-2xl), 4vw, var(--rok-fs-4xl)); font-weight: var(--rok-fw-light); }
h2 { font-size: var(--rok-fs-2xl); font-weight: var(--rok-fw-light); }
h3 { font-size: var(--rok-fs-xl); }
h4 { font-size: var(--rok-fs-lg); }
h5 { font-size: var(--rok-fs-md); text-transform: uppercase; letter-spacing: var(--rok-tracking-wide); }
h6 { font-size: var(--rok-fs-sm); text-transform: uppercase; letter-spacing: var(--rok-tracking-wide); color: var(--rok-fg-muted); }

p  { margin: 0 0 var(--rok-space-4); color: var(--rok-fg); }
small { font-size: var(--rok-fs-sm); color: var(--rok-fg-muted); }

a { color: var(--rok-link); text-decoration: none; transition: color var(--rok-dur-fast) var(--rok-ease); }
a:hover { color: var(--rok-link-hover); }

hr { border: 0; border-top: var(--rok-border-w) solid var(--rok-border); margin: var(--rok-space-6) 0; }

code, pre { font-family: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace; font-size: var(--rok-fs-sm); }

/* Utility: brand "underline below active nav" */
.rok-nav-active::before {
  content: "";
  display: block;
  border-bottom: 2px solid var(--rok-ink);
  width: 100%;
  position: absolute;
  margin-top: -12px;
}