/*
Theme Name: Laptop Bekas Jogja
Theme URI: https://laptopbekasjogja.id
Author: Laptop Bekas Jogja
Description: Custom classic theme (no page builder) for laptopbekasjogja.id v5 — B2C fokus jual laptop bekas + landing sewa (B2B). WooCommerce templates overridden under /woocommerce/. Mobile-first, BEM naming, minimal JS. See TASK.md / REDESIGN-PLAN-V2.md.
Version: 8.14.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: lbj
*/

/*
 * DESIGN TOKENS
 * All visual tokens live here as CSS custom properties so styling stays
 * consistent and client re-branding is a one-file change.
 */

/*
 * Font self-hosted (variable woff2, subset latin) — tanpa request Google Fonts.
 * Sora (display, geometric techy) + Public Sans (body). Lisensi: SIL OFL 1.1.
 */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("assets/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette — Direction "LAPAK JOGJA" (v3).
   * Ink-indigo + marigold + kertas hangat. Ref: REDESIGN-PLAN.md. */
  --color-ink: #16203a;          /* Brand utama: teks kuat, band gelap, tombol */
  --color-ink-soft: #2c3a61;     /* hover/sekunder */
  --color-marigold: #f0a62b;     /* aksen: promo, harga oke, highlight */
  --color-marigold-dark: #d98f14;
  --color-marigold-ink: #3a2a00; /* teks di atas marigold (kontras) */
  --color-verified: #1f8a57;     /* HANYA cap lulus QC / garansi */
  --color-rental: #0e7490;       /* lini Sewa */
  --color-rental-dark: #0b5f76;

  /* v4 — diferensiasi dua lini (Jual vs Sewa), dipakai nav/hero/section. */
  --color-lane-sell: var(--color-ink);
  --color-lane-sell-soft: var(--color-paper-soft);
  --color-lane-rent: var(--color-rental);
  --color-lane-rent-soft: #e6f2f5;

  /* Nama token lama tetap dipertahankan agar komponen yang ada tidak pecah. */
  --color-primary: var(--color-ink);
  --color-primary-dark: #0e1729;
  --color-accent: var(--color-marigold);
  --color-accent-dark: var(--color-marigold-dark);
  --color-whatsapp: #1f8a57;     /* WA tetap hijau (dikenali), diselaraskan */
  --color-whatsapp-dark: #166b42;
  --color-success: var(--color-verified);
  --color-warning: var(--color-marigold);
  --color-danger: #c0392b;
  --color-grade-a: var(--color-verified); /* Grade A / Seperti Baru */
  --color-grade-b: #2563eb;               /* Grade B / Bekas Pakai Ringan */
  --color-grade-c: var(--color-marigold); /* Grade C / Bekas Pakai Jelas */

  /* Neutrals: kertas hangat + ink. */
  --color-paper: #faf7f2;        /* latar halaman */
  --color-paper-soft: #f1ece3;   /* section selang-seling */
  --color-bg: #ffffff;           /* permukaan/kartu */
  --color-bg-soft: var(--color-paper-soft);
  --color-bg-dark: var(--color-ink); /* band gelap/footer/CTA Sewa */
  --color-text: #1e2536;
  --color-text-muted: #6b6253;   /* muted hangat */
  --color-border: #e4ddd0;       /* hairline kertas */
  --color-band: var(--color-paper-soft);

  /* ---- Ramps (hue konsisten; jangan generate shade saat runtime) ---- */
  /* Warm grey (hue ~35) */
  --grey-100: hsl(35, 25%, 97%);
  --grey-200: hsl(35, 20%, 92%);
  --grey-300: hsl(35, 16%, 85%);
  --grey-400: hsl(35, 12%, 65%);
  --grey-500: hsl(35, 12%, 48%);
  --grey-600: hsl(35, 14%, 38%);
  --grey-700: hsl(35, 18%, 28%);
  --grey-800: hsl(35, 22%, 20%);
  --grey-900: hsl(35, 30%, 13%);
  /* Ink (brand) */
  --ink-100: hsl(225, 55%, 96%);
  --ink-200: hsl(225, 45%, 90%);
  --ink-500: #16203a;
  --ink-600: #101830;
  --ink-700: #0b1122;
  /* Accents: 100 = tint, 500 = solid, 800 = teks di atas tint */
  --marigold-100: hsl(38, 100%, 93%);
  --marigold-500: #f0a62b;
  --marigold-600: #d98f14;
  --marigold-800: #6b4a00;
  --red-100: hsl(6, 90%, 95%);
  --red-500: #c0392b;
  --red-800: #7a1f14;
  --green-100: hsl(150, 40%, 93%);
  --green-500: #1f8a57;
  --green-800: #0f4d31;
  --teal-100: hsl(192, 45%, 92%);
  --teal-500: #0e7490;
  --teal-800: #073f4d;

  /* ---- Typography (px/rem saja; skala 12/14/16/18/20/24/30/36/48) ---- */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.875rem;  /* 30 */
  --text-4xl: 2.25rem;   /* 36 */
  --text-5xl: 3rem;      /* 48 */
  /* Heading roles — satu skala, dipakai konsisten di semua halaman. */
  --text-hero: clamp(2.25rem, 5vw, 3rem);      /* 36 → 48 */
  --text-h2: clamp(1.5rem, 3vw, 1.875rem);     /* 24 → 30 */
  /* Alias lama → snap ke skala (komponen existing tetap valid). */
  --fs-xs: var(--text-xs);
  --fs-sm: var(--text-sm);
  --fs-base: var(--text-base);
  --fs-md: var(--text-lg);
  --fs-lg: var(--text-2xl);   /* 24 */
  --fs-xl: var(--text-3xl);   /* 30 */
  --fs-2xl: var(--text-4xl);  /* 36 */
  --weight-normal: 400;
  --weight-bold: 600;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-loose: 1.75;
  --measure: 34em;

  /* ---- Spacing (skala 4-based; nilai dirapikan) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  /* ---- Layout ---- */
  --container: 68rem;
  --gap-card: var(--space-4);

  /* ---- Radius: satu kepribadian, dua langkah konsentris ---- */
  --radius: 0.75rem;      /* 12 — kartu/kontrol */
  --radius-sm: 0.5rem;    /* 8  — elemen bersarang */
  --radius-tag: 0.25rem;  /* 4  — label kecil */
  --radius-full: 9999px;

  /* ---- Elevation: pilih per z-position, bukan per selera ---- */
  --elev-1: 0 1px 3px hsla(30, 20%, 8%, 0.14);   /* diam */
  --elev-2: 0 4px 6px hsla(30, 20%, 8%, 0.12);   /* dropdown */
  --elev-3: 0 6px 14px hsla(30, 20%, 8%, 0.14);  /* hover kartu */
  --elev-4: 0 10px 24px hsla(30, 20%, 8%, 0.16); /* panel melayang */
  --elev-5: 0 15px 35px hsla(30, 20%, 8%, 0.20); /* modal/hero frame */
  --shadow-sm: var(--elev-1);
  --shadow: var(--elev-3);
  --shadow-md: var(--elev-3);   /* FIX: sebelumnya token ini tidak terdefinisi */
  --shadow-lg: var(--elev-5);

  /* ---- Opacity tetap ---- */
  --opacity-1: 0.05;
  --opacity-2: 0.1;
  --opacity-3: 0.2;
  --opacity-4: 0.4;
  --opacity-5: 0.6;
  --opacity-6: 0.8;

  /* ---- Border width ---- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---- Semantic roles (pakai ini di komponen, bukan warna mentah) ---- */
  --surface: var(--color-paper);
  --surface-raised: var(--color-bg);
  --surface-sunken: var(--color-paper-soft);
  --border: var(--color-border);
  --border-strong: hsl(35, 14%, 42%);  /* ≥3:1 untuk garis yang mengidentifikasi kontrol */
  --text-primary: var(--color-text);
  --text-secondary: hsl(35, 20%, 30%);
  --text-tertiary: var(--color-text-muted);
  --text-disabled: hsl(35, 10%, 66%);
  --action: var(--color-ink);
  --action-text: #fff;
  /* Teks di atas band gelap (ink) — hand-picked, bukan putih-opacity. */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: hsl(35, 25%, 86%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-paper);
}

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

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-heading);
}

ul, ol { padding-left: 1.25rem; }

button { font-family: inherit; }

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-base);
}

/* ---- Layout helpers ---- */
.lbj-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Screen-reader skip link (accessibility). */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-primary); color: #fff;
  padding: var(--space-2) var(--space-4);
}
.skip-link:focus { left: 0; }

/* ---- Typography helpers ---- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.section-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

/* ---- Design system: focus & spacing polish (v1.2.1) ---- */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible, .wa-float:focus-visible {
  outline: 3px solid rgba(14, 159, 110, 0.5);
  outline-offset: 3px;
}
.section-title {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}
/* Heading display: Bricolage Grotesque sedikit lebih rapat (karakter lapak). */
h1, h2, h3 { letter-spacing: -0.01em; }

/* Sticky header tinggi ±70px → anchor jangan tertutup. */
html { scroll-padding-top: 84px; }

/* Tidak ada scroll horizontal: web selalu pas di lebar viewport.
   clip (bukan hidden) agar position:sticky tetap berfungsi. */
html, body { overflow-x: clip; }