/* =============================================================================
   GOS Accordion — overrides Gutenberg core/details block
   Target: .wp-block-details
============================================================================= */

/* =============================================================================
   Remove browser default disclosure marker
============================================================================= */

.wp-block-details > summary {
  list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details > summary::marker {
  display: none;
}

/* =============================================================================
   Item wrapper
============================================================================= */

.wp-block-details {
  position: relative;
  border-bottom: 1px solid var(--wp--preset--color--border, #e2e6ee);
  transition:
    background-color 0.2s,
    border 0.2s,
    border-radius 0.2s,
    padding 0.2s;
  padding: 0 1.5rem;
  margin-bottom: 0 !important;
}

/* When open: blue-tinted background, navy border, rounded card */
.wp-block-details[open] {
  background-color: #edf2fb;
  border: 1.5px solid var(--wp--preset--color--primary-dark, #002151);
  border-radius: 16px;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem !important;
}

/* Hide the top divider when the item is open (replaced by the card border) */
.wp-block-details[open] > summary::before {
  display: none;
}

/* Last item: no bottom border if closed */
.wp-block-details:last-child {
  border-bottom: 1px solid var(--wp--preset--color--border, #e2e6ee);
}

.wp-block-details[open]:last-child {
  border-bottom: 1.5px solid var(--wp--preset--color--primary-dark, #002151);
}

/* =============================================================================
   Summary (trigger row)
============================================================================= */

.wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.375rem 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary, #0748a8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Summary text node — styled via the block's own font settings;
   we just enforce the PP Watch uppercase look */
.wp-block-details > summary .wp-block-details__summary-content,
.wp-block-details > summary {
  font-family: var(--wp--preset--font-family--ppwatch) !important;
  font-weight: 900 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--primary-dark, #002151) !important;
  line-height: 1.3;
}

/* =============================================================================
   Orange circle chevron — injected via JS as a <span> inside summary
============================================================================= */

.gos-acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--red, #ff5c39);
  color: var(--wp--preset--color--primary-dark, #002151);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.wp-block-details[open] .gos-acc-icon {
  transform: rotate(180deg);
}

/* =============================================================================
   Panel content area
============================================================================= */

.wp-block-details > *:not(summary) {
  padding-bottom: 1.5rem;
  margin-block-start: 0;
}

.wp-block-details > p,
.wp-block-details > ul,
.wp-block-details > ol,
.wp-block-details > div {
  font-size: 0.9375rem !important;
  line-height: 1.7;
  color: var(--wp--preset--color--primary-dark, #002151) !important;
}

.wp-block-details > ul,
.wp-block-details > ol {
  padding-left: 1.25rem;
}

/* Buttons / CTA links inside the open panel */
.wp-block-details .wp-block-button__link,
.wp-block-details .wp-element-button {
  font-family: var(--wp--preset--font-family--ppwatch) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

/* =============================================================================
   Smooth open/close animation
   JS adds .is-animating and sets max-height via style attribute
============================================================================= */

.wp-block-details > *:not(summary) {
  overflow: hidden;
  transition:
    max-height 0.32s ease,
    opacity 0.25s ease;
}

/* =============================================================================
   Responsive
============================================================================= */

@media (max-width: 600px) {
  .wp-block-details > summary {
    font-size: 0.8125rem !important;
  }

  .gos-acc-icon {
    width: 36px;
    height: 36px;
  }

  .wp-block-details[open] {
    padding: 0 1rem;
  }
}

.gos-accordion {
  width: 100%;
}

/* =============================================================================
   Item wrapper — becomes a card when open
============================================================================= */

.gos-accordion__item {
  position: relative;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    border-radius 0.25s,
    padding 0.25s;
}

.gos-accordion__item.is-open {
  background-color: #edf2fb;
  border: 1.5px solid var(--wp--preset--color--primary-dark);
  border-radius: 16px;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}

/* Hide the divider when the item is open (border replaces it visually) */
.gos-accordion__item.is-open .gos-accordion__divider {
  display: none;
}

/* =============================================================================
   Trigger button
============================================================================= */

.gos-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background: none;
  border: none;
  padding: 1.375rem 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.gos-accordion__trigger:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================================================
   Title text
============================================================================= */

.gos-accordion__title {
  font-family: var(--wp--preset--font-family--ppwatch);
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary-dark);
  line-height: 1.3;
}

/* =============================================================================
   Icon circle (orange, chevron inside)
============================================================================= */

.gos-accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--red);
  color: #fff;
  transition: transform 0.2s ease;
}

.gos-accordion__trigger[aria-expanded="true"] .gos-accordion__icon {
  transform: rotate(180deg);
}

/* =============================================================================
   Divider
============================================================================= */

.gos-accordion__divider {
  border: none;
  border-top: 1px solid var(--wp--preset--color--border, #e2e6ee);
  margin: 0;
}

/* =============================================================================
   Panel — hidden/visible via JS class + CSS grid trick for smooth animation
============================================================================= */

.gos-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
  overflow: hidden;
}

/* When JS removes the `hidden` attribute and adds is-open,
   the panel smoothly expands */
.gos-accordion__panel:not([hidden]) {
  grid-template-rows: 1fr;
}

/* JS removes `hidden` attribute — but we must still hide it initially.
   We override `display` so the grid trick works instead of display:none */
.gos-accordion__panel[hidden] {
  display: grid !important; /* keep grid so transition works; visually hidden by 0fr */
  visibility: hidden;
}

.gos-accordion__panel:not([hidden]) {
  visibility: visible;
}

.gos-accordion__panel-inner {
  min-height: 0; /* required for grid trick */
  overflow: hidden;
  padding-bottom: 1.5rem;
}

/* =============================================================================
   Panel content typography
============================================================================= */

.gos-accordion__subtitle {
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary-dark);
  margin: 0 0 0.75rem;
}

.gos-accordion__panel-inner p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--wp--preset--color--black);
  margin-bottom: 0.75rem;
}

.gos-accordion__panel-inner ul,
.gos-accordion__panel-inner ol {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.gos-accordion__panel-inner li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--wp--preset--color--black);
  margin-bottom: 0.25rem;
}

/* =============================================================================
   CTA button inside panel
============================================================================= */

.gos-accordion__cta {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.875rem 1.75rem;
  background-color: var(--wp--preset--color--red);
  color: #fff;
  font-family: var(--wp--preset--font-family--ppwatch);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.gos-accordion__cta:hover,
.gos-accordion__cta:focus-visible {
  background-color: var(--wp--preset--color--primary-dark);
  color: #fff;
  text-decoration: none;
}

/* =============================================================================
   Responsive
============================================================================= */

@media (max-width: 600px) {
  .gos-accordion__title {
    font-size: 0.8125rem;
  }

  .gos-accordion__icon {
    width: 36px;
    height: 36px;
  }
}