.elementor-kit-122{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Inter", Sans-serif;font-size:17px;font-weight:400;}.elementor-kit-122 e-page-transition{background-color:#FFBC7D;}.elementor-kit-122 a{color:#1F3D2B;}.elementor-kit-122 a:hover{color:#C9A24D;}.elementor-kit-122 h1{color:#1F3D2B;font-family:"Playfair Display", Sans-serif;font-weight:600;}.elementor-kit-122 h2{color:#1F3D2B;}.elementor-kit-122 h3{color:#1F3D2B;font-family:"Playfair Display", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   JOULUNAIKA.FI – BRAND PACK (CSS) v1
   Lisää: Elementor → Site Settings → Custom CSS
========================================================= */

/* ---------- 1) Brand tokens ---------- */
:root{
  /* Palette */
  --jn-forest: #1F3D2B;   /* kuusenvihreä */
  --jn-red: #7B1E24;      /* hillitty joulunpunainen */
  --jn-gold: #C9A24D;     /* samppanjakulta */
  --jn-cream: #F6F1EA;    /* lämmin kerma */
  --jn-gray: #6E6E6E;     /* himmeä harmaa */
  --jn-copper: #8A5A3C;   /* kupari (aksentti) */
  --jn-silver: #DADDE2;   /* huurresävy */

  /* Neutrals */
  --jn-text: #1F1F1F;
  --jn-bg: var(--jn-cream);
  --jn-surface: #FFFFFF;
  --jn-border: rgba(31,61,43,0.12);

  /* CTA */
  --jn-cta-bg: var(--jn-red);
  --jn-cta-text: #FFFFFF;
  --jn-cta-hover: var(--jn-gold);
  --jn-cta-active: #5E1419;

  /* Typography */
  --jn-font-headings: "Playfair Display", serif;
  --jn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Radius + shadow */
  --jn-radius-sm: 10px;
  --jn-radius-md: 14px;
  --jn-radius-lg: 18px;

  --jn-shadow-sm: 0 6px 18px rgba(0,0,0,0.08);
  --jn-shadow-md: 0 14px 40px rgba(0,0,0,0.10);

  /* Spacing helpers */
  --jn-gap-sm: 10px;
  --jn-gap-md: 16px;
  --jn-gap-lg: 24px;
}

/* ---------- 2) Global base ---------- */
html, body{
  background: var(--jn-bg);
  color: var(--jn-text);
  font-family: var(--jn-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: var(--jn-forest);
  text-decoration: none;
}
a:hover{ color: var(--jn-red); }

/* Headings + Elementor headings */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family: var(--jn-font-headings);
  letter-spacing: 0.2px;
}

/* Paragraph rhythm (safe defaults) */
p{ line-height: 1.6; }

/* Subtle divider */
hr{
  border: 0;
  height: 1px;
  background: var(--jn-border);
}

/* ---------- 3) Buttons (Elementor + WP) ---------- */
.elementor-button,
button,
input[type="submit"],
.wp-block-button__link{
  background: var(--jn-cta-bg);
  color: var(--jn-cta-text);
  border-radius: var(--jn-radius-md);
  box-shadow: var(--jn-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{
  background: var(--jn-cta-hover);
  transform: translateY(-1px);
  box-shadow: var(--jn-shadow-md);
  color: #1A1A1A; /* kulta taustalla usein luettavampi */
}

.elementor-button:active,
button:active,
input[type="submit"]:active,
.wp-block-button__link:active{
  background: var(--jn-cta-active);
  transform: translateY(0px);
  color: var(--jn-cta-text);
}

/* Secondary/outline button (Elementor: lisää class "jn-btn-outline") */
.elementor-button.jn-btn-outline{
  background: transparent;
  color: var(--jn-forest);
  border: 1px solid rgba(31,61,43,0.28);
  box-shadow: none;
}
.elementor-button.jn-btn-outline:hover{
  background: rgba(201,162,77,0.14);
  border-color: rgba(201,162,77,0.55);
  transform: translateY(-1px);
  box-shadow: var(--jn-shadow-sm);
}

/* ---------- 4) Surfaces / cards ---------- */
.jn-surface{
  background: var(--jn-surface);
  border: 1px solid var(--jn-border);
  border-radius: var(--jn-radius-lg);
  box-shadow: var(--jn-shadow-sm);
}

/* Loop/Posts card: lisää kortin ulompaan containeriin class "jn-card" */
.jn-card{
  background: var(--jn-surface);
  border: 1px solid var(--jn-border);
  border-radius: var(--jn-radius-lg);
  box-shadow: var(--jn-shadow-sm);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}
.jn-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--jn-shadow-md);
  border-color: rgba(201,162,77,0.40);
  filter: saturate(1.02);
}
.jn-card .elementor-heading-title{
  color: var(--jn-forest);
  line-height: 1.15;
}
.jn-meta{
  color: var(--jn-gray);
  font-size: 0.92rem;
}

/* ---------- 5) Hero overlay (taustakuva + luettavuus) ---------- */
/* Lisää hero-containeriin class "jn-hero" */
.jn-hero{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}
.jn-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(31,61,43,0.92) 0%,
    rgba(31,61,43,0.70) 42%,
    rgba(31,61,43,0.18) 100%
  );
  pointer-events:none;
}
.jn-hero > *{
  position: relative;
  z-index: 1;
}

/* Mobile overlay stronger */
@media (max-width: 767px){
  .jn-hero::before{
    background: linear-gradient(
      180deg,
      rgba(31,61,43,0.92) 0%,
      rgba(31,61,43,0.82) 60%,
      rgba(31,61,43,0.55) 100%
    );
  }
}

/* Hero text helpers (optional): lisää class teksteihin */
.jn-hero .jn-hero-kicker{ color: rgba(246,241,234,0.82); letter-spacing: 0.08em; text-transform: uppercase; }
.jn-hero .jn-hero-title{ color: var(--jn-cream); }
.jn-hero .jn-hero-lead{ color: rgba(246,241,234,0.88); }

/* ---------- 6) Header polish ---------- */
/* Lisää headerin ylimpään containeriin class "jn-header" */
.jn-header{
  border-bottom: 1px solid rgba(31,61,43,0.12);
}

/* ---------- 7) Menu colors (WordPress Menu widget) ---------- */
/* Lisää Menu-widgetin Advanced → CSS Classes: "jn-menu" */
.jn-menu a{
  color: var(--jn-forest) !important;
}
.jn-menu a:hover,
.jn-menu .current-menu-item > a{
  color: var(--jn-gold) !important;
}

/* ---------- 8) Small “gold accent” utilities ---------- */
.jn-gold{ color: var(--jn-gold) !important; }
.jn-forest{ color: var(--jn-forest) !important; }
.jn-red{ color: var(--jn-red) !important; }

/* Optional: small star separator look */
.jn-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,77,0.55), transparent);
}

/* ---------- 9) Forms (subtle) ---------- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea, select{
  border-radius: var(--jn-radius-md);
  border: 1px solid rgba(31,61,43,0.18);
  padding: 10px 12px;
  background: #fff;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, select:focus{
  outline: none;
  border-color: rgba(201,162,77,0.60);
  box-shadow: 0 0 0 4px rgba(201,162,77,0.16);
}/* End custom CSS */