/*
Theme Name:  Luomatec
Theme URI:   https://luomatec.fi
Description: Child theme of Hello Elementor for Luomatec Oy. Holds the small set of helper styles the Elementor layout relies on (slanted cards, orange rule, form, print). Colours and fonts live in the Elementor site settings (Kit).
Author:      Kasvu Technologies
Author URI:  https://kasvutech.fi
Template:    hello-elementor
Version:     1.1.1
Requires PHP: 7.4
Text Domain: luomatec
*/

/* ---------------------------------------------------------------------------
   Design tokens. The Elementor Kit sets the same values as global colours; these
   variables let plain CSS (form, helpers) use them without duplicating hex codes.
--------------------------------------------------------------------------- */
:root {
  --lt-orange: #eb6209;
  --lt-orange-dark: #c94f03;
  --lt-charcoal: #1c1c1c;
  --lt-graphite: #2b2b2b;
  --lt-grey: #f2f2f2;
  --lt-line: rgba(28, 28, 28, 0.12);
  --lt-text: #242424;
  --lt-muted: #6b6b6b;
  --lt-font-head: "Teko", sans-serif;
  --lt-font-body: "Montserrat", sans-serif;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* Product cards: photo fills the card width with a fixed 4:3 crop */
.lt-card .elementor-image-box-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Long Finnish compound words in big headings must not run out of their column
   (phones, but also the narrower columns and cards on tablets). */
.elementor-heading-title, .elementor-icon-box-title, .elementor-image-box-title {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Anchor targets should not hide under the header */
[id] { scroll-margin-top: 96px; }

/* Readable line length: a paragraph that sits directly in a section (not in a
   column or card) stops at ~85 characters instead of spanning all 1240px. */
.e-con-boxed > .e-con-inner > .elementor-widget-text-editor { max-width: 820px; }

/* Keyboard focus: the header plugin and Elementor switch the outline off, so give
   links, buttons and the menu toggle a visible ring on any background. */
a:focus-visible,
.hfe-nav-menu__toggle:focus-visible,
.hfe-nav-menu__toggle:focus {
  outline: 3px solid var(--lt-orange);
  outline-offset: 3px;
}
.elementor-button:focus-visible,
.lt-form__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--lt-charcoal);
}

/* ---------------------------------------------------------------------------
   Helper classes. Put them in Elementor → Advanced → CSS Classes.
--------------------------------------------------------------------------- */

/* Slanted card (Veslatec-style parallelogram). Straight edges on phones.
   A fixed 22px slant (not a percentage) so it never cuts into the 28px card padding
   when the card is wide, e.g. two-up on a tablet. */
.lt-slant {
  clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
@media (max-width: 767px) {
  .lt-slant { clip-path: none; }
}

/* Short orange rule above a heading */
.lt-rule > .elementor-widget-container::before,
.lt-rule.elementor-widget-heading .elementor-heading-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 0 0 14px;
  background: var(--lt-orange);
}
.lt-rule.lt-rule--center .elementor-heading-title::before { margin-left: auto; margin-right: auto; }

/* Thin orange line along the top of a section */
.lt-stripe { border-top: 4px solid var(--lt-orange); }

/* Card: white box with a hairline, lifts a little on hover */
.lt-card {
  background: #fff;
  border: 1px solid var(--lt-line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(28, 28, 28, .10);
  border-color: rgba(235, 98, 9, .45);
}

/* Linked card titles: no underline, orange on hover */
.elementor-icon-box-title a,
.elementor-image-box-title a { text-decoration: none; color: inherit; }
.lt-card:hover .elementor-icon-box-title a,
.lt-card:hover .elementor-image-box-title a { color: var(--lt-orange); }
.lt-card--dark .elementor-icon-box-title a { color: #fff; }
.lt-card--dark:hover .elementor-icon-box-title a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Dark card on charcoal sections */
.lt-card--dark { background: var(--lt-graphite); border-color: rgba(255,255,255,.08); }

/* Spec table rows (icon list used as key/value) */
.lt-specs .elementor-icon-list-item { border-bottom: 1px solid var(--lt-line); padding: 10px 0; }
.lt-specs .elementor-icon-list-item:last-child { border-bottom: 0; }

/* Status tag, e.g. "Tuotanto alkaa joulukuussa 2026" */
.lt-tag .elementor-heading-title {
  display: inline-block;
  padding: 4px 10px 2px;
  background: var(--lt-orange);
  color: #fff;
  font-family: var(--lt-font-head);
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Customer list: small uppercase chips in a wrapping row */
.lt-chips .elementor-icon-list-items {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.lt-chips .elementor-icon-list-item {
  margin: 0 !important;
  padding: 8px 14px;
  border: 1px solid var(--lt-line);
  background: #fff;
  font-size: 14px;
  letter-spacing: .02em;
}
.lt-chips .elementor-icon-list-icon { display: none; }
.lt-chips .elementor-icon-list-text { padding-left: 0 !important; }

/* Map embed (HTML widget with the client's Google Maps iframe) fills its column */
.lt-map iframe { width: 100%; height: 420px; display: block; }
@media (max-width: 767px) {
  .lt-map iframe { height: 300px; }
}

/* Header: logo + menu + button in one row, menu text uppercase in Teko */
.lt-header .menu-item a {
  font-family: var(--lt-font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Hero overlay gradient so white text stays readable on any photo */
.lt-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.86) 0%, rgba(20,20,20,.62) 55%, rgba(20,20,20,.35) 100%);
  pointer-events: none;
}
.lt-hero > * { position: relative; }

/* Buttons: square, Teko, uppercase (Kit sets colours) */
.elementor-button {
  font-family: var(--lt-font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 0 !important;
}

/* Hello Elementor prints a page title we do not want on Elementor pages */
.elementor-page .page-header { display: none; }

@media print {
  .elementor-location-header, .elementor-location-footer, .lt-hero::before { display: none !important; }
}