/*
Theme Name: ODRIKA (Hello Elementor Child)
Template: hello-elementor
Description: ODRIKA site theme, built on Hello Elementor for use with Elementor Pro. Design tokens ported from the Rotterdam agri/farming template (green skin).
Version: 1.1.0
*/

:root {
  --odrika-primary: #5b8f17;      /* Rotterdam green-theme accent */
  --odrika-primary-light: #85c977; /* secondary green accent used across the template */
  --odrika-accent-yellow: #f1cf69;
  --odrika-heading: #222222;
  --odrika-text: #777777;
  --odrika-border: #ececec;
  --odrika-dark-bg: #222222;
  --odrika-font-heading: 'Roboto Slab', serif;
  --odrika-font-script: 'Grand Hotel', cursive;
  --odrika-font-body: 'Roboto', sans-serif;
}

body {
  color: var(--odrika-text);
  font-family: var(--odrika-font-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--odrika-heading);
  font-family: var(--odrika-font-heading);
}

a {
  color: var(--odrika-primary);
}

/* ---------------------------------------------------------------
   Transparent overlay header — the whole header (top bar + nav)
   floats over the hero/page-title image instead of pushing it down,
   matching the Rotterdam "Header Style Three" look.
   --------------------------------------------------------------- */
.elementor-location-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.site-header-transparent {
  background: transparent !important;
}

.site-header-transparent .elementor-nav-menu .elementor-item {
  color: #ffffff;
}

.site-header-transparent .elementor-nav-menu .elementor-item:hover,
.site-header-transparent .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--odrika-primary-light);
}

/* ---------------------------------------------------------------
   Hero slide typography — layered script/eyebrow + big title + tag
   row, built as raw HTML inside the Slides widget's heading/description
   fields (matching the Revolution Slider captions in the source template).
   --------------------------------------------------------------- */
.hero-eyebrow {
  display: block;
  font-family: var(--odrika-font-script);
  font-size: 2.25rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.hero-eyebrow .accent {
  color: var(--odrika-primary-light);
}

.hero-title {
  display: block;
  font-family: var(--odrika-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
}

.hero-tagrow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 1rem;
  color: #ffffff;
}

.hero-tagrow li:not(:last-child)::after {
  content: '\276F';
  margin-left: 0.6rem;
  color: var(--odrika-primary-light);
}