/**
* Theme Name: Wellness Bliss Child
* Description: This is a child theme of Wellness Bliss.
* Author: <a href="https://cmsmasters.net/">cmsmasters</a>
* Template: wellness-bliss
* Version: 1.0.0
* Tested up to: 6.6
* Requires PHP: 7.4
* License:
* License URI:
* Text Domain: wellness-bliss-child
* Copyright: cmsmasters 2025 / All Rights Reserved
*/

/* ================================
   Afrocultures Font Setup
   ================================ */

@font-face {
  font-family: 'Afrocultures';
      src: url('fonts/Afrocultures.woff2?v=1') format('woff2'),
            url('fonts/Afrocultures.woff?v=1') format('woff'),
            url('fonts/Afrocultures.ttf') format('truetype'),
            url('fonts/Afrocultures.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Utility class for using Afrocultures */
.afrocultures {
  font-family: 'Afrocultures', sans-serif;
}

/* Example hero usage */
.hero-title span.afrocultures {
  font-family: 'Afrocultures', sans-serif;
}

.disabled-link {
  pointer-events: none;
  cursor: default;
  opacity: 1;
}

/* Page bg */
body.error404 {
  background-color: #111111;
}

/* Container: 50vh tall, centered */
.error404-wrap {
  height: 50vh;
  padding: 20px 0;              /* top/bottom padding */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertical center */
  align-items: center;          /* horizontal center */
  text-align: center;
  gap: 1rem;                    /* space between elements */
  color: #fff;                  /* all text white */
}

/* Title: very large, Afrocultures */
.error404__title {
  font-family: 'Afrocultures', sans-serif;
  font-size: clamp(6rem, 18vw, 14rem);  /* HUGE, responsive */
  line-height: 0.9;
  margin: 0;
  color: #fff;
}

/* Subtitle text */
.error404__text {
  color: #fff;
  max-width: 60ch;
  margin: 0;
  opacity: 0.9;
}

/* Button: transparent bg, white border; invert on hover */
.error404__home-btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 50px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.error404__home-btn:hover,
.error404__home-btn:focus {
  background: #fff;
  color: #000;
}