/*
Theme Name: Clever Rabbit Base
Theme URI: https://cleverrabbit.agency
Author: Clever Rabbit Agency
Author URI: https://cleverrabbit.agency
Description: Minimal, unbranded starter theme built for Elementor. No visual builder of its own — layout is handled entirely by Elementor; this theme provides theme supports, a clean design-token base, and a shared scroll-progress engine for custom animated sections.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary — internal use only
Text Domain: clever-rabbit-base
*/

/* ==========================================================================
   1. Design tokens
   Edit these per client project — everything else in the theme, and any
   animated section built later, should reference these rather than
   hardcoding new values.
   ========================================================================== */

:root {
  /* Colour */
  --cr-color-bg: #ffffff;
  --cr-color-text: #101010;
  --cr-color-primary: #101010;
  --cr-color-accent: #ff4337;
  --cr-color-muted: #6b6b6b;
  --cr-color-header-bg: #ffffff;
  --cr-color-footer-bg: #101010;

  /* Type scale — fluid via clamp(), adjust min/preferred/max per client */
  --cr-font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cr-font-display: 'Unbounded', var(--cr-font-base);

  --cr-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --cr-fs-h1: clamp(2.6rem, 2rem + 4vw, 6.5rem);
  --cr-fs-h2: clamp(2rem, 1.6rem + 2.5vw, 4rem);
  --cr-fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --cr-fs-small: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);

  /* Spacing scale — used for gap, padding, margin. Keeps every section
     consistent instead of one-off px values per component. */
  --cr-space-xs: 0.5rem;
  --cr-space-sm: 1rem;
  --cr-space-md: 2rem;
  --cr-space-lg: 4rem;
  --cr-space-xl: 8rem;

  /* Layout */
  --cr-container-width: 1200px;
  --cr-gutter: 6vw;

  /* Breakpoints — for reference in comments only; CSS custom properties
     cannot be used inside @media queries, so these are documented here
     and the literal px values are repeated at each @media rule below. */
  --cr-bp-tablet: 768px;
  --cr-bp-desktop: 1200px;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cr-color-bg);
  color: var(--cr-color-text);
  font-family: var(--cr-font-base);
  font-size: var(--cr-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Links inside running text stay visibly links. */
.cr-article p a,
.cr-article li a,
.elementor-widget-text-editor a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Visually hidden but read by screen readers — WordPress core uses this class. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cr-skip-link:focus {
  clip-path: none;
  width: auto;
  height: auto;
  top: var(--cr-space-sm);
  left: var(--cr-space-sm);
  z-index: 100000;
  padding: var(--cr-space-xs) var(--cr-space-sm);
  background: var(--cr-color-text);
  color: var(--cr-color-bg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cr-font-display);
  line-height: 1.1;
  margin: 0 0 var(--cr-space-sm);
}

h1 { font-size: var(--cr-fs-h1); }
h2 { font-size: var(--cr-fs-h2); }
h3 { font-size: var(--cr-fs-h3); }

p {
  margin: 0 0 var(--cr-space-sm);
}

small,
.cr-text-small {
  font-size: var(--cr-fs-small);
  color: var(--cr-color-muted);
}

/* ==========================================================================
   4. Layout utilities
   BEM-ish naming convention for anything built outside Elementor —
   block: .c-name, element: .c-name__part, modifier: .c-name--variant
   ========================================================================== */

.cr-container {
  width: 100%;
  max-width: var(--cr-container-width);
  margin-inline: auto;
  padding-inline: var(--cr-gutter);
}

.cr-grid {
  display: grid;
  gap: var(--cr-space-md);
}

@media (max-width: 768px) {
  .cr-grid {
    gap: var(--cr-space-sm);
  }
}

/* ==========================================================================
   5. Header & Footer
   ========================================================================== */

.cr-header {
  background: var(--cr-color-header-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--cr-color-text) 12%, transparent);
}

.cr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cr-space-md);
  padding-block: var(--cr-space-sm);
}

.cr-header__logo img {
  max-height: 40px;
  width: auto;
}

.cr-header__site-name {
  font-family: var(--cr-font-display);
  font-size: var(--cr-fs-h3);
  font-weight: 700;
  color: var(--cr-color-text);
}

.cr-header__nav {
  margin-left: auto;
}

.cr-nav {
  display: flex;
  align-items: center;
  gap: var(--cr-space-md);
}

.cr-nav a {
  font-size: var(--cr-fs-small);
  font-weight: 500;
  color: var(--cr-color-text);
  transition: color 0.2s ease;
}

.cr-nav a:hover,
.cr-nav a:focus-visible {
  color: var(--cr-color-accent);
}

/* Current-page indicator, matches WordPress's own nav menu classes */
.cr-nav .current-menu-item > a,
.cr-nav .current_page_item > a {
  color: var(--cr-color-accent);
}

@media (max-width: 768px) {
  .cr-header__inner {
    flex-wrap: wrap;
  }

  .cr-nav {
    flex-wrap: wrap;
    gap: var(--cr-space-sm);
  }
}

.cr-site-footer {
  background: var(--cr-color-footer-bg);
  color: var(--cr-color-bg);
  margin-top: var(--cr-space-xl);
}

.cr-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cr-space-sm);
  padding-block: var(--cr-space-lg);
}

.cr-site-footer .cr-nav a {
  color: var(--cr-color-bg);
}

.cr-site-footer .cr-nav a:hover,
.cr-site-footer .cr-nav a:focus-visible {
  color: var(--cr-color-accent);
}

.cr-site-footer__copy {
  color: color-mix(in srgb, var(--cr-color-bg) 60%, transparent);
}

@media (max-width: 768px) {
  .cr-site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Reveal footer — on when "Reveal footer" is ticked in Customize →
   Clever Rabbit Colours. The page sits above the footer and scrolls
   away to uncover it. */
.cr-reveal-footer .cr-main {
  position: relative;
  z-index: 2;
  background: var(--cr-color-bg);
}

.cr-reveal-footer .cr-footer-slot {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* ==========================================================================
   6. Scroll-driven sections
   Any element with [data-scroll-section] gets --progress (0–1) written to
   it by assets/js/scroll-progress.js as the user scrolls through it.
   Consume it like:
     transform: translateY(calc((1 - var(--progress, 0)) * 40px));
     opacity: var(--progress, 0);
   ========================================================================== */

[data-scroll-section] {
  --progress: 0;
}

/* ==========================================================================
   7. 404
   ========================================================================== */

.cr-404 {
  padding-block: var(--cr-space-xl);
}

.cr-404 a {
  color: var(--cr-color-accent);
  text-decoration: underline;
}