/**
 * Glow & Ink brand — black / white / cream minimalist boho + blush accent.
 * Overrides Asli :root CSS custom properties from css/main.css.
 * Kit/Site Settings values can still override these if set with higher specificity
 * (Elementor inline). Match the Site Settings list in the deliverable notes.
 */

/* Google Fonts loaded via functions.php (Cormorant Garamond + DM Sans) */

:root {
  /* —— Brand tokens —— */
  --glow-ink-black: #111111;
  --glow-ink-black-rgb: 17, 17, 17;
  --glow-ink-white: #ffffff;
  --glow-ink-cream: #faf7f5;
  --glow-ink-cream-rgb: 250, 247, 245;
  --glow-ink-grey: #8a8580;
  --glow-ink-grey-rgb: 138, 133, 128;
  --glow-ink-grey-soft: #c8c2bc;
  --glow-ink-blush: #e8b4b8;
  --glow-ink-blush-rgb: 232, 180, 184;
  --glow-ink-blush-deep: #c97b85;
  --glow-ink-blush-deep-rgb: 201, 123, 133;
  --glow-ink-blush-wall: #f2d6d8;
  --glow-ink-blush-wall-rgb: 242, 214, 216;

  /* —— Fonts —— */
  --font-primary: "DM Sans", system-ui, sans-serif;
  --font-secondary: "Cormorant Garamond", "Times New Roman", serif;

  /* Paragraph / UI colors (light theme) */
  --paragraph-color-light-theme: var(--glow-ink-black);
  --paragraph-color-dark-theme: #f0ece8;
  --paragraph-color: var(--paragraph-color-light-theme);
  --ui-element-color-light-theme: var(--glow-ink-black);
  --ui-element-color-dark-theme: var(--glow-ink-white);
  --ui-element-color: var(--ui-element-color-light-theme);

  /* Display / heading colors */
  --display-xxl-color-light-theme: var(--glow-ink-black);
  --display-xxl-color-dark-theme: var(--glow-ink-white);
  --display-xl-color-light-theme: var(--glow-ink-black);
  --display-xl-color-dark-theme: var(--glow-ink-white);
  --display-caps-color-light-theme: var(--glow-ink-black);
  --display-caps-color-dark-theme: var(--glow-ink-white);
  --h1-color-light-theme: var(--glow-ink-black);
  --h1-color-dark-theme: var(--glow-ink-white);
  --h2-color-light-theme: var(--glow-ink-black);
  --h2-color-dark-theme: var(--glow-ink-white);
  --h3-color-light-theme: var(--glow-ink-black);
  --h3-color-dark-theme: var(--glow-ink-white);
  --h4-color-light-theme: var(--glow-ink-black);
  --h4-color-dark-theme: var(--glow-ink-white);

  /* Thin elegant headings (logo-adjacent) */
  --display-xxl-font-weight: 300;
  --display-xl-font-weight: 300;
  --display-caps-font-weight: 300;
  --display-caps-letter-spacing: 0.12em;
  --h1-font-weight: 300;
  --h2-font-weight: 300;
  --h3-font-weight: 400;
  --h4-font-weight: 400;

  /* —— Core palette slots Asli uses everywhere —— */
  --color-dark-1: #111111;
  --color-dark-1-rgb: 17, 17, 17;
  --color-dark-2: #1a1a1a;
  --color-dark-2-rgb: 26, 26, 26;
  --color-dark-3: #2a2a2a;
  --color-dark-3-rgb: 42, 42, 42;
  --color-dark-4: #0a0a0a;
  --color-dark-4-rgb: 10, 10, 10;

  --color-gray-1: #8a8580;
  --color-gray-1-rgb: 138, 133, 128;
  --color-gray-2: #c8c2bc;
  --color-gray-2-rgb: 200, 194, 188;
  --color-gray-3: #6e6a66;
  --color-gray-3-rgb: 110, 106, 102;
  --color-gray-4: #9a9590;
  --color-gray-4-rgb: 154, 149, 144;

  --color-light-1: #f2ebe6;
  --color-light-1-rgb: 242, 235, 230;
  --color-light-2: #f7f3f0;
  --color-light-2-rgb: 247, 243, 240;
  --color-light-3: #faf7f5;
  --color-light-3-rgb: 250, 247, 245;
  --color-light-4: #ffffff;
  --color-light-4-rgb: 255, 255, 255;

  /* Accent = blush (light theme); softer blush on dark theme */
  --color-accent-light-theme: #e8b4b8;
  --color-accent-light-theme-rgb: 232, 180, 184;
  --color-accent-dark-theme: #f2d6d8;
  --color-accent-dark-theme-rgb: 242, 214, 216;
  --color-accent: var(--color-accent-light-theme);
  --color-accent-rgb: 232, 180, 184;

  --color-border-opacity-light-theme: rgba(17, 17, 17, 0.18);
  --color-border-opacity-dark-theme: rgba(255, 255, 255, 0.2);
  --color-border-opacity: var(--color-border-opacity-light-theme);
  --color-border-solid-light-theme: #111111;
  --color-border-solid-dark-theme: #ffffff;
  --color-border-solid: var(--color-border-solid-light-theme);

  --color-links-light-theme: #6e6a66;
  --color-links-dark-theme: #faf7f5;
  --color-links: var(--color-links-light-theme);
  --color-links-hover-light-theme: #c97b85;
  --color-links-hover-dark-theme: #e8b4b8;
  --color-links-hover: var(--color-links-hover-light-theme);

  --color-classic-submenu-links: #111111;
  --color-classic-submenu-links-hover: #c97b85;
  --color-classic-submenu-links-hover-background: rgba(232, 180, 184, 0.18);
  --color-classic-submenu-background: #ffffff;

  /* Custom slots (handy if widgets reference them) */
  --color-custom-1: #e8b4b8;
  --color-custom-1-rgb: 232, 180, 184;
  --color-custom-2: #c97b85;
  --color-custom-2-rgb: 201, 123, 133;
  --color-custom-3: #f2d6d8;
  --color-custom-3-rgb: 242, 214, 216;
  --color-custom-4: #111111;
  --color-custom-4-rgb: 17, 17, 17;
}

/* Body / page ground */
body {
  background-color: var(--glow-ink-cream);
  color: var(--glow-ink-black);
}

/* Serif on display / brand locks; body headings stay elegant without forced caps */
.display-xxl, .display-xl, .display-caps {
  font-family: var(--font-secondary);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preloader__heading,
.preloader__heading-text {
  font-family: var(--font-secondary);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, h3 {
  font-family: var(--font-secondary);
  font-weight: 300;
}

/* —— Preloader brand treatment —— */
#page-preloader,
#page-preloader .preloader__wrapper {
  color: var(--glow-ink-black);
  background-color: var(--glow-ink-cream);
}

#page-preloader .preloader__wrapper-counter {
  border-color: rgba(17, 17, 17, 0.18);
  color: var(--glow-ink-black);
}

#page-preloader .js-preloader__circle,
#page-preloader .preloader__wrapper-counter svg .circle {
  stroke: var(--glow-ink-blush);
}

#page-preloader .asli-child-countdown__digit,
#page-preloader .preloader__counter {
  font-family: var(--font-secondary);
  font-weight: 300;
  color: var(--glow-ink-black);
}

#page-preloader .preloader__loading-text,
#page-preloader .js-preloader__content {
  font-family: var(--font-primary);
  color: var(--glow-ink-grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75em;
}

/* Soft blush hover accents for common UI */
a:hover,
.color-accent {
  color: var(--glow-ink-blush-deep);
}

.bg-accent,
.background-accent {
  background-color: var(--glow-ink-blush) !important;
}


/* -------------------------------------------------------------------------
 * Front-page header: hide logo title/tagline box (burger/menu stays).
 * ------------------------------------------------------------------------- */
body.home #page-header .header__col_logo .logo__text,
body.home #page-header .logo__text {
  display: none !important;
}

body.home #page-header .header__col_logo.logo:not(:has(.logo__wrapper-img)) {
  visibility: hidden;
  pointer-events: none;
  width: 0 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}

body.home #page-header .header__col_logo .header__border-vertical {
  display: none !important;
}

/* -------------------------------------------------------------------------
 * Let's Glow circle: Elementor kit primary is #6EC1E4 (bright blue).
 * Force white circle with dark type + soft border for contrast.
 * ------------------------------------------------------------------------- */
:root {
  --e-global-color-primary: #ffffff;
}

body.home .rotating-button__link,
body.home .js-rotating-button__link,
.section-demo-screens-wall .rotating-button__link,
.section-demo-screens-wall .js-rotating-button__link {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid rgba(17, 17, 17, 0.18) !important;
  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.12);
}

body.home .rotating-button__link .rotating-button__label,
body.home .rotating-button__link .rotating-button__icon,
body.home .rotating-button__link svg,
.section-demo-screens-wall .rotating-button__link .rotating-button__label,
.section-demo-screens-wall .rotating-button__link .rotating-button__icon {
  color: #111111 !important;
  fill: #111111 !important;
}

body.home .rotating-button__dot,
.section-demo-screens-wall .rotating-button__dot {
  color: #111111 !important;
}

/* -------------------------------------------------------------------------
 * Hero screens-wall: 4 columns (~3–4 across), 4 full image rows in the viewport.
 * Lanes stay vertical columns; each tile is capped at 25vh so none are clipped.
 * ------------------------------------------------------------------------- */
body.home .section-demo-screens-wall,
body.home .section-demo-screens-wall.section-fullheight {
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

body.home .section-demo-screens-wall__wrapper-lanes,
body.home .js-screens-wall__list-container {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  align-items: stretch;
}

/* 4 vertical lanes side-by-side (~3–4 tiles across a desktop screen) */
body.home .section-demo-screens-wall .js-screens-wall__list-lane.col-lg-2,
body.home .section-demo-screens-wall .js-screens-wall__list-lane.col-lg-3,
body.home .section-demo-screens-wall .js-screens-wall__list-lane.col-3,
body.home .section-demo-screens-wall .js-screens-wall__list-lane {
  flex: 0 0 24% !important;
  max-width: 24% !important;
  width: 24% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
}

/* Exactly 4 photo bands fit in the viewport height */
body.home .section-demo-screens-wall .js-screens-wall__list-item {
  flex: 0 0 25vh;
  height: 25vh !important;
  max-height: 25vh !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.28rem !important;
  overflow: hidden;
  box-sizing: border-box;
}

body.home .section-demo-screens-wall .js-screens-wall__list-item .img-wrapper,
body.home .section-demo-screens-wall .js-screens-wall__list-item .has-aspect-ratio {
  height: 100% !important;
  width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
}

body.home .section-demo-screens-wall .js-screens-wall__list-item img,
body.home .section-demo-screens-wall .js-screens-wall__list-item .of-cover,
body.home .section-demo-screens-wall .js-screens-wall__list-item .of-contain,
body.home .section-demo-screens-wall .js-screens-wall__list-item .lazy {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}

@media (max-width: 991.98px) {
  /* Phone: still 4 lanes × 4 rows; slightly tighter gutters */
  body.home .section-demo-screens-wall .js-screens-wall__list-lane {
    flex: 0 0 24% !important;
    max-width: 24% !important;
    width: 24% !important;
  }

  body.home .section-demo-screens-wall .js-screens-wall__list-item {
    flex: 0 0 25vh;
    height: 25vh !important;
    max-height: 25vh !important;
    padding: 0.15rem !important;
  }
}

body.home .section-demo-screens-wall .section-demo-screens-wall__overlay,
body.home .js-screens-wall .screens-wall__content,
body.home .js-screens-wall [class*="rotating"] {
  z-index: 3;
}

/* -------------------------------------------------------------------------
 * Hero title + subtitle: bold for readability over the photo wall.
 * ------------------------------------------------------------------------- */
body.home .section-demo-screens-wall .typography-section-heading,
body.home .section-demo-screens-wall h1.typography-section-heading,
body.home .js-screens-wall .typography-section-heading,
body.home .section-demo-screens-wall .screens-wall__content h1 {
  font-family: "Cormorant Garamond", "Times New Roman", serif !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 18px rgba(250, 247, 245, 0.45);
}

body.home .section-demo-screens-wall .typography-section-description,
body.home .section-demo-screens-wall .screens-wall__content .typography-section-description,
body.home .js-screens-wall .typography-section-description {
  font-family: "Cormorant Garamond", "Times New Roman", serif !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 14px rgba(250, 247, 245, 0.4);
}