/* ============================================================
   brand.css — Ahh-mazing Wellness
   Version: 1.1
   Hosted: https://ahhmazingwellness.com/brand.css
   Deployment: wrangler kv key put "asset:/brand.css" --path brand.css --binding PAGES_KV --remote
   ============================================================ */


/* ============================================================
   1. SELF-HOSTED FONTS
   Font files: https://assets.ahhmazingwellness.com/fonts/
   ============================================================ */
 
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://assets.ahhmazingwellness.com/fonts/poppins-v24-latin-600.woff2') format('woff2');
}
 
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://assets.ahhmazingwellness.com/fonts/poppins-v24-latin-700.woff2') format('woff2');
}
 
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://assets.ahhmazingwellness.com/fonts/inter-v20-latin-400.woff2') format('woff2');
}
 
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://assets.ahhmazingwellness.com/fonts/inter-v20-latin-500.woff2') format('woff2');
}
 
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://assets.ahhmazingwellness.com/fonts/yellowtail-v25-latin-regular.woff2') format('woff2');
}


/* ============================================================
   2. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Primary colours */
  --sage:         #5A8B48;
  --deep-sage:    #3E613B;
  --coral:        #D98C7E;

  /* Secondary colours */
  --bright-green: #7BB964;
  --mint:         #EFF8E2;
  --gray-light:   #F8F9FA;

  /* Neutrals */
  --charcoal:     #4A4A4A;
  --gray-med:     #777777;
  --white:        #FFFFFF;

  /* Operational / status colours */
  --status-success:       #7BB964;
  --status-success-tint:  #A8D98F;
  --status-caution:       #E8A84C;
  --status-caution-tint:  #F5C97A;
  --status-warning:       #B5413A;
  --status-warning-tint:  #E07B74;
  --status-info:          #5C82A8;
  --status-info-tint:     #8CB4D8;
  --status-inactive:      #777777;
  --status-inactive-tint: #AAAAAA;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-script:  'Yellowtail', cursive;
  --font-code:    'Roboto Mono', monospace;

  /* Type scale */
  --text-h1:      2.25rem;   /* 36px */
  --text-h2:      1.75rem;   /* 28px */
  --text-h3:      1.375rem;  /* 22px */
  --text-h4:      1.1875rem; /* 19px */
  --text-h5:      1rem;      /* 16px */
  --text-h6:      0.9375rem; /* 15px */
  --text-body:    1rem;      /* 16px */
  --text-caption: 0.8125rem; /* 13px */
  --text-code:    1rem;      /* 16px */

  /* Line heights */
  --lh-heading: 1.3;
  --lh-body:    1.75;

  /* Layout */
  --content-max-width: 780px;
  --site-max-width:    1140px;
  --header-height:     64px;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--charcoal);
  background-color: var(--gray-light);
}

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

iframe {
  border: none;
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--sage);
  margin-bottom: 0.6em;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

/* Paragraphs */
p {
  margin-bottom: var(--space-sm);
  color: var(--charcoal);
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--deep-sage);
}

/* Lists */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: var(--space-sm);
}

li {
  margin-bottom: 0.35em;
  color: var(--charcoal);
}

/* Blockquote */
blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body);
  color: var(--charcoal);
  border-left: 4px solid var(--coral);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  background-color: var(--mint);
  border-radius: 0 6px 6px 0;
}

blockquote p {
  margin-bottom: 0;
}

/* Inline code */
code {
  font-family: var(--font-code);
  font-size: 0.9em;
  background-color: var(--mint);
  color: var(--deep-sage);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* Code blocks */
pre {
  font-family: var(--font-code);
  font-size: var(--text-code);
  background-color: var(--deep-sage);
  color: var(--white);
  padding: var(--space-md);
  border-radius: 8px;
  overflow-x: auto;
  margin: var(--space-md) 0;
  line-height: 1.6;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Strong & em */
strong { font-weight: 700; }
em     { font-style: italic; }

/* Caption / label utility class */
.caption,
figcaption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-caption);
  color: var(--gray-med);
  margin-top: var(--space-xs);
}

/* Script accent utility class */
.script-accent {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--coral);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--gray-light);
  margin: var(--space-lg) 0;
}


/* ============================================================
   5. SITE LAYOUT
   ============================================================ */

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--space-lg);
  background-color: var(--deep-sage);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Logo */
.site-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity var(--transition-fast);
}

.site-logo:hover {
  color: var(--white);
  opacity: 0.85;
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--white);
  text-decoration: none;
  opacity: 0.85;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.site-nav a:hover,
.site-nav a:focus {
  opacity: 1;
  color: var(--white);
  border-bottom-color: var(--coral);
}

/* Main */
.site-main {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

/* Footer */
.site-footer {
  background-color: var(--deep-sage);
  color: var(--white);
  text-align: center;
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.site-footer p {
  color: var(--white);
  font-size: var(--text-caption);
  opacity: 0.8;
  margin-bottom: 0;
}


/* ============================================================
   6. BLOG CONTENT
   ============================================================ */
.blog-post {
  max-width: var(--content-max-width);
  margin: 0 auto;
  background-color: var(--white);
  border-radius: 10px;
  padding: var(--space-xl) var(--space-lg);
  box-shadow: 0 2px 16px rgba(62, 97, 59, 0.08);
}

/* Post header */
.post-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--mint);
}

.post-header h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-xs);
}

.post-header time {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-caption);
  color: var(--gray-med);
  margin-bottom: var(--space-sm);
}

.post-excerpt {
  font-size: 1.0625rem;
  color: var(--gray-med);
  font-style: italic;
  margin-bottom: 0;
  border-left: 3px solid var(--sage);
  padding-left: var(--space-sm);
}

/* Post body spacing */
.post-body > * + * {
  margin-top: var(--space-sm);
}

.post-body h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.post-body h3,
.post-body h4 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* Annotation / callout box */
.annotation-box,
.callout {
  background-color: var(--mint);
  border-left: 4px solid var(--sage);
  border-radius: 0 6px 6px 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: 0.9375rem;
}


/* ============================================================
   7. MEDIA — FIGURES, IMAGES, VIDEO, IFRAME
   ============================================================ */
figure {
  margin: var(--space-md) 0;
}

figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 16:9 responsive wrapper for iframes and videos */
figure iframe,
figure video {
  width: 100%;
  border-radius: 8px;
}

.embed-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.embed-responsive iframe,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Auto-apply 16:9 to YouTube iframes inside figures */
figure:has(iframe[src*="youtube.com"]),
figure:has(iframe[src*="youtu.be"]) {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

figure:has(iframe[src*="youtube.com"]) iframe,
figure:has(iframe[src*="youtu.be"]) iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ============================================================
   8. BUTTONS & CTAs
   ============================================================ */

/* Primary button (sage — headings/links/borders usage) */
.btn,
.btn-primary {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--white);
  background-color: var(--sage);
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid var(--sage);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover,
.btn-primary:hover {
  color: var(--white);
  background-color: var(--deep-sage);
  border-color: var(--deep-sage);
}

/* CTA button (coral — CTAs/highlights usage) */
.btn-cta {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--white);
  background-color: var(--coral);
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid var(--coral);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-cta:hover {
  color: var(--white);
  background-color: #c47a6c;
  border-color: #c47a6c;
}

/* Ghost button */
.btn-ghost {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sage);
  background-color: transparent;
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid var(--sage);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-ghost:hover {
  color: var(--white);
  background-color: var(--sage);
}


/* ============================================================
   9. STATUS / OPERATIONAL COLOURS
   ============================================================ */
.status-success  { color: var(--status-success); }
.status-caution  { color: var(--status-caution); }
.status-warning  { color: var(--status-warning); }
.status-info     { color: var(--status-info); }
.status-inactive { color: var(--status-inactive); }

/* Callout boxes using status colours */
.callout-success,
.callout-caution,
.callout-warning,
.callout-info {
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 6px 6px 0;
  margin: var(--space-md) 0;
  font-size: 0.9375rem;
}

.callout-success {
  border-left: 4px solid var(--status-success);
  background-color: color-mix(in srgb, var(--status-success) 15%, white);
}

.callout-caution {
  border-left: 4px solid var(--status-caution);
  background-color: color-mix(in srgb, var(--status-caution) 15%, white);
}

.callout-warning {
  border-left: 4px solid var(--status-warning);
  background-color: color-mix(in srgb, var(--status-warning) 12%, white);
}

.callout-info {
  border-left: 4px solid var(--status-info);
  background-color: color-mix(in srgb, var(--status-info) 15%, white);
}


/* ============================================================
   10. RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --text-h1:   1.875rem;  /* 30px */
    --text-h2:   1.5rem;    /* 24px */
    --text-h3:   1.25rem;   /* 20px */
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
  }

  .site-header {
    flex-direction: column;
    height: auto;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }

  .site-nav {
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-main {
    padding: var(--space-lg) var(--space-sm);
  }

  .blog-post {
    padding: var(--space-lg) var(--space-sm);
    border-radius: 0;
    box-shadow: none;
  }
}


/* ============================================================
   11. PAGE-TYPE VARIANTS
   ============================================================ */

/* Blog pages — constrained reading width, article-focused */
body.page-type-blog .site-main {
  padding-top: var(--space-lg);
}

/* Landing pages — full-width sections, no max-width constraint on main */
body.page-type-landing .site-main {
  max-width: 100%;
  padding: 0;
}

body.page-type-landing .site-header {
  position: sticky;
}

/* Holding / coming-soon pages — centred, minimal layout */
body.page-type-holding .site-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height) - 80px);
  text-align: center;
}

body.page-type-holding .site-header .site-nav {
  display: none;
}

/* Static pages (about, contact, etc.) */
body.page-type-page .site-main {
  max-width: var(--content-max-width);
}