/*
 Theme Name:   Checkpoint Creative (Bricks Child)
 Theme URI:    https://chkpt.com.au/
 Description:  Custom Bricks child theme by Checkpoint Creative.
 Author:       Checkpoint Creative Pty Ltd
 Author URI:   https://chkpt.com.au/
 Template:     bricks
 Version:      1.0
 Text Domain:  chkpt
*/


/* =========================================================
   TOKENS
   ========================================================= */

:root {
  /* Easing */
  --back-out-1-2: cubic-bezier(0.175, 0.885, 0.32, 1.2);
  --back-out-2-5: cubic-bezier(0.175, 0.885, 0.32, 1.4);
  --back-out-3: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  --power-2-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --power-3-out: cubic-bezier(0.23, 1, 0.32, 1);
  --rando: cubic-bezier(.48, 1.15, .88, 1.41);

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);

  /* Bricks Alerts */
  --bricks-bg-info: #E9FFF8;
  --bricks-text-info: #008A70;
  --bricks-bg-success: #CBFFEB;
  --bricks-text-success: #006D5A;
  --bricks-bg-warning: #FFF5E5;
  --bricks-text-warning: #C47A00;
  --bricks-bg-danger: #FFE7EA;
  --bricks-text-danger: #D63A52;
}

/* =========================================================
   PRELOADER
   ========================================================= */

#preloader {
  will-change: transform;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F7F5;
  z-index: 999999;
  box-shadow:
    0px 12px 16px -4px rgba(0, 173, 139, 0.1),
    0px 4px 6px -2px rgba(0, 173, 139, 0.05);
}

#preloader svg {
  width: 260px;
  height: auto;
  display: block;
}

#logo-text {
  clip-path: inset(0 -40px 0 0);
  opacity: 0;
  transform: translateX(-15px);
}

#logo-left {
  transform: translateY(-90px);
}

#logo-right {
  transform: translateY(90px);
}

.logo-semicircle {
  will-change: transform;
  animation: preloader-semicircle-drop 0.40s var(--back-out-1-2) 0.1s forwards;
}

#logo-text {
  animation: preloader-text-snap 0.35s var(--back-out-3) 0.55s forwards;
}

#preloader {
  animation:
    preloader-bounce 0.18s var(--power-2-in) 1.4s forwards,
    preloader-fade-out 0.65s var(--power-3-out) 1.58s forwards;
}

@keyframes preloader-semicircle-drop {
  to { transform: translateY(0); }
}

@keyframes preloader-text-snap {
  to { transform: translateX(0); opacity: 1; }
}

@keyframes preloader-bounce {
  to { transform: translateY(16px); }
}

@keyframes preloader-fade-out {
  to { transform: translateY(-100%); }
}


/* =========================================================
   GLOBAL SELECTION STYLES
   ========================================================= */

html {
  scrollbar-gutter: stable;
}

::selection {
  background: var(--fg-brand-primary);
}

::-moz-selection {
  background: var(--fg-brand-primary);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.bricks-button.bricks-background-primary,
.bricks-button.bricks-background-secondary {
  will-change: transform;
}

.bricks-button.bricks-background-primary:hover,
.bricks-button.bricks-background-secondary:hover {
  transform: translateY(-2px);
}

.bricks-button.bricks-background-primary:active,
.bricks-button.bricks-background-secondary:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.bricks-button.bricks-background-light:hover {
  opacity: 0.85;
}


/* =========================================================
   HERO / DECORATIVE ELEMENTS
   ========================================================= */

.hero-shape {
  filter: blur(0px);
}

.hero-graphic .hero-shape {
  opacity: 0;
}


/* =========================================================
   SPLIDE SLIDERS — prevent flash before JS initialises
   ========================================================= */

.bricks-is-frontend .splide:not(.is-initialized) {
  opacity: 0;
}

.splide--draggable > .splide__track {
  cursor: grab;
}

.splide--draggable > .splide__track:active {
  cursor: grabbing;
}


/* =========================================================
   FAQ SECTION
   ========================================================= */

.faq-list {
  overflow: hidden;
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  transform: translateX(2px);
  overflow: hidden;
}

.faq-card.open .faq-answer {
  opacity: 1;
  transform: translateX(0);
}

/* Hide items beyond the first 5 — prevents CLS on initial paint */
.faq-card:nth-child(n+6) {
  display: none;
}

/* Show answers expanded inside Bricks builder for editing */
.brx-builder .faq-answer {
  max-height: none;
  opacity: 1;
  transform: none;
}

.brx-builder .faq-card:nth-child(n+6) {
  display: flex;
}

.faq-card {
  gap: 0;
}

.faq-card.open {
  gap: var(--spacing-md);
}


/* =========================================================
   PROCESS ACCORDION
   ========================================================= */

.process-accordion.process-ready {
  visibility: visible;
  opacity: 1;
}

.process-accordion.process-ready .process-accordion-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  transform: translateX(2px);
  overflow: hidden;
}

.process-accordion-item.open .process-accordion-content {
  opacity: 1;
  padding-top: var(--spacing-md);
  transform: translateX(0);
  overflow: visible;
}


/* =========================================================
   GSAP ENTRY STATES (FRONTEND ONLY)
   ========================================================= */

.bricks-is-frontend .cc-fade-up,
.bricks-is-frontend .cc-fade,
.bricks-is-frontend .cc-slide-left,
.bricks-is-frontend .cc-slide-right,
.bricks-is-frontend .cc-float-in,
.bricks-is-frontend .cc-clip-reveal,
.bricks-is-frontend .cc-img-unveil {
  opacity: 0;
  transform: none;
}

.bricks-is-frontend .cc-stagger > *,
.bricks-is-frontend .cc-stagger-loose > * {
  opacity: 0;
}


/* =========================================================
   SCREEN READER ONLY
   Visually hides an element while keeping it in the DOM and
   accessible to screen readers. Use on elements that provide
   context for assistive tech but should not be visible on screen
   (e.g. text alternatives for animated or icon-only elements).
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   FORM FIELD FOCUS (BRICKS)
   ========================================================= */

.brxe-form input:not([type="submit"]):not([type="checkbox"]),
.brxe-form textarea {
  box-shadow: 0 0 0 0 transparent;
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.brxe-form input:not([type="submit"]):not([type="checkbox"]):focus,
.brxe-form textarea:focus {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--text-primary);
  outline: none;
}


/* =========================================================
   FORM CHECKBOXES (BRICKS)
   ========================================================= */

.brxe-form .options-wrapper li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.brxe-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 6px;
  background-color: var(--bg-secondary) !important;
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.brxe-form input[type="checkbox"]:checked {
  background-color: var(--snowDrift-900) !important;
  border-color: var(--snowDrift-900) !important;
  background-image: url("/wp-content/uploads/2026/04/checkbox-tick.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.brxe-form input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 2px var(--text-primary);
  outline: none;
}


/* =========================================================
   FORM MESSAGES (BRICKS)
   ========================================================= */

.brxe-form .bricks-form-message,
.brxe-form .message .text {
  padding: 1rem 1.25rem;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.brxe-form .message {
  position: relative;
  padding-left: 1.45rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  transform-origin: top left;
  animation: ccBubblePop var(--motion-fast) var(--ease-standard) forwards;
}

.brxe-form .message .text {
  width: 100%;
}

.brxe-form .message::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}

.brxe-form .message.error {
  background: var(--bricks-bg-danger);
  color: var(--bricks-text-danger);
}

.brxe-form .message.error::before {
  background-image: url("/wp-content/uploads/2025/12/danger-alert-octagon.svg");
}

.brxe-form .message.success {
  background: var(--bricks-bg-success);
  color: var(--bricks-text-success);
}

.brxe-form .message.success::before {
  background-image: url("/wp-content/uploads/2025/12/success-check-circle.svg");
}

.brxe-form .message.info {
  background: var(--bricks-bg-info);
  color: var(--bricks-text-info);
}

.brxe-form .message.info::before {
  background-image: url("/wp-content/uploads/2025/12/info-alert-circle.svg");
}

.brxe-form .message.warning {
  background: var(--bricks-bg-warning);
  color: var(--bricks-text-warning);
}

.brxe-form .message.warning::before {
  background-image: url("/wp-content/uploads/2025/12/warning-alert-triangle.svg");
}


/* =========================================================
   INLINE VALIDATION MESSAGES
   ========================================================= */

.cc-validation-message {
  margin-top: 6px;
  padding: 0.75rem 1rem 0.75rem 2.25rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  transform-origin: top left;
  animation: ccBubblePop var(--motion-fast) var(--ease-standard) forwards;
}

.cc-validation-message::before {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}

.cc-validation-message.danger {
  background: var(--bricks-bg-danger);
  color: var(--bricks-text-danger);
}

.cc-validation-message.success {
  background: var(--bricks-bg-success);
  color: var(--bricks-text-success);
}

.cc-validation-message.info {
  background: var(--bricks-bg-info);
  color: var(--bricks-text-info);
}

.cc-validation-message.warning {
  background: var(--bricks-bg-warning);
  color: var(--bricks-text-warning);
}

.cc-validation-message.danger::before {
  background-image: url("/wp-content/uploads/2025/12/danger-alert-octagon.svg");
}

.cc-validation-message.success::before {
  background-image: url("/wp-content/uploads/2025/12/success-check-circle.svg");
}

.cc-validation-message.info::before {
  background-image: url("/wp-content/uploads/2025/12/info-alert-circle.svg");
}

.cc-validation-message.warning::before {
  background-image: url("/wp-content/uploads/2025/12/warning-alert-triangle.svg");
}


/* =========================================================
   CHOICES.JS — BRICKS FORM SELECTS
   Scoped to .brxe-form. Dropdown panel renders inline inside
   .choices (not appended to body) so full scoping is possible.
   ========================================================= */

/* --- Outer wrapper --- */
.brxe-form .choices {
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  outline: none; /* suppress browser focus ring on the tabindex container */
}

/* --- Trigger box — matches Bricks .form-group input styles --- */
.brxe-form .choices__inner {
  display: flex;
  align-items: center;
  min-height: unset;
  padding: 10px 14px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-md-size);
  font-weight: 400;
  line-height: var(--text-md-line);
  letter-spacing: var(--text-md-spacing);
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 0 0 0 transparent;
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

/* Selected value / placeholder text */
.brxe-form .choices__list--single {
  display: flex;
  align-items: center;
  padding: 0;
  padding-right: 1.25rem; /* room for chevron */
  width: 100%;
}

.brxe-form .choices__item {
  line-height: inherit;
}

.brxe-form .choices__placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

/* Focus / open state */
.brxe-form .choices.is-focused .choices__inner,
.brxe-form .choices.is-open .choices__inner {
  box-shadow: 0 0 0 2px var(--text-primary);
  outline: none;
}

/* Chevron arrow */
.brxe-form .choices[data-type*="select-one"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.brxe-form .choices[data-type*="select-one"].is-open::after {
  transform: translateY(-50%) rotate(180deg);
}

/* --- Dropdown panel --- */
.brxe-form .choices__list--dropdown,
.brxe-form .choices__list[aria-expanded] {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md, 8px);
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.1),
    0 2px 8px -2px rgba(0, 0, 0, 0.06);
  overflow: visible;
}

.brxe-form .choices__list--dropdown.is-active,
.brxe-form .choices__list[aria-expanded="true"] {
  display: block;
}

/* Options list */
.brxe-form .choices__list--dropdown .choices__list {
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: var(--radius-md, 8px);
}

/* Individual option */
.brxe-form .choices__list--dropdown .choices__item {
  padding: 9px 12px;
  border-radius: calc(var(--radius-md, 8px) - 2px);
  cursor: pointer;
  transition: background var(--motion-fast, 120ms) var(--ease-standard);
  color: inherit;
}

/* Hover / keyboard focus */
.brxe-form .choices__list--dropdown .choices__item.is-highlighted {
  background: var(--aquamarine-50);
  color: inherit;
}

/* Hide placeholder only inside the dropdown list, keep it visible in the trigger */
.brxe-form .choices__list--dropdown .choices__item.choices__placeholder {
  display: none;
}

/* Hide the Choices.js search input (we don't use it) */
.brxe-form .choices__input {
  display: none !important;
}


/* =========================================================
   TOUCH / MOBILE MENU FIX
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
  .brxe-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}

.brxe-toggle {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   PAGE ENTRANCE
   ========================================================= */

#brx-content > .brxe-section:nth-child(-n+4) {
  animation: pageEntrance 0.7s var(--ease-standard) both;
}

#brx-content > .brxe-section:nth-child(2) { animation-delay: 0.1s; }
#brx-content > .brxe-section:nth-child(3) { animation-delay: 0.2s; }
#brx-content > .brxe-section:nth-child(4) { animation-delay: 0.3s; }


/* =========================================================
   POPUP MODAL
   ========================================================= */

.brx-popup {
  scrollbar-gutter: auto;
  overflow: hidden;
  transition: opacity 350ms var(--ease-standard),
              visibility 0s linear 350ms;
}

.brx-popup:not(.hide) {
  transition: opacity 350ms var(--ease-standard),
              visibility 0s linear 0s;
}

.brx-popup:not(.hide) .brx-popup-content > section > svg {
  animation: ccPopupStagger 450ms var(--power-3-out) both;
  animation-delay: 0ms;
}

.brx-popup:not(.hide) .brx-popup-content > section > .brxe-container > * {
  animation: ccPopupStagger 450ms var(--power-3-out) both;
}

.brx-popup:not(.hide) .brx-popup-content > section > .brxe-container > *:nth-child(1) { animation-delay: 100ms; }
.brx-popup:not(.hide) .brx-popup-content > section > .brxe-container > *:nth-child(2) { animation-delay: 250ms; }


/* =========================================================
   FOOTER GRADIENT SHADER
   ========================================================= */

.cc-footer-gradient {
  position: relative;
  overflow: hidden;
}

.cc-footer-gradient__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.cc-footer-gradient > *:not(.cc-footer-gradient__canvas) {
  position: relative;
  z-index: 1;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes pageEntrance {
  from { opacity: 0; }
}

@keyframes ccPopupStagger {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ccBubblePop {
  from {
    transform: scale(0.97);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}