/*
Theme Name: BongKnot (Hello Elementor Child)
Theme URI: https://www.bongknot.com
Description: Child theme for BongKnot. Carries the Alta Maroon design direction, typographic craft baseline, and the custom PHP that Elementor Free cannot provide. Design tokens are owned by Elementor Global Variables; this file only consumes them.
Author: BongKnot
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-bongknot
*/

/* Fallbacks only. The live values are Elementor Global Variables on the active kit. */
:root {
  --ivory-ground: #FAF6EF;
  --surface: #FFFFFF;
  --ink: #241512;
  --maroon: #7A1220;
  --maroon-deep: #5A0D18;
  --gold: #B08A3E;
  --muted: #6E5A50;
  --line: #E3DACB;
  --font-heading: Marcellus;
  --font-body: Karla;
  --font-bengali: 'Noto Serif Bengali';
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 72px;
  --space-xxl: 120px;
  --radius: 3px;
}

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

body {
  background-color: var(--ivory-ground);
  color: var(--ink);
  font-family: var(--font-body), system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Display and headings sit tight. Density dial 0.35. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading), Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-md);
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); line-height: 1.15; }
h4 { font-size: 1.25rem; line-height: 1.2; }

p { margin: 0 0 var(--space-md); }

/* Running text stays between 62 and 68 characters. */
.bk-measure, .entry-content > p { max-width: 66ch; }

/* Bengali script sits under the English name, never replaces it. */
.bk-bn {
  display: block;
  font-family: var(--font-bengali), serif;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--muted);
}

/* Rationed uppercase label. One per three sections. */
.bk-eyebrow {
  font-family: var(--font-body), sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--space-sm);
}

/* Gold exists as a hairline. It never fills a shape. */
.bk-rule {
  width: 64px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--gold);
  margin: 0 0 var(--space-md);
}

a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--maroon-deep); }

/* One radius, no shadows anywhere. */
.bk-btn, button, input[type=submit] {
  display: inline-block;
  font-family: var(--font-body), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 90ms ease;
}
/* Specificity bumped (2 elements + class) to beat Elementor's global kit rule
   `.elementor-kit-6 a { color:#7A1220 }` (loaded in post-6.css), which was
   rendering primary-button text maroon-on-maroon (invisible). */
body a.bk-btn--primary { background: var(--maroon); color: var(--ivory-ground); text-decoration: none; }
body a.bk-btn--primary:hover { background: var(--maroon-deep); color: var(--ivory-ground); }
body a.bk-btn--secondary { background: transparent; color: var(--maroon); border-color: var(--maroon); text-decoration: none; }
body a.bk-btn--secondary:hover { background: var(--maroon); color: var(--ivory-ground); }
.bk-btn:active { transform: translateY(1px); }

.bk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Veg and non-veg marks follow Indian packaging convention, maroon replaces brown. */
.bk-diet { display: inline-block; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 2px; position: relative; vertical-align: -2px; }
.bk-diet::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.bk-diet--veg { color: #2E6B3E; }
.bk-diet--nonveg { color: var(--maroon); }

input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  padding: 12px 14px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }

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

::selection { background: var(--maroon); color: var(--ivory-ground); }

img { border-radius: 0; height: auto; max-width: 100%; }

/* Motion dial 0.2. Transform and opacity only, and it stops on request. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}