/**
 * @file
 * Reusable utility classes for Aotearoa theme.
 * These follow DRY principles - use these instead of repeating patterns.
 */

/* ==========================================================================
   Drupal Logo Watermark
   Add to any container that needs the decorative watermark.
   ========================================================================== */

.has-watermark {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 200px;
    height: 200px;
    background-image: url('/themes/custom/aotearoa/images/drupal-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
  }

  > * {
    position: relative;
    z-index: 1;
  }
}

.has-watermark--small::after {
  width: 120px;
  height: 145px;
  bottom: -40px;
  right: -20px;
  opacity: 0.15;
}

/* ==========================================================================
   Scroll Container (Hidden Scrollbar)
   For horizontal scrolling carousels/showcases.
   ========================================================================== */

.scroll-container {
  display: flex;
  gap: var(--sp3);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.scroll-container--full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 7%;
}

/* ==========================================================================
   Sidescroller Navigation
   Previous/Next buttons for scrollable content.
   ========================================================================== */

.sidescroller-nav {
  display: none;
  justify-content: flex-end;
  gap: var(--sp1-5);
}

.sidescroller-nav.is-visible {
  display: flex;
}

.sidescroller-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 39px;
  background: var(--white);
  border: 1px solid var(--neutral-900);
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease, transform 0.2s ease;

  svg {
    width: 48px;
    height: 24px;
  }

  &:hover {
    background-color: var(--neutral-100);
    /* transform: scale(1.02); */
  }

  &:active {
    transform: scale(0.98);
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

/* ==========================================================================
   Tag / Pill Styles
   For taxonomy terms, version badges, etc.
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp1) var(--sp2);
  border-radius: var(--radius-lg);
  font-size: var(--body-s-size);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tag--primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white) !important;
  &:hover {
    background: var(--primary-dark, #055a8c);
    border-color: var(--primary-dark, #055a8c);
  }
}

.tag--outline {
  background: var(--white);
  border: 1px solid var(--neutral-900);
  color: var(--neutral-900);

  &:hover {
    background: var(--neutral-900);
    color: var(--white);
  }
}

.tag--secondary {
  background: var(--neutral-200);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-900);

  &:hover {
    background: var(--neutral-300);
    border-color: var(--neutral-300);
  }
}

/* ==========================================================================
   Tag Group
   Container for multiple tags.
   ========================================================================== */

.tag-group,
.tag-group > .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp1);
}

/* ==========================================================================
   Link Utilities
   ========================================================================== */

.link-reset {
  text-decoration: none;
  color: inherit;
}

.link-muted {
  text-decoration: none;
  color: var(--neutral-500);

  &:hover {
    color: var(--neutral-700);
  }
}

.link-primary {
  text-decoration: none;
  color: var(--primary);

  &:hover {
    text-decoration: underline;
  }
}

/* ==========================================================================
   Card Base
   Shared card styling with hover effects.
   ========================================================================== */

.card-base {
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid transparent;
  border-bottom: 3px solid var(--primary);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;

  &:hover {
    border-color: var(--primary);
  }

  /* Prevent contextual links from affecting card layout */
  .contextual {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
  }
}

/* ==========================================================================
   Empty State Hiding
   Hide containers with no meaningful content.
   ========================================================================== */

.hide-if-empty:not(:has(.view-content)):not(:has(.field)) {
  display: none;
}

/* ==========================================================================
   Flex Utilities
   ========================================================================== */

.flex-wrap-gap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
}

.flex-col-gap {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.section-padding {
  padding-block: var(--sp6);
}

.no-margin-top {
  margin-top: 0;
}