/* ═══════════════════════════════════════════
   HAKK Bible — Base Theme Styles
   Colors & typography aligned with mobile app
   ═══════════════════════════════════════════ */

:root {
  /* ── Base Colors (same as app default theme) ── */
  --hakk-text:             #262262;
  --hakk-bg:               #FDFBF7;

  /* ── Derived Colors (matches deriveTheme()) ── */
  --hakk-card-bg:          #FEFCF9;
  --hakk-secondary-text:   #888399;
  --hakk-separator:        #DDDAE5;
  --hakk-accent:           #262262;
  --hakk-icon:             #807BA0;
  --hakk-section-title:    #5B5679;

  /* ── Ornament / Flourish ── */
  --hakk-ornament:         #888399;     /* secondaryText from app */
  --hakk-flourish-gold:    #C1B49A;     /* splash screen gold */

  /* ── Constants ── */
  --hakk-radius:           12px;
  --hakk-font:             'Literata', Georgia, 'Times New Roman', serif;
}

/* ── Reset & Base ─────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--hakk-font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--hakk-text);
  background-color: var(--hakk-bg);
}

/* ── Typography ───────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hakk-font);
  color: var(--hakk-text);
  line-height: 1.3;
}

a {
  color: var(--hakk-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

/* ── Elementor Overrides ──────────────────── */

/* Make Elementor sections respect our palette */
.elementor-section {
  font-family: var(--hakk-font);
}

/* Cards / boxes */
.hakk-card {
  background: var(--hakk-card-bg);
  border-radius: var(--hakk-radius);
  padding: 2rem;
}

/* ── Ornament Components ──────────────────── */

/* Corner ornament frame */
.hakk-ornament-frame {
  position: relative;
  padding: 3rem 2rem;
}

.hakk-ornament-frame .hakk-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  color: var(--hakk-ornament);
}

.hakk-ornament-frame .hakk-corner svg {
  width: 100%;
  height: 100%;
}

.hakk-ornament-frame .hakk-corner--tl { top: 0; left: 0; }
.hakk-ornament-frame .hakk-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.hakk-ornament-frame .hakk-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hakk-ornament-frame .hakk-corner--br { bottom: 0; right: 0; transform: scale(-1); }

/* Flourish divider */
.hakk-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--hakk-flourish-gold);
}

.hakk-flourish svg {
  height: 14px;
  width: auto;
}

/* Diamond separator (from reader screen) */
.hakk-diamond-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 2rem auto;
  max-width: 300px;
  color: var(--hakk-ornament);
}

.hakk-diamond-separator__line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.hakk-diamond-separator__diamond {
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
  margin: 0 8px;
  opacity: 0.5;
}

/* ── Buttons (app-style) ──────────────────── */

.hakk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border-radius: var(--hakk-radius);
  font-family: var(--hakk-font);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.hakk-btn--primary {
  background: var(--hakk-text);
  color: var(--hakk-bg);
}

.hakk-btn--primary:hover {
  opacity: 0.85;
}

.hakk-btn--outline {
  background: transparent;
  color: var(--hakk-text);
  border: 2px solid var(--hakk-text);
}

.hakk-btn--outline:hover {
  background: var(--hakk-text);
  color: var(--hakk-bg);
}

/* ── Ornament Flip Utilities (for Elementor Image widgets) ── */
/* Applied via CSS Classes in Elementor Advanced tab */

.hakk-flip-x,
.hakk-flip-x .elementor-widget-container,
.hakk-flip-x .elementor-widget-container img {
  transform: scaleX(-1) !important;
}
.hakk-flip-y,
.hakk-flip-y .elementor-widget-container,
.hakk-flip-y .elementor-widget-container img {
  transform: scaleY(-1) !important;
}
.hakk-flip-xy,
.hakk-flip-xy .elementor-widget-container,
.hakk-flip-xy .elementor-widget-container img {
  transform: scale(-1) !important;
}

/* Ornament opacity for Image widgets */
.hakk-ornament-img img { opacity: 0.35; }

/* Flourish image sizing */
.hakk-flourish-img img { opacity: 0.7; }

/* Image Carousel — app screenshots styling */
.hakk-app-carousel .swiper-slide img,
.hakk-carousel-section .swiper-slide img {
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(38,34,98,0.1);
}

/* Carousel arrows — Elementor handles positioning via arrows_position: outside */

/* Elementor button overrides for HAKK style */
.elementor-widget-button .elementor-button {
  border-radius: var(--hakk-radius) !important;
  font-family: var(--hakk-font) !important;
}

/* Contact form placeholder section */
.hakk-form-placeholder {
  padding: 40px;
  border: 2px dashed var(--hakk-separator);
  border-radius: var(--hakk-radius);
  text-align: center;
  color: var(--hakk-secondary-text);
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
  body { font-size: 16px; }

  .hakk-ornament-frame { padding: 2rem 1rem; }
  .hakk-ornament-frame .hakk-corner { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .hakk-ornament-frame .hakk-corner { width: 24px; height: 24px; }
}