/* ============================================
   KYRKJEBYGD OVERRIDES
   Custom styles for Kyrkjebygd village page
   ============================================ */

/* ============================================
   PERKS FEATURE BOX — Premium card design
   ============================================ */

/* Override base feature-box for perks section */
#perks .v-feature-box {
  background: linear-gradient(145deg, #263545 0%, #1a2530 100%);
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}

#perks .v-feature-box > .v-chapter__heading,
#perks .v-feature-box > .v-prose > p:first-child,
#perks .v-feature-box > .v-prose > p:last-child {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Subtle decorative accent */
#perks .v-feature-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    #2d6a3f 0%,
    #4a9f5e 25%,
    #6bc17e 50%,
    #4a9f5e 75%,
    #2d6a3f 100%);
}

/* Title styling */
#perks .v-chapter__title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom: 0.3em;
}

#perks .v-chapter__title::after {
  display: none; /* Remove the default green bar since we have the gradient top */
}

/* Intro paragraph */
#perks .v-feature-box > .v-prose > p:first-child {
  font-size: 1.15rem;
  color: rgba(250, 248, 245, 0.85);
  margin-bottom: var(--space-xl);
}

/* Perks grid container */
#perks .v-feature-box .v-prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Individual perk cards */
#perks .v-feature-box .v-prose li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s ease;
  position: relative;
}

#perks .v-feature-box .v-prose li:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(45, 106, 63, 0.4);
  transform: translateY(-2px);
}

/* Perk icon (using emoji as placeholder, can be replaced with SVG) */
#perks .v-feature-box .v-prose li::before {
  content: '';
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* Individual icons for each perk - universal symbols */

/* 1. Free kindergarten meals - Apple (food/nutrition) */
#perks .v-feature-box .v-prose li:nth-child(1)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
}

/* 2. Free school lunches - Utensils (fork & knife) */
#perks .v-feature-box .v-prose li:nth-child(2)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
}

/* 3. Free after-school care - Clock (time/care) */
#perks .v-feature-box .v-prose li:nth-child(3)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
}

/* 4. Building plots - House */
#perks .v-feature-box .v-prose li:nth-child(4)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
}

/* 5. Off-grid building grants - Trees/Nature */
#perks .v-feature-box .v-prose li:nth-child(5)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z'/%3E%3Cpath d='M7 16v6'/%3E%3Cpath d='M13 19v3'/%3E%3Cpath d='M18 22v-6'/%3E%3Cpath d='M17 10v.2a3 3 0 0 1 1.1 5.8H21a3 3 0 0 1-1-5.8V10a3 3 0 0 1-6 0Z' transform='translate(3)'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
}

/* 6. No property tax - Checkmark with coin (tax free) */
#perks .v-feature-box .v-prose li:nth-child(6)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8l-5.5 5.5L8 11'/%3E%3C/svg%3E") center/20px no-repeat, linear-gradient(135deg, #2d6a3f 0%, #4a9f5e 100%);
}

/* Perk title (strong tag) */
#perks .v-feature-box .v-prose li strong {
  font-family: 'Glacial Indifference', var(--font-display), sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  display: block;
}

/* Perk description (text after the dash) */
#perks .v-feature-box .v-prose li {
  font-size: 0.95rem;
  color: rgba(250, 248, 245, 0.7);
  line-height: 1.5;
}

/* Closing paragraph about seniors */
#perks .v-feature-box > .v-prose > p:last-child {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1rem;
  color: rgba(250, 248, 245, 0.7);
  margin-bottom: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #perks .v-feature-box {
    padding: 28px 14px;
  }

  #perks .v-feature-box > .v-chapter__heading,
  #perks .v-feature-box > .v-prose > p:first-child,
  #perks .v-feature-box > .v-prose > p:last-child {
    max-width: none;
  }

  #perks .v-feature-box .v-prose ul {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #perks .v-feature-box .v-prose li {
    padding: 18px 16px;
  }
}

@media (max-width: 500px) {
  #perks .v-feature-box {
    padding: 24px 10px;
  }

  #perks .v-chapter__title {
    font-size: 1.8rem;
  }

  #perks .v-feature-box .v-prose li::before {
    width: 36px;
    height: 36px;
  }

  #perks .v-feature-box .v-prose li {
    padding: 16px 14px;
  }
}

/* ============================================
   VIDEO SHOWCASE — Reduce space after quote
   ============================================ */

/* Tighter spacing when video follows a quote */
.v-quote + .v-video-showcase {
  margin-top: var(--space-lg);
}

/* Ski resort links should read as links inside the dark aside */
.v-aside__list a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1.5px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.v-aside__list a:hover,
.v-aside__list a:focus-visible {
  color: #f3c9b8;
  text-decoration-color: currentColor;
}

@media (max-width: 768px) {
  .v-aside--ski-resorts {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
  }
}

@media (max-width: 500px) {
  .v-aside--ski-resorts {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
}