/* ============================================================
   COCONUT SERVICE SPECIFIC STYLES
   File: assets/css/services/coconut.css
   ============================================================ */

/* ================================
   Service Design System - Root Variables
   ================================ */
:root {
  /* Coconut Color Palette (Green) */
  --service-primary: #2fb46d; /* Fresh green */
  --service-dark: #1c7b4b; /* Dark green */
  --service-darker: #0d4321; /* Darker green */
  --service-light: #f0f9f5; /* Mint/light green */
  --rgb-service-primary: 47, 180, 109; /* For rgba opacity */
}

/* ================================
   SHARED SERVICE STYLES
   (All service pages use these patterns)
   ================================ */

/* ================================
   HERO ACTIONS (Buttons + Badges)
   ================================ */

.coconut-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 2rem; /* 32px */
  gap: 1.75rem; /* var(--space-md-lg) */
}

.coconut-hero-buttons {
  display: flex;
  gap: 1.125rem; /* var(--space-sm-lg) */
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Buttons */
.coconut-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  padding: 0.875rem 2rem; /* 14px 32px */
  border-radius: var(--radius-sm);
  border: none;
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(var(--space-2xs));
  box-shadow: 0 6px 20px rgba(0, 0, 0, var(--opacity-md));
}

.coconut-btn-primary {
  background: linear-gradient(
    90deg,
    var(--service-primary) 0%,
    var(--service-dark) 100%
  );
  color: var(--color-white);
}

.coconut-btn-primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(
    90deg,
    var(--service-dark) 0%,
    var(--service-primary) 100%
  );
  box-shadow: 0 var(--space-2xs) 25px rgba(var(--rgb-service-primary), 0.28);
}

.coconut-btn-primary:focus-visible {
  outline: 2px solid var(--service-primary);
  outline-offset: 2px;
}

.coconut-btn-outline {
  background: rgba(255, 255, 255, var(--opacity-xs));
  color: var(--color-white);
  border: var(--border-width-sm) solid rgba(255, 255, 255, var(--opacity-lg)); /* 2px */
}

.coconut-btn-outline:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, var(--opacity-sm));
  border-color: var(--service-primary);
  color: var(--service-primary);
}

.coconut-btn-outline:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Badges */
.coconut-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.coconut-hero-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  padding: var(--space-2xs) 26px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, var(--opacity-sm));
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, var(--opacity-md));
  backdrop-filter: blur(var(--space-xs));
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-align: center;
}

.coconut-hero-badge:hover {
  border-color: var(--service-primary);
  background: rgba(var(--rgb-service-primary), 0.12);
}

/* ================================
   General Page Setup
   ================================ */
.coconut-page-service {
  background: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.coconut-container {
  width: 100%;
  max-width: 90.625rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ================================
   Breadcrumb
   ================================ */
.coconut-breadcrumb {
  width: 100%;
  padding: var(--space-sm) 0;
  background: rgba(255, 255, 255, var(--opacity-lg));
  border-bottom: 1px solid rgba(0, 0, 0, var(--opacity-xs));
  backdrop-filter: blur(var(--space-xs));
}

.coconut-breadcrumb__content {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: rgba(0, 0, 0, var(--opacity-xl));
  font-family: var(--font-sans);
}

.coconut-breadcrumb__content a {
  color: rgba(0, 0, 0, var(--opacity-2xl));
  text-decoration: none;
  font-weight: var(--fw-regular);
  transition: var(--transition-timing-color);
}

.coconut-breadcrumb__content a:hover {
  color: var(--color-gold-accent);
}

.coconut-breadcrumb__separator {
  opacity: 0.6;
}

/* ================================
   HERO SERVICE SECTION
   ================================ */

.coconut-hero-service {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  color: white;
  margin-top: 26px;
  padding: var(--space-2xl-lg) var(--space-lg-xl);
  background: none;
}

.coconut-hero-service .coconut-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% center;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.02);
}

.coconut-hero-service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--opacity-xl)) 0%,
    rgba(0, 0, 0, var(--opacity-lg)) 45%,
    rgba(0, 0, 0, var(--opacity-sm)) 100%
  );
}

.coconut-hero-service .coconut-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.coconut-hero-service__content {
  width: 100%;
  max-width: var(--max-width-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  box-sizing: border-box;
}

.coconut-hero-service h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-sm-lg);
  text-align: left;
}

.coconut-hero-service .coconut-tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  opacity: 0.92;
  line-height: var(--lh-normal);
  margin-bottom: 0;
  margin-top: var(--space-sm);
  max-width: var(--max-width-card);
  text-align: left;
}

/* ================================
   Contact CTA Section
   ================================ */
.coconut-section-cta {
  padding: var(--space-2xl-3xl) 0;
  background: linear-gradient(
    135deg,
    var(--service-dark) 0%,
    var(--service-primary) 100%
  );
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.coconut-section-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, var(--opacity-sm)),
    transparent 70%
  );
  z-index: 0;
}

.coconut-section-cta__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width-section);
  margin: 0 auto;
}

.coconut-section-cta h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm-lg);
}

.coconut-section-cta p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  opacity: 0.92;
  font-weight: var(--fw-regular);
  margin-bottom: 35px;
}

.coconut-contact-info {
  display: flex;
  justify-content: center;
  gap: var(--space-lg-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg-xl);
}

.coconut-contact-info__item {
  background: rgba(255, 255, 255, var(--opacity-xs));
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: var(--space-sm-lg) var(--space-md);
  border-radius: 14px;
  min-width: var(--width-input-min);
  text-align: center;
  backdrop-filter: blur(var(--space-xs));
}

.coconut-contact-info__label {
  display: block;
  font-size: var(--fs-xs);
  opacity: 0.75;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
}

.coconut-contact-info__value a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: white;
  text-decoration: none;
}

.coconut-contact-info__value a:hover {
  text-decoration: underline;
}

.coconut-cta-button {
  /* White bg with service primary text color */
  display: inline-block;
  padding: 14px 34px;
  border-radius: var(--radius-full);
  background: white;
  color: var(--service-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 14px 35px rgba(0, 0, 0, var(--opacity-md));
}

.coconut-cta-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 var(--space-sm-lg) var(--space-lg-xl) rgba(0, 0, 0, 0.35);
}

.coconut-back-navigation {
  padding: var(--space-lg-xl) 0 var(--space-2xl-lg) 0;
  background: white;
  text-align: center;
}

.coconut-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: rgba(0, 0, 0, 0.78);
  padding: var(--space-sm) 22px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, var(--opacity-sm));
  transition: all var(--transition);
}

.coconut-back-link:hover {
  background: rgba(var(--rgb-service-primary), 0.06);
  border-color: rgba(var(--rgb-service-primary), 0.25);
  color: var(--service-primary);
  transform: translateY(-3px);
}

.coconut-back-link span:first-child {
  font-size: var(--fs-lg);
}

/* ================================
   Responsive - Coconut Hero Service
   ================================ */

/* Tablet: 992px (62rem) */
@media (max-width: 62rem) {
  /* 992px */
  .coconut-hero-service {
    min-height: 33.75rem; /* 540px */
    justify-content: center;
    padding: 4.375rem 1.875rem; /* 70px var(--space-lg-sm) */
  }

  .coconut-hero-service .coconut-container {
    justify-content: center;
  }

  .coconut-hero-service__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .coconut-hero-service h1 {
    font-size: var(--fs-3xl);
    text-align: center;
  }

  .coconut-hero-service .coconut-tagline {
    text-align: center;
    max-width: 38.75rem; /* 620px */
  }

  .coconut-hero-actions {
    align-items: center;
  }

  .coconut-hero-buttons {
    justify-content: center;
  }

  .coconut-hero-badges {
    justify-content: center;
  }

  .coconut-hero-service .coconut-hero-bg {
    object-position: 50% 25%;
  }

  .coconut-hero-service::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--opacity-xl)) 0%,
      rgba(0, 0, 0, 0.38) 55%,
      rgba(0, 0, 0, 0.14) 100%
    );
  }
}

/* Mobile: 600px (37.5rem) */
@media (max-width: 37.5rem) {
  /* 600px */
  .coconut-hero-service {
    min-height: 26.25rem; /* 420px */
    padding: 3.4375rem 1.125rem; /* 55px var(--space-sm-lg) */
  }

  .coconut-hero-service h1 {
    font-size: var(--fs-2xl);
  }

  .coconut-hero-service .coconut-tagline {
    font-size: var(--fs-sm);
  }

  .coconut-hero-buttons,
  .coconut-hero-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.875rem; /* 14px */
  }

  .coconut-btn,
  .coconut-hero-badge {
    width: 100%;
    max-width: var(--size-xl);
    text-align: center;
  }

  .coconut-hero-service .coconut-hero-bg {
    object-position: 50% 15%;
  }
}

.coconut-section {
  padding: var(--section-padding);
}

.coconut-section--alt {
  background: var(--color-bg-light);
}

/* ================================
   TYPOGRAPHY CLASSES - COCONUT
   ================================ */
.coconut-section-title {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--service-primary);
  margin-bottom: var(--space-sm-lg);
  line-height: var(--lh-tight);
}

.coconut-section-title--center {
  text-align: center;
}

.coconut-section-text {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-sm-lg);
}

.coconut-section-text--center {
  text-align: center;
  max-width: var(--max-width-narrow);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-lg-xl);
}

.coconut-mini-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal) 0.05em;
  color: var(--service-primary);
  margin-bottom: var(--margin-bottom-heading);
}

/* ================================
   CHECK LIST - COCONUT
   ================================ */
.coconut-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.coconut-check-list li {
  padding: var(--space-sm) 0;
  padding-left: var(--space-lg-sm);
  position: relative;
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.coconut-check-list li:last-child {
  border-bottom: none;
}

.coconut-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--service-primary);
  font-weight: bold;
  font-size: var(--fs-lg);
}

/* ================================
   OVERVIEW SECTION - COCONUT
   ================================ */

.coconut-overview {
  padding: var(--section-padding);
  background: white;
}

.coconut-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg-xl);
}

/* ================================
   OVERVIEW SECTION - COCONUT
   ================================ */

.coconut-overview {
  padding: var(--section-padding);
  background: white;
}

.coconut-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg-xl);
}

.coconut-overview__text h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--service-primary);
  margin-bottom: 20px;
  line-height: var(--lh-tight);
}

.coconut-overview__text {
  padding-left: var(--space-lg-xl);
}

.coconut-overview__text .coconut-section-text {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-sm-lg);
}

.coconut-overview__highlights {
  padding: var(--space-lg-sm);
  border-radius: var(--space-sm);
}

.coconut-overview__highlights h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal) 0.05em;
  color: var(--service-primary);
  margin-bottom: var(--margin-bottom-heading);
}

/* ================================
   SERVICE OFFERS SECTION
   ================================ */
.coconut-offers {
  padding: var(--section-padding-lg);
}

.coconut-offers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md-lg);
  margin-top: var(--space-lg-xl);
}

/* ================================
   SERVICE CARDS
   ================================ */

.coconut-service-card {
  background: white;
  padding: var(--card-padding);
  border-radius: var(--space-sm);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition);
  min-height: var(--height-container-min);
  display: flex;
  flex-direction: column;
}

.coconut-service-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 var(--space-2xs) 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--service-primary);
}

.coconut-service-card__icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-sm);
  height: var(--height-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coconut-service-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--service-primary);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-tight);
}

.coconut-service-card__text {
  font-size: var(--fs-sm);
  color: rgba(0, 0, 0, var(--opacity-xl));
  line-height: var(--lh-normal);
  flex-grow: 1;
}

/* ================================
   Responsive - Coconut Service
   ================================ */

/* Tablet: 992px (62rem) */
@media (max-width: 62rem) {
  /* 992px */
  .coconut-section {
    padding: 3.75rem 0; /* 60px */
  }

  .coconut-section-title {
    font-size: var(--fs-xl);
  }

  .coconut-section-text {
    font-size: var(--fs-sm);
  }

  .coconut-service-card {
    padding: 2.25rem; /* 36px */
    min-height: auto;
  }
}

/* Mobile: 600px (37.5rem) */
@media (max-width: 37.5rem) {
  /* 600px */
  .coconut-section {
    padding: 2.5rem 0; /* var(--space-lg-xl) */
  }

  .coconut-section-title {
    font-size: var(--fs-xl);
  }

  .coconut-section-text {
    font-size: var(--fs-sm);
  }

  .coconut-service-card {
    padding: 1.5rem; /* var(--space-md) */
  }

  .coconut-service-card__icon {
    font-size: var(--fs-2xl);
    height: 3.75rem; /* 60px */
  }

  .coconut-service-card__title {
    font-size: var(--fs-md);
  }

  .coconut-service-card__text {
    font-size: var(--fs-xs);
  }

  .coconut-overview__text {
    padding-left: var(--space-md);
  }

  .coconut-offers {
    padding: var(--space-lg-xl) 0;
  }
}

@media (min-width: 48rem) {
  .coconut-overview__grid {
    grid-template-columns: 1.5fr 1fr;
  }

  .coconut-offers__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coconut-section-title {
    font-size: var(--fs-2xl);
  }
}

@media (min-width: 64rem) {
  .coconut-offers__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .coconut-section-title {
    font-size: var(--fs-2xl);
  }
}

/* ================================
   RTL Support - Coconut Service
   ================================ */

html[dir="rtl"] .coconut-overview__grid {
  direction: rtl;
}

html[dir="rtl"] .coconut-overview__text,
html[dir="rtl"] .coconut-overview__highlights {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .coconut-overview__text h2,
html[dir="rtl"] .coconut-overview__highlights h3 {
  text-align: right;
}

html[dir="rtl"] .coconut-check-list li {
  padding-left: 0;
  padding-right: var(--space-lg-sm);
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .coconut-check-list li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .coconut-service-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .coconut-service-card__title {
  text-align: right;
}

html[dir="rtl"] .coconut-service-card__text {
  text-align: right;
}

html[dir="rtl"] .coconut-overview__text,
html[dir="rtl"] .coconut-overview__highlights {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .coconut-overview__text h2,
html[dir="rtl"] .coconut-overview__highlights h3 {
  text-align: right;
}

html[dir="rtl"] .coconut-offers {
  text-align: center;
  direction: rtl;
}

/* ================================
   COCONUT PAGE SPECIFIC OVERRIDES
   ================================ */

/* Partner With Luxe Collective section */
.section-cta {
  background: rgb(49, 49, 49) !important;
  color: white;
}

.section-cta::before {
  background: none !important;
}

/* Footer styling for coconut pages */
.footer {
  background: rgb(35, 35, 35) !important;
}

/* Header language button styling */
.header__lang-btn {
  border-color: var(--service-primary);
  color: var(--service-primary);
}

.header__lang-btn:not(.header__lang-btn--active):hover {
  background-color: rgba(var(--rgb-service-primary), 0.1);
  border-color: var(--service-primary);
  color: var(--service-primary);
}

.header__lang-btn--active {
  background: linear-gradient(
    90deg,
    var(--service-primary) 0%,
    var(--service-dark) 100%
  );
  border-color: var(--service-dark);
  color: white;
  box-shadow: 0 6px 20px rgba(var(--rgb-service-primary), 0.3);
}

/* Header navigation link hover underline - green */
.header__nav-link::after {
  background: var(--service-primary);
}

/* Footer social links styling */
.footer__social-list .social-link {
  color: var(--service-primary);
  transition: all var(--transition-fast);
}

.footer__social-list .social-link:hover {
  background: rgba(var(--rgb-service-primary), 0.25);
  color: var(--service-darker);
  transform: translateY(-3px);
  box-shadow: 0 0.375rem 1rem rgba(var(--rgb-service-primary), 0.2);
}

/* Footer email and phone links styling */
.footer-link {
  color: var(--service-primary);
  transition: all var(--transition-fast);
}

.footer-link:hover {
  color: var(--service-primary);
  border-bottom-color: var(--service-primary);
}

/* Contact info styling */
.contact-info__value a {
  color: inherit;
  transition: all var(--transition-fast);
}

.contact-info__value a:hover {
  color: var(--service-primary);
}

/* ================================
   Coconut Service - Header/Footer
   Overrides
   ================================ */

/* Header logo hover - use coconut green */
.header__logo:hover {
  color: var(--service-primary);
}

/* Footer section heading hover - use coconut green */
.footer-section h4:hover {
  color: var(--service-primary);
  transition: all var(--transition-fast);
}

/* ================================
   Footer Responsive - Tablet (56.25rem / 900px)
   ================================ */
@media (max-width: 56.25rem) {
  .footer__content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-x: visible;
    grid-template-columns: unset;
    gap: var(--space-xl);
  }

  .footer__bottom {
    white-space: normal;
    overflow-x: visible;
  }

  .footer-section {
    flex: 0 1 auto;
    flex-shrink: 0;
    white-space: normal;
    text-align: center;
    width: 100%;
  }

  .footer__social-list {
    justify-content: center;
  }
}