/* BCL brand layer.
   Source: bayarcash-os/bcl-brand-identity + Paper "BCL Brand Identity System" (01 Core Brand, 02 Web Surfaces:
   main.bcl.my), approved by Hanny 30 Sep 2026. Loaded after the old WordPress theme CSS (style.css) and wins over it.

   Rules: yellow #FED600 is the master colour, one yellow point per view (the main button), never yellow text on
   light grounds. Blue is for text links only. Clash Display Semibold for headlines, Inter for everything else.
   Cream for the page, hero and section bands; white for product surfaces (pricing cards, forms). No shadows. */

:root {
  /* Colour */
  --color-ink: #222222;
  --color-ink-muted: #66625A;
  --color-line: #E4DCC6;
  --color-cream: #F7F2E2;
  --color-white: #FFFFFF;
  --color-yellow: #FED600;
  --color-yellow-tint: #FDF3CE;
  --color-blue: #2D59E6;
  --color-success: #0F9D58;
  --color-error: #E5484D;

  /* Type */
  --font-display: "Clash Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-5xl: 120px; --text-4xl: 80px; --text-3xl: 56px; --text-2xl: 40px; --text-xl: 28px;
  --text-lg: 20px; --text-base: 16px; --text-sm: 14px; --text-xs: 12px;
  --tracking-tight: -0.01em; --tracking-wide: 0.08em;
  --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.5;

  /* Space, radius, layout */
  --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-6: 24px;
  --spacing-8: 32px; --spacing-12: 48px; --spacing-16: 64px; --spacing-24: 96px; --spacing-32: 128px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 9999px;
  --container-prose: 720px; --container-content: 1200px;

  /* The old theme's variables, pointed at the brand */
  --primary-yellow: var(--color-yellow);
  --yellow-primary: var(--color-yellow);
  --primary-blue: var(--color-blue);
  --blue-600: var(--color-blue);
  --beige-primary: var(--color-cream);
  --beige-50: var(--color-cream);
  --beige-100: var(--color-cream);
  --beige-200: var(--color-cream);
  --yellow-50: var(--color-yellow-tint);
  --yellow-100: var(--color-yellow-tint);
  --yellow-200: var(--color-cream);
  --grey-900: var(--color-ink-muted);
  --grey-950: var(--color-ink);

  /* Bootstrap defaults (#0D6EFD, #6C757D, #212529) -> brand */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-ink);
  --bs-body-color-rgb: 34, 34, 34;
  --bs-emphasis-color: var(--color-ink);
  --bs-secondary-color: var(--color-ink-muted);
  --bs-secondary-rgb: 102, 98, 90;
  --bs-primary: var(--color-ink);
  --bs-primary-rgb: 34, 34, 34;
  --bs-link-color: var(--color-blue);
  --bs-link-color-rgb: 45, 89, 230;
  --bs-link-hover-color: #2243D3;
  --bs-link-hover-color-rgb: 34, 67, 211;
  --bs-border-color: var(--color-line);
  --bs-heading-color: var(--color-ink);
}

/* ---------- Type ---------- */

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-cream);
}

h1, h2, h3, h4, h5, h6,
.standard-heading h1, .standard-heading h2,
#begin h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* Subheadings that the old theme marks up as h2/p are body text, not headlines */
#begin h2, #begin p, .standard-heading p {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-ink-muted);
}

/* Old weight fallbacks for text that used Plasto Medium / Semibold */
#main_nav ul, #footer ul { font-weight: 500; }

.text-muted { color: var(--color-ink-muted) !important; }

::selection { background-color: var(--color-yellow); color: var(--color-ink); }

/* Links: blue, text only */
.sl-prose a, #faq a, #terms a, .terms a, .entry-content a { color: var(--color-blue); }

/* ---------- Surfaces ---------- */

/* Hero and section bands: cream (the old theme faded yellow into beige) */
#begin { background: var(--color-cream); }

/* Product surfaces: white, brand line, no shadow */
.pricing-card { background: var(--color-white); border-color: var(--color-line); box-shadow: none; }
#faq .box, #general-feedback .box { background: var(--color-white); }

/* ---------- Buttons: one yellow point per view ---------- */

/* Main action (hero, section CTAs, the recommended plan): yellow with ink text */
.btn-bcl, .btn-apply {
  background-color: var(--color-yellow);
  color: var(--color-ink);
}

/* Navigation bar button: ink */
#main_nav .btn-bcl {
  background-color: var(--color-ink);
  color: var(--color-cream);
  border-radius: var(--radius-full);
}
#main_nav .btn-bcl:hover { background-color: #000; color: var(--color-white); }

/* "Bantuan" (help) was a blue button; blue is for links only */
#main_nav ul li a.bantuan {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
#main_nav ul li a.bantuan:hover { background-color: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }

/* Pricing: the recommended plan keeps the yellow button, the others are ink outline */
.pricing-card .cta-button.btn-bcl {
  background-color: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-full);
}
.pricing-card .cta-button.btn-bcl:hover { background-color: var(--color-ink); color: var(--color-cream); }
.pricing-card:has(.recommended-badge) .cta-button.btn-bcl {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
}
.pricing-card:has(.recommended-badge) .cta-button.btn-bcl:hover { background-color: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); }
.recommended-badge {
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: none;
  letter-spacing: var(--tracking-wide);
}

/* Grids of many cards (features, showcase): secondary ink-outline buttons */
.btn-bcl-feature, .btn-showcase {
  background-color: transparent !important;
  color: var(--color-ink) !important;
  border: 2px solid var(--color-ink) !important;
  border-radius: var(--radius-full);
}
.btn-bcl-feature:hover, .btn-showcase:hover {
  background-color: var(--color-ink) !important;
  color: var(--color-cream) !important;
}
.filter-btn.active { background-color: var(--color-ink) !important; color: var(--color-cream) !important; border-color: var(--color-ink) !important; }

/* MSME grant banner: "Apply Now" is its one yellow button; "Learn More" is ink outline */
.btn-apply:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); box-shadow: none; }
.btn-learn { color: var(--color-ink); border-color: var(--color-ink); }
.btn-learn:hover { background: var(--color-ink); color: var(--color-cream); box-shadow: none; }

/* ---------- Home hero (02 Web Surfaces: main.bcl.my) ---------- */

#begin .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--spacing-6);
}
#begin h1.brand-headline {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
}
#begin h1.brand-headline .line { display: block; }
@media (max-width: 991px) { #begin h1.brand-headline { font-size: var(--text-3xl); } }
@media (max-width: 576px) {
  #begin h1.brand-headline { font-size: 44px; }
  /* Phones: the brand line in 3 lines, "One link. / Everything / you sell." */
  #begin .eyebrow .brand-line-break { display: block; }
}

/* No em dashes on the site (Hanny, 30 Sep 2026): Bootstrap draws one before blockquote footers */
.blockquote-footer::before { content: "- "; }

/* ---------- Content blocks added with the brand (30 Sep 2026) ---------- */

/* "Read the guide" links outside FAQ/legal: ink with an underline (blue is kept for FAQ and legal links) */
.text-link {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-line);
}
.text-link:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
#faq .box.answered a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Feature blocks: the label above each title */
#features-list .banner .message, #detail-features .banner .message {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
#features-list .title, #detail-features .title { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); }

/* "More in BCL" grid */
#more-in-bcl { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
#more-in-bcl .more-card {
  height: 100%;
  padding: var(--spacing-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
#more-in-bcl .more-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--spacing-3);
}
#more-in-bcl .more-tag {
  display: inline-block;
  margin-left: var(--spacing-3);
  padding: 2px 10px;
  vertical-align: middle;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-yellow-tint);
  border-radius: var(--radius-full);
}
#more-in-bcl p { color: var(--color-ink-muted); font-size: var(--text-base); line-height: var(--leading-normal); }
#begin .guide-link { margin-top: var(--spacing-6); font-size: var(--text-base); }
/* COD block (hidden on WordPress, so its layout was never finished): keep both screenshots inside the card */
#cod-card .creative { position: relative; overflow: hidden; border-radius: var(--radius-md); }

/* ---------- Hero: copy left, admin screens right, sliding up (Hanny, 30 Sep 2026) ---------- */

/* compact (Hanny): content starts just under the floating nav; #begin sits under it (margin-top: -10rem) */
#begin.hero-split { text-align: left; padding-top: 11rem; padding-bottom: 2.5rem; }
#begin.hero-split .hero-copy .eyebrow { margin-bottom: var(--spacing-4); }
#begin.hero-split h1.brand-headline { font-size: var(--text-3xl); margin-bottom: var(--spacing-4); }
#begin.hero-split .hero-description {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  margin: 0 0 var(--spacing-8);
  max-width: 34em;
}
#begin.hero-split .hero-cta {
  display: inline-block;
  margin-top: 0;
  padding: 0.9rem 2.25rem;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--radius-full);
  text-decoration: none;
}
#begin.hero-split .hero-cta:hover { background-color: var(--color-ink); color: var(--color-cream); transform: none; }
#begin.hero-split .remark { text-align: left; margin-top: var(--spacing-3); }

.hero-stack {
  position: relative;
  aspect-ratio: 16 / 11.4;
  margin-bottom: var(--spacing-8);
}
.hero-shot {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  /* the one place the brand allows a shadow: very soft, on floating mockups */
  box-shadow: 0 30px 60px -30px rgba(34, 34, 34, 0.30);
  transform-origin: 50% 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
  will-change: transform, opacity;
}
.hero-shot-view { overflow: hidden; aspect-ratio: 16 / 10; }
.hero-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top left;
}
  32%, 100% { transform: scale(1.5) translate(-33.33%, 0); }
}
.hero-shot-bar {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-line);
}
.hero-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); }
.hero-shot-bar em {
  margin-left: 10px; padding: 2px 12px;
  font: 500 11px/1.4 var(--font-sans); font-style: normal;
  color: var(--color-ink-muted);
  background: var(--color-white); border-radius: var(--radius-full);
}
/* front, two peeking below, then hidden; the screen that leaves slides up and fades */
.hero-shot[data-pos="0"]   { transform: translateY(0) scale(1); opacity: 1; z-index: 4; }
.hero-shot[data-pos="1"]   { transform: translateY(calc(6% + 18px)) scale(0.94); opacity: 1; z-index: 3; }
.hero-shot[data-pos="2"]   { transform: translateY(calc(12% + 34px)) scale(0.88); opacity: 1; z-index: 2; }
.hero-shot[data-pos="3"]   { transform: translateY(calc(18% + 50px)) scale(0.82); opacity: 0; z-index: 1; }
.hero-shot[data-pos="out"] { transform: translateY(-14%) scale(1.02); opacity: 0; z-index: 5; pointer-events: none; }

@media (max-width: 991px) {
  #begin.hero-split { padding-top: 9.5rem; padding-bottom: 1.5rem; }
  #begin.hero-split h1.brand-headline { font-size: 44px; }
  .hero-stack { margin-top: var(--spacing-4); }
}
@media (prefers-reduced-motion: reduce) { .hero-shot { transition: none; } }