/**
 * Litir (Color Picker) Page Styles — page-id-83 (/litir/) and 8601 (/litaleit/)
 * Aligns dev with live serefni.is/litir/ while the dev site uses the
 * litaval-color-selector plugin shortcode and live uses the older Elementor
 * two-column widget.
 *
 * All rules are scoped to body.page-id-83 / body.page-id-8601 to avoid
 * leaking into other pages.
 */

/* ─── Page background ─── */
body.page-id-83,
body.page-id-8601 {
  background-color: #f6f4f4 !important;
}
body.page-id-83 .site-content,
body.page-id-83 .content-area,
body.page-id-83 .site-main,
body.page-id-8601 .site-content,
body.page-id-8601 .content-area,
body.page-id-8601 .site-main {
  background-color: #f6f4f4 !important;
}

/* ─── Full-width content on this page only ──────────────────────────────
   Dev body has .site-full-width-container (1140px cap); live uses
   .site-full-width-stretched-container (no cap). Override just the
   container that wraps this page's content. */
body.page-id-83 .site-content .woostify-container,
body.page-id-83 .site-content > .woostify-container,
body.page-id-8601 .site-content .woostify-container,
body.page-id-8601 .site-content > .woostify-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Litaval plugin colour & container defaults for this page.
   max-width: 1800 matches live's elementor-section boxed behaviour —
   at viewports up to 1800 the layout fills the width with no gap,
   beyond that there's a natural gutter on each side. */
body.page-id-83 .litaval-root,
body.page-id-8601 .litaval-root {
  --litaval-bg: #f6f4f4;
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Layout: sidebar + main ─────────────────────────────────────────────
   Live uses a ~30/70 split with the two columns adjacent (no gap). The
   sidebar grows with viewport width (436px at 1440, 545px at 1920) since
   it's a % of the container. */
body.page-id-83 .litaval-layout,
body.page-id-8601 .litaval-layout {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 0;
  padding: 0 !important;
  background: transparent !important;
}

/* ─── Sidebar panel: warm beige, 20px inner padding on sides like live ─── */
body.page-id-83 .litaval-sidebar,
body.page-id-8601 .litaval-sidebar {
  background-color: #EBE6E3 !important;
  padding: 35px 20px 64px 35px !important;
  position: relative;
  isolation: isolate;
}
/* No full-bleed extension — sidebar panel stays within the content
   container so a small left gap appears at wider viewports, matching
   live's behaviour. */
/* Sidebar children sit inside the sidebar's 20px padding, so no extra
   padding-left is needed — keeps h2/ul/div flush with panel inner edge. */
body.page-id-83 .litaval-sidebar > *,
body.page-id-8601 .litaval-sidebar > * {
  position: relative;
  z-index: 1;
}

/* ─── Sidebar typography ─────────────────────────────────────────────── */
body.page-id-83 .litaval-sidebar h2,
body.page-id-8601 .litaval-sidebar h2,
body.page-id-83 .litaval-favorites h3,
body.page-id-8601 .litaval-favorites h3 {
  font-family: "ivypresto-display", serif !important;
  font-size: 41px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 2px !important;
  line-height: 61.5px !important;
  color: #545b5c !important;
  margin: 0 0 24px !important;
}

/* Designer group links ("Roma - Rut Kára", "Appreciate the Details", …)
   — inherit the sidebar's 20px padding, no extra left offset needed. */
body.page-id-83 .litaval-group-links,
body.page-id-8601 .litaval-group-links {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 48px;
}
body.page-id-83 .litaval-group-links li,
body.page-id-8601 .litaval-group-links li {
  margin-bottom: 4px;
}
body.page-id-83 .litaval-sidebar .litaval-group-link,
body.page-id-8601 .litaval-sidebar .litaval-group-link {
  font-family: granville, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: #545b5c !important;
  text-decoration: none;
}
body.page-id-83 .litaval-sidebar .litaval-group-link:hover,
body.page-id-8601 .litaval-sidebar .litaval-group-link:hover {
  color: #2b2b2b !important;
}

/* Favorites grid: 3 columns, matching live */
body.page-id-83 .litaval-favorites,
body.page-id-8601 .litaval-favorites {
  margin-top: 8px;
}
body.page-id-83 .litaval-favorites-grid,
body.page-id-8601 .litaval-favorites-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.page-id-83 .litaval-favorites-empty,
body.page-id-8601 .litaval-favorites-empty {
  font-size: 14px;
  color: #6e6760;
  font-family: granville, serif;
}

/* ─── Main column ─────────────────────────────────────────────────────── */
body.page-id-83 .litaval-main,
body.page-id-8601 .litaval-main {
  padding: 35px 20px 64px 35px !important;
  gap: 40px;
}

/* Main-column section headings all match live at 41px ivypresto / ls 2px / lh 61.5.
   Applies to: "Leita eftir litaheiti", "Veldu grunnlit", "Hvítir litir",
   "Roma - Rut Kára", "Appreciate the Details", etc. */
body.page-id-83 .litaval-search label,
body.page-id-8601 .litaval-search label,
body.page-id-83 .litaval-group h3,
body.page-id-8601 .litaval-group h3,
body.page-id-83 .litaval-base-selector h3,
body.page-id-8601 .litaval-base-selector h3 {
  font-family: "ivypresto-display", serif !important;
  font-size: 41px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 2px !important;
  line-height: 61.5px !important;
  color: #545b5c !important;
  margin: 0 0 20px !important;
}

/* Color-card grid: fewer, larger cards (match live's 6-per-row) */
body.page-id-83 .litaval-colors-grid,
body.page-id-8601 .litaval-colors-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
}
@media (max-width: 1200px) {
  body.page-id-83 .litaval-colors-grid,
  body.page-id-8601 .litaval-colors-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
@media (max-width: 900px) {
  body.page-id-83 .litaval-colors-grid,
  body.page-id-8601 .litaval-colors-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body.page-id-83 .litaval-colors-grid,
  body.page-id-8601 .litaval-colors-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Individual card: bigger min-height (live cards are ~150×130) and larger card title */
body.page-id-83 .litaval-color-card,
body.page-id-8601 .litaval-color-card {
  min-height: 150px;
}
body.page-id-83 .litaval-color-title,
body.page-id-8601 .litaval-color-title {
  font-family: granville, serif !important;
  font-size: 15px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  left: 14px;
  bottom: 14px;
}
body.page-id-83 .litaval-color-card.is-light .litaval-color-title,
body.page-id-8601 .litaval-color-card.is-light .litaval-color-title {
  color: #3f3a34 !important;
}
body.page-id-83 .litaval-color-card.is-dark .litaval-color-title,
body.page-id-8601 .litaval-color-card.is-dark .litaval-color-title {
  color: #f4f0ea !important;
}

/* Base swatches ("Veldu grunnlit" row): taller, to match live */
body.page-id-83 .litaval-base-swatch,
body.page-id-8601 .litaval-base-swatch {
  height: 110px !important;
}

/* Search input row — match live's compact dimensions (input ~180×40) */
body.page-id-83 .litaval-search-input,
body.page-id-8601 .litaval-search-input {
  font-family: granville, serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  min-width: 180px;
  width: 180px;
  height: 40px;
  border: 1px solid #ccc !important;
  background: #fff;
}
body.page-id-83 .litaval-search-button,
body.page-id-8601 .litaval-search-button {
  font-family: granville, serif !important;
  font-size: 13px !important;
  padding: 0 18px !important;
  height: 40px;
  background: #545B5C !important;
  color: #fff !important;
  border: 1px solid #545B5C !important;
  letter-spacing: 1px;
}
body.page-id-83 .litaval-search-clear,
body.page-id-8601 .litaval-search-clear {
  font-family: granville, serif !important;
  font-size: 13px !important;
  padding: 0 18px !important;
  height: 40px;
  background: #545B5C !important;
  color: #fff !important;
  border: 1px solid #545B5C !important;
  letter-spacing: 1px;
}

/* ─── Modal ──────────────────────────────────────────────────────────────
   Bigger box + header typography matching live (ivypresto-display 700,
   #545B5C). Weight 700 falls back to 400 since ivypresto-display is only
   self-hosted at 400 — same visual as live. */
body.page-id-83 .litaval-modal-content,
body.page-id-8601 .litaval-modal-content {
  max-width: 1750px !important;
  width: 96% !important;
  padding: 48px 56px !important;
}

/* Color-name title ("Arctic Light" etc.) */
body.page-id-83 .litaval-modal-title,
body.page-id-8601 .litaval-modal-title {
  font-family: "ivypresto-display", serif !important;
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
  color: #545B5C !important;
  margin: 0 0 32px !important;
}

/* Section headings inside the right column ("Vista lit", "Veldu rými",
   "Svipaðir litir") — h4 elements and the "Vista lit" inline label. */
body.page-id-83 .litaval-modal-right h4,
body.page-id-83 .litaval-modal-label-text,
body.page-id-8601 .litaval-modal-right h4,
body.page-id-8601 .litaval-modal-label-text {
  font-family: "ivypresto-display", serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 45px !important;
  letter-spacing: normal !important;
  color: #545B5C !important;
  margin: 0 0 16px !important;
}

/* Extra breathing room above the "Svipaðir litir" section — sits between
   the room thumbs and the similar-colour swatches. */
body.page-id-83 .litaval-modal-section + .litaval-modal-section,
body.page-id-8601 .litaval-modal-section + .litaval-modal-section {
  margin-top: 32px !important;
}

/* Modal "Vista lit" button — grid layout so the two heart spans (outline
   + fill) stack in the same cell. Without this they sit side-by-side in
   the flex and the visible-state heart jumps horizontally when toggled. */
body.page-id-83 .litaval-modal-label,
body.page-id-8601 .litaval-modal-label {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  color: #545B5C !important;
}
body.page-id-83 .litaval-modal-label-text,
body.page-id-8601 .litaval-modal-label-text {
  grid-column: 1;
  grid-row: 1;
}
body.page-id-83 .litaval-modal-heart-outline,
body.page-id-83 .litaval-modal-heart-fill,
body.page-id-8601 .litaval-modal-heart-outline,
body.page-id-8601 .litaval-modal-heart-fill {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #545B5C !important;
  transform: translateY(-6px);   /* optical alignment with cap-line of "Vista lit" */
  transition: opacity 0.15s ease;
}
body.page-id-83 .litaval-modal-label .litaval-heart-icon,
body.page-id-8601 .litaval-modal-label .litaval-heart-icon {
  width: 28px !important;
  height: 28px !important;
}
body.page-id-83 .litaval-modal-label .litaval-heart-outline,
body.page-id-8601 .litaval-modal-label .litaval-heart-outline {
  stroke-width: 1.1 !important;
}

/* CTA title ("Panta prufu" / "Þarftu prufu?") — match live's big ivypresto
   white heading. The CTA background already flips to a darker tone when
   the viewed colour is dark, so we force white text unconditionally. */
body.page-id-83 .litaval-cta-title,
body.page-id-8601 .litaval-cta-title {
  font-family: "ivypresto-display", serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 45px !important;
  letter-spacing: normal !important;
  color: inherit !important;
  display: block !important;
}
/* Keep the CTA container's background dark enough for the white title
   to stay readable regardless of is-light swatch state. */
body.page-id-83 .litaval-modal-cta,
body.page-id-8601 .litaval-modal-cta {
  color: #ffffff !important;
}
body.page-id-83 .litaval-modal-cta.is-light,
body.page-id-8601 .litaval-modal-cta.is-light {
  color: #2f2c29 !important;
}
body.page-id-83 .litaval-modal-cta.is-light .litaval-cta-button,
body.page-id-8601 .litaval-modal-cta.is-light .litaval-cta-button {
  color: #ffffff !important;
}

/* ─── Footer spacing ─── */
body.page-id-83 .site-footer,
body.page-id-8601 .site-footer {
  margin-top: 100px !important;
}

/* ─── Hero: full-width grey banner — match live (section 41ce427)
   Live: height ~222px (90 top + 42 title + 90 bottom padding),
   heading ivypresto 42px, color #EBE6E3. */
body.page-id-83 .page-hero,
body.page-id-8601 .page-hero {
  background: #545B5C !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 90px 0 !important;
  margin-bottom: 0 !important;
}
body.page-id-83 .page-hero::before,
body.page-id-8601 .page-hero::before {
  width: 100% !important;
}
body.page-id-83 .page-hero-inner,
body.page-id-8601 .page-hero-inner {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  text-align: center !important;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-id-83 .page-hero .page-title,
body.page-id-8601 .page-hero .page-title {
  font-family: "ivypresto-display", serif !important;
  font-size: 42px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  color: #EBE6E3 !important;
  width: 100%;
  margin: 0 !important;
}
/* Hide the breadcrumb / description row that Woostify adds under the title,
   since live has none. */
body.page-id-83 .page-hero .woostify-breadcrumb,
body.page-id-83 .page-hero .page-description,
body.page-id-8601 .page-hero .woostify-breadcrumb,
body.page-id-8601 .page-hero .page-description {
  display: none !important;
}

/* ─── Responsive: stack on narrow screens (match plugin's own breakpoint) ── */
@media (max-width: 900px) {
  body.page-id-83 .litaval-layout,
  body.page-id-8601 .litaval-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.page-id-83 .litaval-sidebar,
  body.page-id-8601 .litaval-sidebar {
    padding: 32px 20px !important;
  }
  body.page-id-83 .litaval-sidebar > *,
  body.page-id-8601 .litaval-sidebar > * {
    padding-left: 0;
  }
  body.page-id-83 .litaval-main,
  body.page-id-8601 .litaval-main {
    padding: 32px 20px !important;
  }
  body.page-id-83 .litaval-sidebar h2,
  body.page-id-8601 .litaval-sidebar h2,
  body.page-id-83 .litaval-favorites h3,
  body.page-id-8601 .litaval-favorites h3 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }
}