/* =========================================================
   HADBERG PIERCING
   Custom styling
   Bootstrap 5.3 + Helix Ultimate
   ========================================================= */


/* ---------------------------------------------------------
   01. VARIABLES
   --------------------------------------------------------- */

:root {
  /* HadberG palette */
  --hg-bg: #f7f5f2;
  --hg-text: #181818;
  --hg-muted: #6c6966;
  --hg-accent: #d9c6bb;
  --hg-booking: #d2b8aa;
  --hg-line: #dedbd7;
  --hg-max: 1380px;

  /* Bootstrap 5.3 - HadberG theme */
  --bs-body-color: #181818;
  --bs-body-color-rgb: 24, 24, 24;

  --bs-light: #f7f5f2;
  --bs-light-rgb: 247, 245, 242;

  --bs-dark: #181818;
  --bs-dark-rgb: 24, 24, 24;

  --bs-secondary: #6c6966;
  --bs-secondary-rgb: 108, 105, 102;

  --bs-success: #52664d;
  --bs-success-rgb: 82, 102, 77;
  --bs-success-text-emphasis: #52664d;
  --bs-success-bg-subtle: #eef3eb;
  --bs-success-border-subtle: #cdd9c8;

  --bs-danger: #8a3e38;
  --bs-danger-rgb: 138, 62, 56;
  --bs-danger-text-emphasis: #8a3e38;
  --bs-danger-bg-subtle: #f8e9e7;
  --bs-danger-border-subtle: #e7c5c0;
}

/* ---------------------------------------------------------
   BOOTSTRAP COLOR UTILITIES - HADBERG
   Keep Bootstrap class names in the HTML.
   --------------------------------------------------------- */

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

.border-success-subtle {
  border-color: var(--bs-success-border-subtle) !important;
}

.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle) !important;
}

/* =========================================================
   HADBERG ACCORDION
   ========================================================= */

.accordion {
  --bs-accordion-color: var(--hg-text);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--hg-line);

  --bs-accordion-btn-color: var(--hg-text);
  --bs-accordion-btn-bg: transparent;

  --bs-accordion-active-color: var(--hg-text);
  --bs-accordion-active-bg: rgba(217, 198, 187, .22);

  --bs-accordion-btn-focus-border-color: var(--hg-line);
  --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--hg-text);
  background-color: rgba(217, 198, 187, .22);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: var(--hg-line);
  box-shadow: none;
}

.accordion-button::after {
  filter: grayscale(1);
}


/* =========================================================
   EDITORIAL IMAGES
   ========================================================= */

.hg-material-image {
  min-height: 520px;
}

@media (max-width: 991.98px) {

  .hg-material-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

}

@media (max-width: 767.98px) {

  #profile .ratio-21x9 {
    --bs-aspect-ratio: 75%;
  }

  .hg-material-image {
    aspect-ratio: 1 / 1;
  }

}

/* ---------------------------------------------------------
   02. GLOBAL
   --------------------------------------------------------- */

#sp-main-body {
  padding: 0;
}

.hg-home {
  background: var(--hg-bg);
  color: var(--hg-text);
}


/* HadberG display scale */
.display-1 {
  font-size: clamp(4.5rem, 7vw, 7rem);
}

.display-2 {
  font-size: clamp(4rem, 6vw, 6rem);
}

.display-3 {
  font-size: clamp(3.5rem, 5vw, 5rem);
}

.display-4 {
  font-size: clamp(3rem, 4vw, 4rem);
}

.display-5 {
  font-size: clamp(2.5rem, 3.5vw, 3.5rem);
}

/* ---------------------------------------------------------
   03. HADBERG DESIGN SYSTEM
   Bootstrap first - only utilities Bootstrap does not provide
   --------------------------------------------------------- */

/* Wider content area than Bootstrap .container-xxl */
.hg-container {
  width: min(calc(100% - 80px), var(--hg-max));
  margin-inline: auto;
}

/* Reusable section spacing */
.hg-section-space {
  padding-block: clamp(5rem, 8vw, 8.5rem);
}

.hg-section-space-sm {
  padding-block: clamp(5rem, 7vw, 6.5rem);
}

/* Brand backgrounds not represented by Bootstrap semantic colors */
.bg-hg-accent {
  background-color: var(--hg-accent) !important;
}

.bg-hg-booking {
  background-color: var(--hg-booking) !important;
}

/* Reusable small uppercase label */
.section-kicker {
  display: inline-block;
  color: var(--hg-muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Reusable content widths */
.hg-text-width {
  max-width: 470px;
}

.hg-copy-width {
  max-width: 650px;
}

/* Small button typography not covered by Bootstrap */
.hg-btn-label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
}

/* Reusable animated text link */
.hg-text-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding-bottom: .25rem;
  color: var(--hg-text);
  font-size: .875rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.hg-text-link:hover {
  color: var(--hg-text);
}

.hg-text-link span {
  transition: transform .25s ease;
}

.hg-text-link:hover span {
  transform: translateX(5px);
}


/* ---------------------------------------------------------
   04. HOMEPAGE - ONLY WHAT BOOTSTRAP CANNOT EXPRESS
   --------------------------------------------------------- */

.hg-hero-row {
  --bs-gutter-x: clamp(3rem, 6vw, 7rem);
}

.hg-hero-image {
  height: min(72vh, 780px);
  min-height: 650px;
}

.hg-intro-row {
  --bs-gutter-x: clamp(3rem, 8vw, 9rem);
}

.hg-piercing-image {
  height: clamp(430px, 42vw, 650px);
  background: rgba(255, 255, 255, .2);
}

.hg-piercing-image img {
  transition: transform .7s cubic-bezier(.2, .65, .3, 1);
}

.hg-piercing-item:hover .hg-piercing-image img {
  transform: scale(1.035);
}

.hg-circle-link {
  width: 42px;
  height: 42px;
  color: var(--hg-text);
  font-size: 1.25rem;
  text-decoration: none;
  border: 1px solid rgba(24, 24, 24, .45);
  border-radius: 50%;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.hg-piercing-item:hover .hg-circle-link {
  background: var(--hg-text);
  color: #fff;
  transform: translateX(3px);
}


.hg-experience-row,
.hg-quality-row {
  --bs-gutter-x: clamp(4rem, 8vw, 9rem);
}

/* Counter JS targets this class; size comes from Bootstrap display-1 */
.hg-counter {
  letter-spacing: -.06em;
}


@media (max-width: 991.98px) {
  .hg-container {
    width: min(calc(100% - 48px), var(--hg-max));
  }

  .hg-hero-row {
    --bs-gutter-x: 2.5rem;
  }

  .hg-hero-image {
    height: 65vh;
    min-height: 560px;
  }
}


@media (max-width: 767.98px) {
  .hg-container {
    width: calc(100% - 36px);
  }

  .hg-hero-row,
  .hg-intro-row,
  .hg-experience-row,
  .hg-quality-row {
    --bs-gutter-x: 0;
  }

  .hg-hero-image {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .hg-piercing-image {
    height: min(125vw, 620px);
  }

  /* Editorial rhythm: a small alternating inset, mobile only */
  .hg-piercing-card {
    padding-right: 1.75rem;
  }

  .hg-piercing-card-alt {
    padding-right: 0;
    padding-left: 1.75rem;
  }
}


/* ---------------------------------------------------------
   05. MOTION LANGUAGE
   Reveal · Nudge · Guided scroll
   --------------------------------------------------------- */

.hg-reveal {
  opacity: 1;
  transform: none;
}

/* Progressive enhancement: content stays visible if JavaScript fails. */
.js-reveal .hg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .65s ease var(--hg-delay, 0s),
    transform .65s cubic-bezier(.2, .65, .3, 1) var(--hg-delay, 0s);
}

.js-reveal .hg-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hg-scroll-cue {
  z-index: 2;
  bottom: 1.25rem !important;
  padding: .6rem .85rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.hg-scroll-cue span {
  display: inline-block;
  margin-left: .35rem;
  animation: hg-cue 1.8s ease-in-out infinite;
}

@keyframes hg-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.btn {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. HEADER / MAIN MENU
   --------------------------------------------------------- */

#sp-header .sp-megamenu-parent > li > a {
  position: relative;
  color: var(--hg-text);
  font-weight: 400;
  transition: color .2s ease;
}


/* Animated underline */

#sp-header .sp-megamenu-parent > li > a:not(.hg-menu-book)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hg-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

#sp-header .sp-megamenu-parent > li > a:not(.hg-menu-book):hover::after {
  transform: scaleX(1);
}


/* Active menu item */

#sp-header .sp-megamenu-parent > li.active > a:not(.hg-menu-book),
#sp-header .sp-megamenu-parent > li.current-item > a:not(.hg-menu-book) {
  color: var(--hg-text);
}

#sp-header .sp-megamenu-parent > li.active > a:not(.hg-menu-book)::after,
#sp-header .sp-megamenu-parent > li.current-item > a:not(.hg-menu-book)::after {
  transform: scaleX(1);
}

/* BOOK TID */

#sp-header .sp-megamenu-parent > li > a.hg-menu-book {
  height: 40px;
  margin-left: 12px;
  padding: 0 18px;
  color: var(--hg-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--hg-text);
  transition:
    background-color .25s ease,
    color .25s ease;
}

#sp-header .sp-megamenu-parent > li > a.hg-menu-book:hover {
  background: var(--hg-text);
  color: #fff;
}

/* ==================================================
   MEGA MENU – DESKTOP
   ================================================== */

@media (min-width: 992px) {

    /* Gruppeoverskrifter */
    .sp-megamenu-parent .sp-group-title.hg-mega-heading {
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #222;
        margin-bottom: 10px;
    }

}


/* ==================================================
   OFFCANVAS – PIERCING GRUPPER
   ================================================== */

@media (max-width: 991.98px) {

    /* Gruppeoverskrifter */
    .offcanvas-menu .offcanvas-inner ul.menu li > a.hg-mega-heading {
        display: block;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        padding: 9px 0;
    }

    /* Luft mellem Piercinger og første gruppe */
    .offcanvas-menu .offcanvas-inner
    ul.menu > li > ul.menu-child
    > li:first-child:has(> a.hg-mega-heading) {
        margin-top: 12px;
    }

    /* Links under Akupunkturpiercinger / Klassiske piercinger */
    .offcanvas-menu .offcanvas-inner
    li:has(> a.hg-mega-heading)
    > ul.menu-child
    > li
    > a {
        display: flex;
        align-items: center;
        min-height: 42px;
        font-size: 16px;
        line-height: 20px;
        padding: 7px 0;
    }

    /* Luft mellem de to grupper */
    .offcanvas-menu .offcanvas-inner
    li:has(> a.hg-mega-heading)
    + li:has(> a.hg-mega-heading) {
        margin-top: 16px;
    }

}

/* ==================================================
   OFFCANVAS – BOOK TID
   ================================================== */

@media (max-width: 991.98px) {

    .offcanvas-menu .offcanvas-inner
    ul.menu > li:last-child > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        min-height: 46px;
        margin-top: 18px;
        padding: 11px 22px;

        background: #fff !important;
        color: #212529 !important;
        border: 1px solid #212529 !important;

        font-size: 14px;
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .offcanvas-menu .offcanvas-inner
    ul.menu > li:last-child > a:hover,
    .offcanvas-menu .offcanvas-inner
    ul.menu > li:last-child > a:focus {
        background: #212529 !important;
        color: #fff !important;
        border-color: #212529 !important;
    }

}
/* ---------------------------------------------------------
   11. FOOTER
   --------------------------------------------------------- */

.hg-footer {
  padding: 90px 0 32px;
  background: var(--hg-text);
  color: #fff;
}

.hg-footer-main {
  padding-bottom: 80px;
}

.hg-footer-logo img {
  display: block;
  width: 180px;
  height: auto;
  filter: invert(1);
}

.hg-footer-tagline {
  margin: 30px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 15px;
  line-height: 1.6;
}

.hg-footer-label {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, .45);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hg-footer address {
  margin: 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
}

.hg-footer-contact {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.hg-footer a {
  color: #fff;
  text-decoration: none;
}

.hg-footer a:hover {
  color: rgba(255, 255, 255, .65);
}


/* Footer links */

.hg-footer-links {
  gap: 10px;
}

.hg-footer-links a {
  position: relative;
  font-size: 14px;
}

.hg-footer-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.hg-footer-links a:hover::after {
  transform: scaleX(1);
}


/* Footer bottom */

.hg-footer-bottom {
  gap: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.hg-footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* =========================================================
   JOOMLA / HELIX
========================================================= */

.article-details .article-full-image {
    display: none;
}

/* Light kicker used on dark HadberG sections */
.section-kicker-light {
  color: var(--hg-accent) !important;
}


/* =========================================================
   AFTERCARE
   ========================================================= */

.aftercare-page {
  background: var(--hg-bg);
  color: var(--hg-text);
}


/* Hero
--------------------------------------------------------- */

.aftercare-hero {
  background: var(--hg-bg);
}

.aftercare-intro {
  max-width: 720px;
  color: var(--hg-muted);
  line-height: 1.7;
}


/* Navigation
--------------------------------------------------------- */

.aftercare-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hg-line);
  border-radius: 1rem;
}

.aftercare-nav-item {
  position: relative;
  min-height: 155px;
  padding: 2rem;
  color: var(--hg-text);
  text-decoration: none;
  border-right: 1px solid var(--hg-line);
  border-bottom: 1px solid var(--hg-line);
  transition:
    background-color .2s ease,
    color .2s ease;
}

.aftercare-nav-item:nth-child(3n) {
  border-right: 0;
}

.aftercare-nav-item:nth-child(n+4) {
  border-bottom: 0;
}

.aftercare-nav-number {
  display: block;
  margin-bottom: 1.5rem;
  color: #b69c8d;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.aftercare-nav-title {
  display: block;
  padding-right: 2rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.aftercare-nav-arrow {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  font-size: 1.15rem;
  transition: transform .2s ease;
}


/* Hover */

.aftercare-nav-item:hover {
  background: var(--hg-text);
  color: #fff;
}

.aftercare-nav-item:hover .aftercare-nav-number {
  color: var(--hg-accent);
}

.aftercare-nav-item:hover .aftercare-nav-arrow {
  transform: translateX(4px);
}


/* Tablet */

@media (max-width: 991.98px) {

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

  .aftercare-nav-item {
    border-right: 1px solid var(--hg-line);
    border-bottom: 1px solid var(--hg-line);
  }

  .aftercare-nav-item:nth-child(3n) {
    border-right: 1px solid var(--hg-line);
  }

  .aftercare-nav-item:nth-child(2n) {
    border-right: 0;
  }

  .aftercare-nav-item:nth-child(n+4) {
    border-bottom: 1px solid var(--hg-line);
  }

  .aftercare-nav-item:nth-last-child(-n+2) {
    border-bottom: 0;
  }

}


/* Mobil */

@media (max-width: 575.98px) {

  .aftercare-nav-grid {
    grid-template-columns: 1fr;
  }

  .aftercare-nav-item {
    min-height: auto;
    padding: 1.5rem;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hg-line) !important;
  }

  .aftercare-nav-item:last-child {
    border-bottom: 0 !important;
  }

  .aftercare-nav-number {
    margin-bottom: .75rem;
  }

  .aftercare-nav-arrow {
    right: 1.5rem;
    bottom: 1.5rem;
  }

}

/* =========================================================
   AFTERCARE - KROPPEN
   ========================================================= */

.aftercare-body-section {
  background: #fff;
  color: var(--hg-text);
}

.aftercare-section-intro {
  max-width: 390px;
  color: var(--hg-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.aftercare-label {
  display: block;
  margin-bottom: 1rem;
  color: #9c7d6d;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* =========================================================
   DAGLIG RUTINE
   ========================================================= */

.aftercare-routine {
  border-top: 1px solid var(--hg-line);
}

.aftercare-step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hg-line);
}

.aftercare-step > span {
  padding-top: .15rem;
  color: #b69c8d;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.aftercare-step h3 {
  margin-bottom: .4rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.aftercare-step p {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--hg-muted);
  line-height: 1.65;
}


/* =========================================================
   DET SKAL DU UNDGÅ
   ========================================================= */

.aftercare-dont {
  padding: 3rem;
  background: var(--hg-text);
  border-radius: 1rem;
}

.aftercare-label-light {
  color: var(--hg-accent);
}

.aftercare-dont-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.aftercare-dont-grid p {
  margin: 0;
  color: #bdbab7;
  line-height: 1.65;
}

.aftercare-dont-grid strong {
  color: #fff;
}


/* =========================================================
   NORMAL HELING
   ========================================================= */

.aftercare-normal {
  padding: 3rem 0 0;
  border-top: 1px solid var(--hg-accent);
}

.aftercare-normal p {
  color: var(--hg-muted);
  line-height: 1.7;
}


/* =========================================================
   IRRITATION / INFEKTION
   ========================================================= */

.aftercare-problems {
  padding-top: 3rem;
  border-top: 1px solid var(--hg-line);
}

.aftercare-problems-intro {
  max-width: 400px;
  color: var(--hg-muted);
  line-height: 1.7;
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767.98px) {

  .aftercare-dont {
    padding: 2rem 1.5rem;
  }

  .aftercare-dont-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

}


/* ---------------------------------------------------------
   90. HEADER RESPONSIVE
   --------------------------------------------------------- */

/* Logo – optisk centrering på desktop */
@media (min-width: 992px) {
  #sp-header .logo {
    transform: translateY(4px);
  }
}


/* ---------------------------------------------------------
   92. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-reveal .hg-reveal,
  .hg-scroll-cue span,
  .btn,
  .hg-text-link span,
  .hg-piercing-image img,
  .hg-circle-link,
  #sp-header .sp-megamenu-parent > li > a::after {
    transition: none;
  }

  .hg-scroll-cue span {
    animation: none;
  }

  .js-reveal .hg-reveal,
  .js-reveal .hg-reveal.is-visible,
  .btn:hover,
  .hg-text-link:hover span,
  .hg-piercing-item:hover .hg-piercing-image img,
  .hg-piercing-item:hover .hg-circle-link {
    transform: none;
  }

  .js-reveal .hg-reveal {
    opacity: 1;
  }
}