/*
Theme Name: Raptoin
Theme URI: https://raptoin.org/
Author: Raptoin
Author URI: https://raptoin.org/
Description: Tema untuk kedai kopi dan kuih Raptoin di Ipoh. Vitrin harian, jadual harga dengan penukar format, dan penjana cawan. Fon dimuatkan dari dalam tema, tiada permintaan ke pelayan luar.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raptoin
*/

/* =========================================================================
   1. Lettertypen uit de tema zelf
   ========================================================================= */

@font-face {
	font-family: 'Familjen Grotesk';
	src: url('fonts/familjen-grotesk-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Familjen Grotesk';
	src: url('fonts/familjen-grotesk-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Assistant';
	src: url('fonts/assistant-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	src: url('fonts/assistant-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Assistant';
	src: url('fonts/assistant-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	src: url('fonts/assistant-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Grondslag
   ------------------------------------------------------------------------
   De kleuren zijn voor de opmaak begon in beide richtingen doorgerekend.
   --tepi haalt 1,33:1 en draagt daarom nooit tekst, alleen randen.
   ========================================================================= */

:root {
	--santan: #fbf3e6;
	--susu: #f4e9d7;
	--tepi: #e5d3b6;
	--kopi: #2d211a;
	--bakar: #a8431f;
	--laut: #1f5f6b;
	--gula: #8a5a18;
	/* Op de tegeltextuur haalt --gula maar 4,05:1 gemeten met pixels; deze
	   donkere variant haalt daar 5,70:1 en is alleen voor tekst op die foto. */
	--gulagelap: #6e4512;
	--reda: #5a4636;
	--tenda-hoog: 4.6rem;
	--sela: clamp(2.6rem, 5vw, 4.6rem);
	--lebar: 74rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Een klas die display zet is sterker dan de browserregel voor [hidden]. */
[hidden] {
	display: none !important;
}

html {
	scroll-padding-top: calc(var(--tenda-hoog) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--santan);
	color: var(--kopi);
	font-family: 'Assistant', 'Segoe UI', system-ui, sans-serif;
	font-size: 1.05rem;
	line-height: 1.65;
}

h1,
h2,
h3,
h4 {
	font-family: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 0 0 0.7em;
}

h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

h2 {
	font-size: clamp(1.65rem, 3.2vw, 2.35rem);
}

h3 {
	font-size: clamp(1.2rem, 2vw, 1.45rem);
}

h4 {
	font-size: 1.08rem;
}

p {
	margin: 0 0 1.05em;
}

a {
	color: var(--bakar);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--kopi);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Een verwijzing die alleen in zijn alinea staat is in de praktijk een knop en
   moet met een duim te raken zijn. Zonder deze regel meet zo een regel 20 px. */
p > a:only-child,
dd > a:only-child,
li > a:only-child:not([class]) {
	display: inline-flex;
	align-items: center;
	min-height: 2.35rem;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.25em;
}

li {
	margin-bottom: 0.4em;
}

:focus-visible {
	outline: 3px solid var(--laut);
	outline-offset: 2px;
}

.bisik {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lompat {
	position: absolute;
	left: 0.6rem;
	top: -4rem;
	z-index: 60;
	background: var(--kopi);
	color: var(--santan);
	padding: 0.7rem 1.1rem;
	border-radius: 0.2rem;
	font-weight: 600;
}

.lompat:focus {
	top: 0.6rem;
	color: var(--santan);
}

.kedai {
	width: 100%;
	max-width: var(--lebar);
	margin: 0 auto;
	padding: 0 1.15rem;
}

/* =========================================================================
   3. Secties, knoppen, scheiding
   ========================================================================= */

.kaunter {
	padding: var(--sela) 0;
}

.kaunter--dalam {
	padding: calc(var(--sela) * 1.35) 0;
}

.kaunter--pendek {
	padding: calc(var(--sela) * 0.55) 0;
}

.kaunter--panel {
	background: var(--susu);
	border-top: 1px solid var(--tepi);
	border-bottom: 1px solid var(--tepi);
}

.kaunter__atas {
	max-width: 44rem;
	margin-bottom: 2.1rem;
}

.kaunter__kening {
	display: block;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--laut);
	margin-bottom: 0.7rem;
}

.kaunter__perenggan {
	max-width: 44rem;
	color: var(--reda);
}

.cawan {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.9rem;
	padding: 0.62rem 1.35rem;
	border: 2px solid var(--bakar);
	border-radius: 0.25rem;
	background: var(--bakar);
	color: var(--santan);
	font-family: 'Assistant', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.cawan--panas:hover,
.cawan--panas:focus {
	background: #8c3517;
	border-color: #8c3517;
	color: var(--santan);
}

.cawan--sejuk {
	background: transparent;
	border-color: var(--laut);
	color: var(--laut);
}

.cawan--sejuk:hover,
.cawan--sejuk:focus {
	background: var(--laut);
	color: var(--santan);
}

.cawan--pendek {
	min-height: 2.5rem;
	padding: 0.42rem 0.95rem;
	font-size: 0.92rem;
}

.cincin {
	display: block;
	width: 100%;
	height: 3rem;
	color: var(--tepi);
}

.jalurgambar {
	width: 100%;
	border: 1px solid var(--tepi);
	border-radius: 0.3rem;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.pelankedai {
	display: block;
	width: 100%;
	max-width: 26rem;
	height: 10rem;
	margin: 0 0 0.8rem;
	color: var(--tepi);
}

/* =========================================================================
   4. Tenda: de kop van de site
   ========================================================================= */

.tenda {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--santan);
	border-bottom: 1px solid var(--tepi);
}

.tenda__dalam {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--tenda-hoog);
}

.tenda__merk {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.42rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--kopi);
	display: inline-flex;
	align-items: center;
	min-height: 2.6rem;
}

.tenda__merk:hover,
.tenda__merk:focus {
	color: var(--bakar);
}

.tenda__merk-satu {
	color: var(--kopi);
}

.tenda__merk-dua {
	color: var(--bakar);
}

.senaraikedai {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.senaraikedai__pautan {
	display: inline-flex;
	align-items: center;
	min-height: 2.7rem;
	padding: 0.35rem 0.62rem;
	border-radius: 0.2rem;
	color: var(--kopi);
	font-size: 0.96rem;
	text-decoration: none;
}

.senaraikedai__pautan:hover,
.senaraikedai__pautan:focus {
	background: var(--susu);
	color: var(--bakar);
}

.senaraikedai__pautan[aria-current='page'] {
	color: var(--bakar);
	box-shadow: inset 0 -2px 0 var(--bakar);
}

.tenda__cta {
	margin-left: auto;
}

.butangloceng {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 1px solid var(--tepi);
	border-radius: 0.25rem;
	background: var(--susu);
	color: var(--kopi);
	cursor: pointer;
}

.butangloceng svg {
	width: 1.4rem;
	height: 1.4rem;
}

.butangloceng__tutup {
	display: none;
}

.tenda--buka .butangloceng__buka {
	display: none;
}

.tenda--buka .butangloceng__tutup {
	display: block;
}

/* =========================================================================
   5. Kop van een binnenbladzijde
   ------------------------------------------------------------------------
   De tekst staat op de tegeltextuur, daarom is de sectie gemarkeerd met
   data-foto-achter en wordt hij met de pixelproef gemeten.
   ========================================================================= */

.kepalalaman {
	position: relative;
	background-color: var(--susu);
	background-image: url('images/jubin.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--tepi);
	padding: calc(var(--sela) * 0.9) 0;
}

.kepalalaman__kening {
	display: block;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gulagelap);
	margin-bottom: 0.6rem;
}

.kepalalaman__tajuk {
	margin-bottom: 0.5rem;
	max-width: 38rem;
}

.kepalalaman__perenggan {
	max-width: 40rem;
	margin: 0;
	color: var(--kopi);
	font-size: 1.1rem;
}

/* =========================================================================
   6. Kop van de voorpagina: gedeeld, tekst naast foto
   ========================================================================= */

.kepalakedai {
	padding: calc(var(--sela) * 0.85) 0 var(--sela);
}

.kepalakedai__rak {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4vw, 3.2rem);
	align-items: center;
}

.kepalakedai__tajuk {
	margin-bottom: 0.6rem;
}

.kepalakedai__lead {
	font-size: 1.14rem;
	color: var(--kopi);
	max-width: 34rem;
}

.kepalakedai__butang {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.kepalakedai__gambar {
	border-radius: 0.3rem;
	border: 1px solid var(--tepi);
	width: 100%;
	aspect-ratio: 7 / 5;
	object-fit: cover;
}

.jalurfakta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.2rem;
	list-style: none;
	margin: 1.9rem 0 0;
	padding: 1.05rem 0 0;
	border-top: 1px solid var(--tepi);
}

.jalurfakta__butir {
	margin: 0;
	font-size: 0.97rem;
	color: var(--reda);
}

.jalurfakta__nilai {
	display: block;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.16rem;
	color: var(--kopi);
}

/* =========================================================================
   7. Vitrin: wat er vandaag op de toonbank ligt
   ========================================================================= */

.rakvitrin {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kadkuih {
	display: flex;
	flex-direction: column;
	background: var(--susu);
	border: 1px solid var(--tepi);
	border-radius: 0.3rem;
	overflow: hidden;
}

.kadkuih__gambar {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kadkuih__isi {
	padding: 1rem 1.05rem 1.15rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.kadkuih__harga {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.02rem;
	color: var(--bakar);
	margin-bottom: 0.35rem;
}

.kadkuih__nama {
	font-size: 1.14rem;
	margin-bottom: 0.45rem;
}

.kadkuih__nota {
	margin: 0;
	font-size: 0.95rem;
	color: var(--reda);
}

.kadkuih__masa {
	margin-top: auto;
	padding-top: 0.85rem;
	font-size: 0.88rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--laut);
}

/* =========================================================================
   8. Jadual Harga: tarieftabel met een schakelaar
   ========================================================================= */

.jadualharga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
	gap: clamp(1.5rem, 3.5vw, 2.8rem);
	align-items: start;
}

.jadualharga__sisi img {
	border-radius: 0.3rem;
	border: 1px solid var(--tepi);
	width: 100%;
	aspect-ratio: 14 / 9;
	object-fit: cover;
}

.jadualharga__sisi-nota {
	margin: 1rem 0 0;
	font-size: 0.95rem;
	color: var(--reda);
}

.penukar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.15rem;
	padding: 0;
	border: 0;
}

.penukar__tajuk {
	width: 100%;
	padding: 0;
	margin: 0 0 0.6rem;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--laut);
}

.penukar__butang {
	border: 1px solid var(--tepi);
	background: var(--susu);
	color: var(--kopi);
}

.penukar__butang[aria-pressed='true'] {
	background: var(--laut);
	border-color: var(--laut);
	color: var(--santan);
}

.penukar__butang:hover,
.penukar__butang:focus {
	border-color: var(--laut);
	color: var(--laut);
}

.penukar__butang[aria-pressed='true']:hover,
.penukar__butang[aria-pressed='true']:focus {
	background: #17454e;
	border-color: #17454e;
	color: var(--santan);
}

.medanharga {
	overflow-x: auto;
	border: 1px solid var(--tepi);
	border-radius: 0.3rem;
	background: var(--santan);
}

.jadual {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.99rem;
}

.jadual caption {
	text-align: left;
	padding: 0.85rem 1rem;
	font-size: 0.93rem;
	color: var(--reda);
	border-bottom: 1px solid var(--tepi);
}

.jadual th,
.jadual td {
	padding: 0.72rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--tepi);
	vertical-align: top;
}

.jadual thead th {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--laut);
	white-space: nowrap;
}

.jadual tbody tr:last-child th,
.jadual tbody tr:last-child td {
	border-bottom: 0;
}

.barisharga__nama {
	font-weight: 600;
}

.barisharga__wang {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	color: var(--bakar);
	white-space: nowrap;
}

.barisharga__isi {
	white-space: nowrap;
	color: var(--reda);
}

.barisharga__termasuk {
	color: var(--reda);
	min-width: 13rem;
}

.notaharga {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	background: var(--susu);
	border-left: 3px solid var(--gula);
	border-radius: 0 0.25rem 0.25rem 0;
	font-size: 0.97rem;
	color: var(--kopi);
}

/* =========================================================================
   9. Duo: wij roosteren zelf
   ========================================================================= */

.duokaunter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: center;
}

.duokaunter__gambar {
	border-radius: 0.3rem;
	border: 1px solid var(--tepi);
	width: 100%;
	aspect-ratio: 14 / 9;
	object-fit: cover;
}

.duokaunter--balik .duokaunter__sisi {
	order: 2;
}

.senaraitanda {
	list-style: none;
	margin: 1.3rem 0 0;
	padding: 0;
}

.senaraitanda__butir {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.6rem;
	color: var(--kopi);
}

.senaraitanda__butir::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.62rem;
	height: 0.62rem;
	border: 2px solid var(--bakar);
	border-radius: 50%;
}

/* =========================================================================
   10. Angka hari ini
   ------------------------------------------------------------------------
   De grote cijfers staan in --gula (5,36:1) en niet in de randkleur: die
   haalt 1,33:1 en is voor tekst onbruikbaar.
   ========================================================================= */

.angkahari {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.angkahari__butir {
	margin: 0;
	padding: 1.15rem 1.1rem;
	background: var(--santan);
	border: 1px solid var(--tepi);
	border-radius: 0.3rem;
}

.angkahari__nilai {
	display: block;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: clamp(2.1rem, 4.2vw, 2.9rem);
	line-height: 1.05;
	color: var(--gula);
}

.angkahari__nama {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.96rem;
	color: var(--kopi);
}

/* =========================================================================
   11. Ulasan: tegelvloer van de kedai
   ========================================================================= */

.jubinulasan {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jubinulasan__jubin {
	display: flex;
	flex-direction: column;
	min-height: 15.5rem;
	padding: 1.15rem 1.2rem;
	margin: 0;
	background: var(--susu);
	border: 1px solid var(--tepi);
}

.jubinulasan__jubin:nth-child(even) {
	background: var(--santan);
}

.jubinulasan__masa {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 0.84rem;
	letter-spacing: 0.1em;
	color: var(--laut);
}

.jubinulasan__kata {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	margin: 0.9rem 0;
	padding: 0;
	border: 0;
	font-size: 1.02rem;
	quotes: '\201C' '\201D';
}

.jubinulasan__kata p {
	margin: 0;
}

.jubinulasan__bawah {
	margin: 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--tepi);
	font-size: 0.9rem;
	color: var(--reda);
}

.jubinulasan__nama {
	display: block;
	font-weight: 600;
	color: var(--kopi);
}

.jubinulasan__pautan {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.6rem;
}

/* =========================================================================
   12. Cawan Saya: de naamgenerator
   ========================================================================= */

.cawansaya {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.5rem, 3.5vw, 2.8rem);
	align-items: start;
	background: var(--susu);
	border: 1px solid var(--tepi);
	border-radius: 0.35rem;
	padding: clamp(1.2rem, 3vw, 2.1rem);
}

.pilihcawan {
	margin: 0 0 1.35rem;
	padding: 0;
	border: 0;
}

.pilihcawan__tajuk {
	display: block;
	padding: 0;
	margin: 0 0 0.65rem;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--laut);
}

.pilihcawan__baris {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.pilihcawan__pilih {
	position: relative;
	display: inline-flex;
}

.pilihcawan__radio {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.pilihcawan__label {
	display: inline-flex;
	align-items: center;
	min-height: 2.7rem;
	padding: 0.42rem 0.95rem;
	border: 1px solid var(--tepi);
	border-radius: 0.25rem;
	background: var(--santan);
	color: var(--kopi);
	font-size: 0.95rem;
	cursor: pointer;
}

.pilihcawan__radio:checked + .pilihcawan__label {
	background: var(--bakar);
	border-color: var(--bakar);
	color: var(--santan);
}

.pilihcawan__radio:focus-visible + .pilihcawan__label {
	outline: 3px solid var(--laut);
	outline-offset: 2px;
}

.pilihcawan__pilihan {
	display: block;
	width: 100%;
	min-height: 2.9rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--tepi);
	border-radius: 0.25rem;
	background: var(--santan);
	color: var(--kopi);
	font-family: 'Assistant', system-ui, sans-serif;
	font-size: 1rem;
}

.pilihcawan__nota {
	margin: 0.7rem 0 0;
	font-size: 0.95rem;
	color: var(--reda);
}

.cawansaya__hasil {
	background: var(--santan);
	border: 1px solid var(--tepi);
	border-radius: 0.3rem;
	padding: 1.25rem 1.3rem 1.35rem;
}

.cawansaya__kening {
	display: block;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gula);
	margin-bottom: 0.5rem;
}

.cawansaya__nama {
	margin-bottom: 0.85rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.cawansaya__garis {
	list-style: none;
	margin: 0 0 1.15rem;
	padding: 0;
}

.cawansaya__garis li {
	margin-bottom: 0.5rem;
	color: var(--kopi);
}

/* De balk is een blok met een eigen hoogte: een span zonder display: block
   tekent niets, en een hoogte in procenten binnen een flexrij verdwijnt. */
.cawansaya__takik {
	display: flex;
	gap: 0.28rem;
	height: 0.85rem;
	margin: 0 0 1.1rem;
}

.cawansaya__takik-blok {
	display: block;
	width: 3.1rem;
	height: 0.85rem;
	border: 1px solid var(--bakar);
	border-radius: 0.1rem;
	background: transparent;
}

.cawansaya__takik-blok--penuh {
	background: var(--bakar);
}

.cawansaya__pasangan {
	margin: 0 0 1.15rem;
	padding: 0.8rem 0.95rem;
	background: var(--susu);
	border-left: 3px solid var(--laut);
	border-radius: 0 0.25rem 0.25rem 0;
	font-size: 0.98rem;
}

.cawansaya__nilai {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.6rem;
	margin: 0 0 1.15rem;
}

.cawansaya__nilai div {
	min-width: 8rem;
}

.cawansaya__nilai dt {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--laut);
}

.cawansaya__nilai dd {
	margin: 0.15rem 0 0;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.15rem;
	color: var(--kopi);
}

/* =========================================================================
   13. Irama hari: de klok van de dag
   ========================================================================= */

.iramahari {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tepi);
}

.iramahari__butir {
	display: grid;
	grid-template-columns: 5.6rem minmax(0, 1fr);
	gap: 0 1.3rem;
	padding: 0.85rem 0;
	margin: 0;
	border-bottom: 1px solid var(--tepi);
}

.iramahari__masa {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.05rem;
	color: var(--bakar);
}

.iramahari__perkara {
	margin: 0;
}

.jambuka {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jambuka__butir {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	margin: 0;
	border-bottom: 1px dotted var(--tepi);
}

.jambuka__hari {
	color: var(--kopi);
}

.jambuka__masa {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	color: var(--reda);
	white-space: nowrap;
}

/* =========================================================================
   14. Orang di belakang kaunter
   ========================================================================= */

.rakorang {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kadorang {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: 1.3rem;
	align-items: start;
	margin: 0;
	padding: 1.1rem;
	background: var(--susu);
	border: 1px solid var(--tepi);
	border-radius: 0.3rem;
}

.kadorang__gambar {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0.25rem;
}

.kadorang__nama {
	margin-bottom: 0.2rem;
}

.kadorang__tugas {
	display: block;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--laut);
	margin-bottom: 0.6rem;
}

.kadorang__kata {
	margin: 0;
	font-size: 0.98rem;
	color: var(--reda);
}

/* =========================================================================
   15. Ajakan: de laatste zet
   ========================================================================= */

.ajakan {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
	border: 1px solid var(--tepi);
	border-radius: 0.35rem;
	overflow: hidden;
	background: var(--susu);
}

.ajakan__gambar {
	width: 100%;
	height: 100%;
	min-height: 17rem;
	object-fit: cover;
}

.ajakan__isi {
	padding: clamp(1.4rem, 3vw, 2.4rem);
	align-self: center;
}

.ajakan__tajuk {
	margin-bottom: 0.6rem;
}

.ajakan__perenggan {
	color: var(--kopi);
	max-width: 30rem;
}

/* =========================================================================
   16. Papan harian: de journaalregels met een gekleurde rug
   ========================================================================= */

.barisjurnal {
	list-style: none;
	margin: 0;
	padding: 0;
}

.barisjurnal__baris {
	margin: 0 0 0.75rem;
	padding: 0;
	background: var(--susu);
	border: 1px solid var(--tepi);
	border-left: 5px solid var(--bakar);
	border-radius: 0 0.3rem 0.3rem 0;
}

.barisjurnal__baris--laut {
	border-left-color: var(--laut);
}

.barisjurnal__dalam {
	display: block;
	padding: 1.05rem 1.2rem;
	text-decoration: none;
	color: var(--kopi);
}

.barisjurnal__dalam:hover,
.barisjurnal__dalam:focus {
	background: var(--santan);
	color: var(--kopi);
}

.barisjurnal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--laut);
	margin-bottom: 0.35rem;
}

/* display: block is hier geen versiering: een span met alleen een marge blijft
   inline en dan schuift de aankondiging achter de titel op dezelfde regel. */
.barisjurnal__tajuk {
	display: block;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.35rem;
	color: var(--bakar);
}

.barisjurnal__dalam:hover .barisjurnal__tajuk,
.barisjurnal__dalam:focus .barisjurnal__tajuk {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.barisjurnal__anak {
	display: block;
	margin: 0;
	font-size: 0.98rem;
	color: var(--reda);
}

/* =========================================================================
   17. Tanya jawab
   ========================================================================= */

.tanyajawab {
	max-width: 48rem;
}

.tanyajawab__pasang {
	border-bottom: 1px solid var(--tepi);
}

.tanyajawab__soalan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.1rem;
	padding: 0.75rem 0;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.08rem;
	color: var(--kopi);
	cursor: pointer;
	list-style: none;
}

.tanyajawab__soalan::-webkit-details-marker {
	display: none;
}

.tanyajawab__soalan::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--bakar);
}

.tanyajawab__pasang[open] .tanyajawab__soalan::after {
	content: '\2212';
}

.tanyajawab__soalan:hover,
.tanyajawab__soalan:focus-visible {
	color: var(--bakar);
}

.tanyajawab__jawapan {
	margin: 0;
	padding: 0 0 1.1rem;
	color: var(--reda);
	max-width: 44rem;
}

/* =========================================================================
   18. Borang kaunter
   ========================================================================= */

.borangkaunter {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
}

.borangkaunter__medan {
	display: block;
}

.borangkaunter__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.97rem;
}

.borangkaunter__perlu {
	color: var(--bakar);
}

.borangkaunter__isi,
.borangkaunter__pilih,
.borangkaunter__kotak {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--tepi);
	border-radius: 0.25rem;
	background: var(--santan);
	color: var(--kopi);
	font-family: 'Assistant', system-ui, sans-serif;
	font-size: 1rem;
}

.borangkaunter__kotak {
	min-height: 8.5rem;
	resize: vertical;
}

.borangkaunter__bantu {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.9rem;
	color: var(--reda);
}

.borangkaunter__perangkap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pesanjadi {
	margin: 0 0 1.4rem;
	padding: 0.95rem 1.1rem;
	background: var(--susu);
	border-left: 4px solid var(--laut);
	border-radius: 0 0.25rem 0.25rem 0;
}

.pesanjadi--salah {
	border-left-color: var(--bakar);
}

/* =========================================================================
   19. Tekstbladzijden en het journaal binnenin
   ========================================================================= */

.tulisan {
	max-width: 44rem;
}

.tulisan h2 {
	margin-top: 2.1rem;
}

.tulisan h3 {
	margin-top: 1.6rem;
}

.tulisan p:not(.notakecil) {
	color: var(--kopi);
}

.tulisan li {
	color: var(--kopi);
}

.notakecil {
	font-size: 0.93rem;
	color: var(--reda);
}

.jurnaltunggal {
	max-width: 44rem;
}

.jurnaltunggal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.2rem;
	margin: 0 0 1.4rem;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--laut);
}

.jurnaltunggal__petikan {
	margin: 1.8rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--susu);
	border-left: 4px solid var(--gula);
	border-radius: 0 0.3rem 0.3rem 0;
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.22rem;
	line-height: 1.35;
}

.jurnaltunggal__petikan p {
	margin: 0;
}

.jurnaltunggal__bawah {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--tepi);
}

/* =========================================================================
   20. Lantai: de voet van de site
   ========================================================================= */

.lantai {
	background: var(--kopi);
	color: var(--santan);
	padding: calc(var(--sela) * 0.8) 0 1.6rem;
	margin-top: var(--sela);
}

.lantai a {
	color: var(--tepi);
}

.lantai a:hover,
.lantai a:focus {
	color: #fff;
}

.lantai__rak {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.lantai__merk {
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1.35rem;
	margin-bottom: 0.6rem;
}

.lantai__merk-dua {
	color: #e8905f;
}

.lantai__kata {
	color: var(--tepi);
	max-width: 24rem;
}

.lantai__tajuk {
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e8905f;
	margin-bottom: 0.85rem;
}

/* Een tweede kopje in dezelfde kolom kleeft zonder deze regel vast aan de
   lijst erboven; dat is met het oog gevonden en niet door een proef. */
.lantai__senarai + .lantai__tajuk {
	margin-top: 1.6rem;
}

.lantai__senarai {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lantai__butir {
	margin: 0;
}

.lantai__pautan {
	display: inline-flex;
	align-items: center;
	min-height: 2.3rem;
	color: var(--tepi);
}

.lantai__alamat {
	margin: 0;
	color: var(--tepi);
	font-style: normal;
}

.lantai__alamat dt {
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e8905f;
	margin-top: 0.7rem;
}

.lantai__alamat dd {
	margin: 0.1rem 0 0;
}

.lantai__alamat dd a {
	display: inline-flex;
	align-items: center;
	min-height: 2.3rem;
}

.lantai__bawah {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid #4a382d;
	font-size: 0.9rem;
	color: var(--tepi);
}

.lantai__bawah p {
	margin: 0;
}

/* =========================================================================
   21. Pita kuki: een strook over de volle breedte onderaan
   ========================================================================= */

.pitakuki {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--kopi);
	color: var(--santan);
	border-top: 3px solid var(--bakar);
}

.pitakuki__dalam {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.4rem;
	padding: 0.95rem 1.15rem;
}

.pitakuki__kata {
	flex: 1 1 20rem;
	margin: 0;
	font-size: 0.96rem;
	color: var(--santan);
}

.pitakuki__kata a {
	color: var(--tepi);
}

.pitakuki__butang {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pitakuki__butang .cawan--sejuk {
	border-color: var(--tepi);
	color: var(--tepi);
}

.pitakuki__butang .cawan--sejuk:hover,
.pitakuki__butang .cawan--sejuk:focus {
	background: var(--tepi);
	color: var(--kopi);
}

.jadualkuki {
	width: 100%;
}

.jadualkuki code {
	font-size: 0.94rem;
	color: var(--gula);
	word-break: break-all;
}

/* =========================================================================
   22. Verschijnen bij het scrollen
   ------------------------------------------------------------------------
   Er is precies een klas met opacity: 0 in dit blad, en de waarnemer in
   main.js kijkt naar precies die klas. Zonder JavaScript staat de klas .js
   niet op html en blijft alles gewoon zichtbaar.
   ========================================================================= */

.js .naik {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .naik.tiba {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .naik,
	.js .naik.tiba {
		opacity: 1;
		transform: none;
		transition: none;
	}

	* {
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   23. Smaller dan een tafelblad
   ========================================================================= */

@media (max-width: 1000px) {
	.rakvitrin {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.angkahari {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jadualharga,
	.cawansaya,
	.duokaunter,
	.ajakan,
	.kepalakedai__rak {
		grid-template-columns: minmax(0, 1fr);
	}

	.duokaunter--balik .duokaunter__sisi {
		order: 0;
	}

	.rakorang {
		grid-template-columns: minmax(0, 1fr);
	}

	.lantai__rak {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ajakan__gambar {
		min-height: 13rem;
		max-height: 20rem;
	}
}

@media (max-width: 900px) {
	.senaraikedai {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--santan);
		border-bottom: 1px solid var(--tepi);
		box-shadow: 0 12px 24px rgba(45, 33, 26, 0.12);
		padding: 0.5rem 1.15rem 1rem;
	}

	.tenda--buka .senaraikedai {
		display: flex;
	}

	.senaraikedai__pautan {
		min-height: 3rem;
		border-bottom: 1px solid var(--tepi);
		border-radius: 0;
	}

	.tenda {
		position: sticky;
	}

	.tenda__dalam {
		position: relative;
	}

	.butangloceng {
		display: inline-flex;
	}

	.jubinulasan {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 660px) {
	:root {
		--sela: 2.3rem;
	}

	/* De tarieftabel wordt een stapel: een tabel met vier kolommen duwt de
	   telefoon breder dan het scherm, ook binnen een strook met scrollen. */
	.medanharga {
		overflow-x: visible;
		border: 0;
		background: transparent;
	}

	.jadual,
	.jadual thead,
	.jadual tbody,
	.jadual caption {
		display: block;
		width: 100%;
	}

	.jadual thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.jadual caption {
		border: 1px solid var(--tepi);
		border-radius: 0.3rem 0.3rem 0 0;
		background: var(--susu);
	}

	.jadual tbody tr {
		display: block;
		padding: 0.5rem 0;
		border: 1px solid var(--tepi);
		border-top: 0;
		background: var(--santan);
	}

	.jadual tbody tr:last-child {
		border-radius: 0 0 0.3rem 0.3rem;
	}

	.jadual th,
	.jadual td {
		display: block;
		width: auto;
		border-bottom: 0;
		padding: 0.28rem 1rem;
		white-space: normal;
	}

	.jadual td::before {
		content: attr(data-tajuk);
		display: block;
		font-size: 0.78rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--laut);
	}

	.barisharga__nama {
		font-size: 1.12rem;
		font-family: 'Familjen Grotesk', system-ui, sans-serif;
	}

	.barisharga__wang,
	.barisharga__isi {
		white-space: normal;
	}

	.jubinulasan {
		grid-template-columns: minmax(0, 1fr);
	}

	.jubinulasan__jubin {
		min-height: 0;
	}

	.rakvitrin {
		grid-template-columns: minmax(0, 1fr);
	}

	.angkahari {
		grid-template-columns: minmax(0, 1fr);
	}

	.kadorang {
		grid-template-columns: minmax(0, 1fr);
	}

	.kadorang__gambar {
		max-width: 12rem;
	}

	.lantai__rak {
		grid-template-columns: minmax(0, 1fr);
	}

	.iramahari__butir {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}

	.pitakuki__butang {
		width: 100%;
	}

	.pitakuki__butang .cawan {
		flex: 1 1 9rem;
	}

	.cawansaya__nilai div {
		min-width: 6.5rem;
	}

	.jalurfakta {
		gap: 0.9rem 2rem;
	}
}

@media (max-width: 420px) {
	.tenda__merk {
		font-size: 1.24rem;
	}

	.tenda__cta {
		font-size: 0.9rem;
		padding: 0.55rem 0.8rem;
	}

	.kepalakedai__butang .cawan,
	.jubinulasan__pautan .cawan,
	.jurnaltunggal__bawah .cawan {
		flex: 1 1 100%;
	}
}