/*
 * Kahwe – design tokens and base styles. Loaded after the parent bundle.
 * Source of truth for values: the approved layout, design/konsepti-a/assets/base.css.
 * Parent tokens (--louhos-*) are re-pointed here; project-only values use --kahwe-*.
 */

:root {
	/* Parent tokens ------------------------------------------------------- */
	--louhos-primary: #d10000;            /* buttons, links (5.7:1 on white) */
	--louhos-primary-rgb: 209, 0, 0;
	--louhos-primary-dark: #b30000;       /* hover */
	--louhos-accent: #d10000;
	--louhos-link-color: #d10000;

	--louhos-headings: #281e1a;
	--louhos-body-color: #4a3e38;
	--louhos-grey: #f9f5ef;               /* light café au lait (parent "grey" surfaces) */
	--louhos-border: #ece3d7;
	--louhos-border-rgb: 236, 227, 215;

	--louhos-dark-1: #281e1a;
	--louhos-dark-1-rgb: 40, 30, 26;
	--louhos-dark-2: #281e1a;
	--louhos-dark-2-rgb: 40, 30, 26;

	--louhos-header-height: 4.5rem;
	--louhos-radius: 2px;
	--louhos-radius-lg: 2px;
	--louhos-font-family: 'Merriweather', Georgia, serif;

	/* Kahwe tokens --------------------------------------------------------- */
	--kahwe-red: #fe0000;                 /* logo box, max-score bars (large shapes only) */
	--kahwe-muted: #6e615a;
	--kahwe-milk: #f9f5ef;
	--kahwe-milk-2: #f1e8dc;
	--kahwe-stars-bg: #e9ddcd;
	--kahwe-star: #c7ae91;

	/* roast level colours: chips, swatches, the scale strip */
	--kahwe-bean-1: #ead9c1;
	--kahwe-bean-2: #d8b68d;
	--kahwe-bean-3: #b98a5e;
	--kahwe-bean-4: #8e6043;
	--kahwe-bean-5: #573626;
	--kahwe-bean-6: #281e1a;
	/* roast scale section backgrounds */
	--kahwe-roast-1: #efe5d9;
	--kahwe-roast-2: #ecdfcf;
	--kahwe-roast-3: #e9dac6;
	--kahwe-roast-4: #8e6043;
	--kahwe-roast-5: #573626;
	--kahwe-roast-6: #281e1a;

	--kahwe-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--kahwe-step--1: 0.8125rem;  /* 13px */
	--kahwe-step-0: 0.9375rem;   /* 15px body */
	--kahwe-step-1: 1.125rem;    /* 18px lead */
	--kahwe-ui: 1.0625rem;       /* 17px nav + buttons */
	--kahwe-step-2: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem);
	--kahwe-step-3: clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);
	--kahwe-step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.375rem);

	--kahwe-radius-img: 6px;     /* large pictures only */
	--kahwe-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--kahwe-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Bootstrap body size (15px serif) */
	--bs-body-font-size: var(--kahwe-step-0);
	--bs-body-line-height: 1.75;
}

/* ---------- base ---------- */
body { -webkit-font-smoothing: antialiased; }
p { text-wrap: pretty; }
a { text-underline-offset: 0.2em; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--kahwe-font-display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}
h1, .h1 { font-size: var(--kahwe-step-4); }
h2, .h2 { font-size: var(--kahwe-step-3); }
h3, .h3 { font-size: var(--kahwe-step-2); }
h4, .h4 { font-size: var(--kahwe-step-1); }

:focus-visible { outline: 3px solid var(--louhos-primary); outline-offset: 3px; border-radius: 2px; }
.section--dark :focus-visible { outline-color: #fff; }

/* Design max width 78rem */
@media (min-width: 1200px) {
	.container, .container-lg, .container-xl, .container-xxl { max-width: 78rem; }
}

/* ---------- buttons: flat, uppercase, solid (no outline/transparent) ---------- */
.btn {
	--bs-btn-border-radius: var(--louhos-radius);
	--bs-btn-border-width: 0;
	--bs-btn-font-family: var(--kahwe-font-display);
	--bs-btn-font-size: var(--kahwe-ui);
	--bs-btn-font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.louhos-btn { min-height: 48px; padding: 0.7em 1.4em; gap: 0.5em; transition: transform 160ms var(--kahwe-ease-out), background-color 160ms; }
.louhos-btn:active { transform: scale(0.97); }
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--louhos-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--louhos-primary-dark);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--louhos-primary-dark);
}
/* "outline" style in the editor = solid brown secondary button */
.btn-dark, .btn-outline-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--louhos-headings);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #4a3a33;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #4a3a33;
}
.section--dark .btn-dark, .section--dark .btn-outline-primary,
.kahwe-on-dark .btn-dark {
	--bs-btn-color: var(--louhos-headings);
	--bs-btn-bg: #fff;
	--bs-btn-hover-color: var(--louhos-headings);
	--bs-btn-hover-bg: var(--kahwe-milk-2);
}

/* ---------- logo box: white logo on red, margins ≈ 50 % of the logo height (logo 318×154) ---------- */
.kahwe-logo {
	--logo-w: 6rem;
	display: inline-block;
	background: var(--kahwe-red);
	padding: calc(var(--logo-w) * 0.2425);
	line-height: 0;
}
.kahwe-logo img { width: var(--logo-w); height: auto; }

/* ---------- section backgrounds ---------- */
.bg--milk { background-color: var(--kahwe-milk); }

/* Star frame (block background option "stars"): a row of tiny stars round the section,
   on a pseudo-element so the section keeps a solid background colour. */
.bg--stars { position: relative; isolation: isolate; background-color: var(--kahwe-stars-bg); }
.bg--stars::before {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 2l1 2.9h3L7.6 6.7l.9 2.9L6 7.8 3.5 9.6l.9-2.9L2 4.9h3z' fill='%23c7ae91'/%3E%3C/svg%3E");
	content: ''; position: absolute; inset: clamp(8px, 1.2vw, 16px); z-index: -1; pointer-events: none;
	background:
		var(--star) left top / 12px 12px repeat-x,
		var(--star) left bottom / 12px 12px repeat-x,
		var(--star) left top / 12px 12px repeat-y,
		var(--star) right top / 12px 12px repeat-y;
}
.bg--stars > .container { padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 1rem); }

/* Paper grain on a solid colour: multiply on light, screen on dark */
.has-grain { position: relative; isolation: isolate; }
.has-grain::after {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--kahwe-grain); mix-blend-mode: multiply; opacity: 0.3;
}
.has-grain.section--dark::after, .has-grain.is-dark::after { mix-blend-mode: screen; opacity: 0.1; }

/* Large pictures get a slight radius; buttons and other shapes stay at 2px */
.louhos-ti__media img:first-child, .louhos-card__image, .kahwe-img { border-radius: var(--kahwe-radius-img); }
/* width/height attributes are for layout reservation; CSS aspect-ratio decides the shape */
.kahwe-img, .louhos-ti__media img:first-child { height: auto; }

@media (prefers-reduced-motion: reduce) {
	.louhos-btn, .louhos-btn:active { transition: none; transform: none; }
}

/* ==========================================================================
   Header, navigation, notice bar, footer (ported from design/konsepti-a/style.css)
   ========================================================================== */
/* ---------- notice ---------- */
.notice { background: var(--louhos-headings); color: #fff; font-size: var(--kahwe-step--1); }
.notice p { max-width: none; margin: 0; padding-block: 0.55rem; text-align: center; }

/* ---------- header ---------- */
.head { position: relative; z-index: 20; background: #fff; box-shadow: 0 1px 0 var(--kahwe-milk-2); }
.head__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
/* logo box hangs from the top edge of the header */
.head__logo { --logo-w: clamp(4.25rem, 3rem + 3vw, 6rem); align-self: flex-start; }
.head__toggle {
  display: none; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0 0.25rem;
  border: 0; background: none; color: var(--louhos-headings);
  font: 600 var(--kahwe-ui)/1 var(--kahwe-font-display); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.head__burger, .head__burger::before, .head__burger::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative;
  transition: transform 240ms var(--kahwe-ease-out), opacity 160ms;
}
.head__burger::before, .head__burger::after { content: ''; position: absolute; left: 0; }
.head__burger::before { top: -7px; }
.head__burger::after { top: 7px; }
[aria-expanded='true'] > .head__burger { background: transparent; }
[aria-expanded='true'] > .head__burger::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded='true'] > .head__burger::after { transform: translateY(-7px) rotate(-45deg); }

.mainnav { display: flex; align-items: center; gap: 2rem; flex: 1; justify-content: space-between; margin-left: 2rem; }
.mainnav ul { list-style: none; margin: 0; padding: 0; }
.nav__list, .nav__tools { display: flex; align-items: center; gap: 0.25rem; }
.nav__contact { display: none; }

/* Every navigation link: uppercase Barlow, one size, compact height */
.mainnav a, .nav__item > button {
  --px: 0.75rem;
  position: relative;
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0 var(--px);
  border: 0; background: none; color: var(--louhos-headings); cursor: pointer;
  font: 600 var(--kahwe-ui)/1 var(--kahwe-font-display); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.nav__tools a { color: var(--louhos-body-color); }
/* Hover/focus: a red underline grows from the left (transform only) */
.mainnav a::before, .nav__item > button::before {
  content: ''; position: absolute; left: var(--px); right: var(--px); bottom: 3px; height: 2px;
  background: var(--louhos-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--kahwe-ease-out);
}
.nav__item > button::before { right: calc(var(--px) + 0.8em); } /* stop before the chevron */
/* Cart: underline on the text label, so nothing decorative sits behind the count badge */
.mainnav .nav__cart::before { content: none; }
.nav__label { position: relative; }
.nav__label::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--louhos-primary); transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--kahwe-ease-out);
}
.nav__cart:hover .nav__label::before, .nav__cart:focus-visible .nav__label::before { transform: scaleX(1); }
.mainnav a:hover, .mainnav a:focus-visible, .nav__item > button:hover, .nav__item > button:focus-visible { color: var(--louhos-primary); }
.mainnav a:hover::before, .mainnav a:focus-visible::before,
.nav__item > button:hover::before, .nav__item > button:focus-visible::before,
.nav__item > button[aria-expanded='true']::before { transform: scaleX(1); }
.nav__item > button::after {
  content: ''; width: 0.45em; height: 0.45em; margin-top: -0.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms var(--kahwe-ease-out);
}
.nav__item > button[aria-expanded='true']::after { transform: translateY(0.2em) rotate(-135deg); }
.nav__item { position: relative; }
.mainnav .nav__sub {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 15rem;
  padding: 0.5rem 0.25rem; background: #fff; border: 0; border-radius: var(--louhos-radius-lg);
  box-shadow: 0 12px 32px rgb(40 30 26 / 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.98); transform-origin: top left;
  transition: opacity 160ms var(--kahwe-ease-out), transform 160ms var(--kahwe-ease-out), visibility 0s 160ms;
}
[aria-expanded='true'] + .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sub a { display: inline-flex; }
.nav__contact svg { flex: none; width: 18px; height: 18px; }
.nav__count {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem;
  border-radius: var(--louhos-radius); background: var(--louhos-primary); color: #fff; font-size: 0.8rem; font-weight: 700;
}

@media (max-width: 64rem) {
  .head__toggle { display: inline-flex; }
  .mainnav {
    position: absolute; inset: 100% 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0.75rem;
    padding: 0.75rem 1.5rem 1.25rem; background: #fff; box-shadow: 0 12px 24px rgb(40 30 26 / 0.08);
    max-height: calc(100dvh - 6rem); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms var(--kahwe-ease-out), transform 200ms var(--kahwe-ease-out), visibility 0s 200ms;
  }
  .k-menu-open .mainnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mainnav a, .nav__item > button { --px: 0px; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
  .mainnav .nav__sub { position: static; box-shadow: none; border: 0; padding: 0 0 0.25rem 1rem; display: none; opacity: 1; visibility: visible; transform: none; }
  [aria-expanded='true'] + .nav__sub { display: block; }
  .nav__tools, .nav__contact { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-top: 0.6rem; box-shadow: 0 -1px 0 var(--kahwe-milk-2); }
}

/* ---------- footer ---------- */
.foot { position: relative; isolation: isolate; background: var(--louhos-headings); color: rgb(255 255 255 / 0.85); padding-top: clamp(3rem, 6vw, 5rem); }
.foot a { color: #fff; }
.foot h2 { color: #fff; font-size: var(--kahwe-step-1); margin-bottom: 0.75rem; }
.foot address { font-style: normal; }
.foot__in { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.foot__brand { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.foot__brand .kahwe-logo { --logo-w: 5rem; }
.foot__brand p { font: 600 var(--kahwe-step-1)/1.2 var(--kahwe-font-display); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; max-width: 22ch; }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.foot__links a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 26px; text-decoration: none; }
.foot__links a:hover, .foot__links a:focus-visible { text-decoration: underline; }
.foot__links a span { text-align: left; }
.foot__links svg { flex: none; width: 20px; height: 20px; }
.foot__links small { display: block; font-size: var(--kahwe-step--1); color: rgb(255 255 255 / 0.85); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-block: 1.5rem;
  font-size: var(--kahwe-step--1);
}

/* Mobile: everything centred */
@media (max-width: 40rem) {
  .foot__in { text-align: center; justify-items: center; }
  .foot__brand { justify-items: center; }
  .foot__brand p { margin-inline: auto; }
  .foot__links { justify-items: center; }
  .foot__links a span { text-align: center; }
  .foot__base { flex-direction: column; align-items: center; text-align: center; }
}

.foot__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.foot p, .foot address { margin: 0; }

/* ==========================================================================
   Homepage blocks (ported from design/konsepti-a/style.css)
   ========================================================================== */

/* ---------- Hero, layout "split" ---------- */
.kahwe-hero { padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 4vw, 6rem); }
.kahwe-hero__in {
	display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: 'text' 'media' 'awards';
}
@media (min-width: 60rem) {
	.kahwe-hero__in {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		grid-template-areas: 'text media' 'awards awards';
		align-items: center;
	}
}
.kahwe-hero__text { grid-area: text; display: grid; gap: 1.5rem; }
.kahwe-hero__title { font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); line-height: 1; margin: 0; }
.kahwe-hero__lead { font-size: var(--kahwe-step-1); line-height: 1.7; max-width: 40ch; }
.kahwe-hero__lead > :last-child { margin-bottom: 0; }
.kahwe-hero .louhos-buttons { margin-top: 0.5rem; gap: 0.75rem; }
.kahwe-hero__media { grid-area: media; margin: 0; }
.kahwe-hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.kahwe-hero__awards { grid-area: awards; display: grid; gap: 1rem; padding: 1.5rem; background: var(--kahwe-milk); }
@media (min-width: 60rem) { .kahwe-hero__awards { grid-template-columns: 12rem 1fr; align-items: start; } }
.kahwe-hero__awards-title { font-size: var(--kahwe-step-1); margin: 0; }
.kahwe-hero__awards ul {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	font-size: var(--kahwe-step--1); line-height: 1.35;
}
.kahwe-hero__awards b { display: block; margin-bottom: 0.2rem; font: 700 var(--kahwe-step-2)/1 var(--kahwe-font-display); color: var(--louhos-primary); }
.kahwe-hero__awards span { display: block; font-weight: 700; color: var(--louhos-headings); }

/* ---------- Services grid: "tiles" ---------- */
.kahwe-services__title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.kahwe-services__lead { margin: -1rem 0 2rem; max-width: 62ch; }
.kahwe-tiles {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) { .kahwe-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kahwe-tile { position: relative; display: grid; gap: 0.4rem; align-content: start; text-align: center; }
.kahwe-tile > h3, .kahwe-tile > p { margin-inline: 7%; }
.kahwe-tile > img, .kahwe-tile__logo { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 0.5rem; }
.kahwe-tile__logo { display: grid; place-items: center; background: var(--kahwe-red); }
.kahwe-tile__logo img { width: 52%; height: auto; }
.kahwe-tile h3 { font-size: var(--kahwe-step-2); margin: 0; }
.kahwe-tile h3 a { color: var(--louhos-headings); text-decoration: none; }
.kahwe-tile h3 a::after { content: ''; position: absolute; inset: 0; }
.kahwe-tile:hover h3 a { color: var(--louhos-primary); }
.kahwe-tile p { font-size: var(--kahwe-step--1); color: var(--kahwe-muted); margin: 0; }
.kahwe-tile > img { transition: transform 400ms var(--kahwe-ease-out); }
@media (hover: hover) { .kahwe-tile:hover > img { transform: scale(1.02); } }

/* ---------- Services grid: "list" ---------- */
.kahwe-services__split { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 56rem) { .kahwe-services__split { grid-template-columns: 1fr 1fr; align-items: start; } }
.kahwe-services__intro { display: grid; gap: 1.25rem; }
.kahwe-services__intro h2, .kahwe-services__intro p { margin: 0; }
.kahwe-services__intro img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 0.75rem; }
.kahwe-services__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.kahwe-services__list li { position: relative; padding: 1.25rem 3rem 1.25rem 1.5rem; background: #fff; }
.kahwe-services__list li::after {
	content: ''; position: absolute; right: 1.5rem; top: 50%; width: 0.7rem; height: 0.7rem;
	border-top: 2px solid var(--louhos-primary); border-right: 2px solid var(--louhos-primary);
	transform: translateY(-50%) rotate(45deg); transition: transform 240ms var(--kahwe-ease-out);
}
.kahwe-services__list li:hover::after { transform: translate(4px, -50%) rotate(45deg); }
.kahwe-services__list h3 { font-size: var(--kahwe-step-2); margin: 0 0 0.4rem; }
.kahwe-services__list h3 a { color: var(--louhos-headings); text-decoration: none; }
.kahwe-services__list h3 a::after { content: ''; position: absolute; inset: 0; }
.kahwe-services__list li:hover h3 a { color: var(--louhos-primary); }
.kahwe-services__list p { font-size: var(--kahwe-step--1); margin: 0; }

/* ---------- Text + image: roastery look ---------- */
.louhos-ti__media img:first-child { aspect-ratio: 3 / 2; min-height: 0; }
.kahwe-hours { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--kahwe-milk); display: inline-block; }
.kahwe-hours dt { font-weight: 700; color: var(--louhos-headings); }
.kahwe-hours dd { margin: 0; }