/*
Theme Name: There and Back Club
Theme URI: https://thereandback.club
Author: Tannic Studios
Description: Travel personality and adventure planning theme for There and Back Club.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tbc
*/

/* ---------- GLOBAL VARIABLES ---------- */
:root { 
  --color-olive: #3B613D;
  --color-rust: #7E3F0E;
  --color-midnight: #221723;
  --color-cream: #FAF8F4;
  --color-gold: #DCCCA3;
  --font-title: 'Caprasimo', serif;
  --font-body: 'Lora', serif;
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 640ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expressive: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --move-sm: 4px;
  --move-md: 10px;
  --scale-hover: 1.03;
}

/* ---------- GENERAL ---------- */
body {
  margin: 0;
  font-family: var(--font-body);
  background: #1C141D;
  color: #fff;
}

/* ---------- MOTION UTILITIES ---------- */
.motion-fade-up {
  opacity: 0;
  transform: translateY(var(--move-md));
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.motion-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-lift {
  transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}

.motion-lift:hover {
  transform: translateY(calc(var(--move-sm) * -1));
}

.motion-press {
  transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}

.motion-press:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* ---------- HEADER ---------- */
.site-header {
  background-color: #1b1019;
  padding: 1rem 2rem;
}

.header-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Top bar (logo + hamburger) */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.logo img {
  height: 100px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  height: 24px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--color-cream);
  border-radius: 2px;
}


/* Mobile menu initially hidden */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all var(--motion-base) var(--ease-standard);
}

/* Open state */
.mobile-menu.open {
  max-height: 800px;
  opacity: 1;
  visibility: visible;
  padding: 1rem 0;
}


.hamburger {
  position: relative;
  width: 36px;
  height: 24px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1001; /* stay above the menu */
}

.bar {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--color-cream);
  border-radius: 2px;
  transition: transform var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard);
}

.top-bar {
  top: 0;
}

.bottom-bar {
  bottom: 0;
}

/* 🔄 TRANSFORM ON TOGGLE */
.mobile-toggle:checked + .header-top .hamburger .top-bar {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle:checked + .header-top .hamburger .bottom-bar {
  transform: rotate(-45deg) translate(5px, -5px);
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translateY(12px);
}


.hamburger.open span:nth-child(2) {
  transform: rotate(-45deg) translateY(-12px);
}

/* ---------- NAVIGATION LINKS ---------- */
.header-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

.header-menu {
  align-items: flex-end; /* aligns items to the right */
  text-align: right;
}

.header-menu li {
  width: 100%; /* optional: ensures links stack but align right */
}

.header-menu a {
  color: white;
  text-decoration: none;
  font-family: var(--font-title);
  font-size: 1.1rem;
  transition: opacity var(--motion-base) var(--ease-standard);
}

.header-menu a:hover {
  opacity: 0.8;
}

/* CTA Button */
.cta-button {
  margin-top: 1rem;
}

.book-call-btn {
  background-color: #fff;
  color: var(--color-rust);
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  font-family: var(--font-title);
  border-radius: 4px;
  text-decoration: none;
  transition: transform var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}

.book-call-btn:hover {
  background-color: var(--color-rust);
  color: #fff;
  transform: scale(var(--scale-hover));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.cta-button {
  text-align: right;
  margin-top: 2rem;
}

.book-call-btn {
  display: inline-block;
}

/* 1. Target the specific Article Container to ensure we hit the right content */
.single-post .post-content p {
    line-height: 1.75 !important; /* Forces the spacing */
    margin-bottom: 1.5em;
    font-size: 18px; /* Ensures text is large enough for the spacing */
}

/* 2. Target the WordPress Block Lists specifically */
.single-post .post-content .wp-block-list li {
    line-height: 1.75 !important;
    margin-bottom: 0.75em; /* Adds space between bullet points */
    padding-left: 0.5em; /* Adds a little air between bullet and text */
}

/* 3. Handle Nested Lists (The "Insider Deal" bullets) */
.single-post .post-content .wp-block-list .wp-block-list {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1em; /* Indent the nested list */
}
.single-post .post-content .wp-block-list .wp-block-list li {
    font-size: 0.95em; /* Slightly smaller for nested notes */
}

/* 4. Headings - Giving them space to breathe */
.single-post .post-content h3.wp-block-heading {
    line-height: 1.4;
    margin-top: 2em; /* Push the heading down from previous text */
    margin-bottom: 1em;
}