/*
Theme Name: TheHerbalistCorner
Template: hello-elementor
Version: 1.0
*/

.skip-link.screen-reader-text {
    display: none !important;
}

.userprofile .elementor-popup-modal .dialog-close-button {
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.user-profile .elementor-popup-modal {
  pointer-events: auto !important;
}

.elementor-popup-modal .dialog-close-button {
  z-index: 99999 !important;
  pointer-events: auto !important;
}

body.popup-scroll-locked {
  overflow: hidden !important;
}

html, body {
  overscroll-behavior: contain;
}

/* =========================
   1. FONT IMPORTS
   ========================= */

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi/Satoshi-Variable.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Euclid Circular B";
  src: url("assets/fonts/Euclid-Font/EuclidCircularBTrial-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Euclid Circular B";
  src: url("assets/fonts/Euclid-Font/EuclidCircularBTrial-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Euclid Circular B";
  src: url("assets/fonts/Euclid-Font/EuclidCircularBTrial-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}


/* ============================================================
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

  /* COLOUR — Primary (Dusty Rose / Terracotta) */
  --thc-primary-50:  #f8f1f1;
  --thc-primary-100: #ead3d3;
  --thc-primary-200: #e0bebe;
  --thc-primary-300: #d1a0a0;
  --thc-primary-400: #c98d8d;
  --thc-primary-500: #bb7171;
  --thc-primary-600: #aa6767;
  --thc-primary-700: #855050;
  --thc-primary-800: #673e3e;
  --thc-primary-900: #4f2f2f;

  /* COLOUR — Accent (Sage / Olive Green) */
  --thc-accent-50:  #f7f8f1;
  --thc-accent-100: #e5ead3;
  --thc-accent-200: #d8e0be;
  --thc-accent-300: #c7d1a1;
  --thc-accent-400: #bcc98e;
  --thc-accent-500: #abbb72;
  --thc-accent-600: #9caa68;
  --thc-accent-700: #798551;
  --thc-accent-800: #5e673f;
  --thc-accent-900: #484f30;

  /* COLOUR — Neutral (Greyscale) */
  --thc-gray-50:  #f7f7f7;
  --thc-gray-100: #e6e6e6;
  --thc-gray-200: #b0b0b0;
  --thc-gray-300: #8a8a8a;
  --thc-gray-400: #7c7c7c;
  --thc-gray-500: #606060;
  --thc-gray-600: #545454;
  --thc-gray-700: #333333;
  --thc-gray-800: #1a1a1a;
  --thc-gray-900: #000000;

  /* COLOUR — Semantic Aliases */
  --thc-color-primary:        var(--thc-primary-500);
  --thc-color-primary-hover:  var(--thc-primary-700);
  --thc-color-accent:         var(--thc-accent-700);
  --thc-color-accent-hover:   var(--thc-accent-800);
  --thc-color-heading:        var(--thc-gray-900);
  --thc-color-body:           var(--thc-gray-700);
  --thc-color-muted:          var(--thc-gray-400);
  --thc-color-light:          var(--thc-primary-50);
  --thc-color-white:          #ffffff;
  --thc-color-black:          #000000;
  --thc-color-bg-dark:        var(--thc-gray-900);
  --thc-color-bg-light:       var(--thc-primary-50);
  --thc-color-bg-soft:        var(--thc-accent-50);
  --thc-color-bg-white:       #ffffff;
  --thc-color-border:         var(--thc-gray-100);
  --thc-color-border-dark:    var(--thc-gray-600);

  /* TYPOGRAPHY — Font Families */
  --thc-font-heading: 'Euclid Circular B', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --thc-font-primary: 'Satoshi',            -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --thc-font-body:    var(--thc-font-primary);
  --thc-font-mono:    'Courier New', Courier, monospace;

  /* TYPOGRAPHY — Font Sizes */
  --thc-fs-h1:      3.5rem;
  --thc-fs-h2:      2.75rem;
  --thc-fs-h3:      1.875rem;
  --thc-fs-h4:      1.5rem;
  --thc-fs-h5:      1.25rem;
  --thc-fs-h6:      1.125rem;
  --thc-fs-body:    1rem;
  --thc-fs-body-lg: 1.125rem;
  --thc-fs-small:   0.875rem;
  --thc-fs-xs:      0.75rem;
  --thc-fs-nav:     0.9375rem;
  --thc-fs-btn:     1rem;
  --thc-fs-label:   0.75rem;

  /* TYPOGRAPHY — Font Weights */
  --thc-fw-light:     300;
  --thc-fw-regular:   400;
  --thc-fw-medium:    500;
  --thc-fw-semibold:  600;
  --thc-fw-bold:      700;
  --thc-fw-extrabold: 800;

  /* TYPOGRAPHY — Line Heights */
  --thc-lh-heading: 1.15;
  --thc-lh-body:    1.65;
  --thc-lh-relaxed: 1.8;
  --thc-lh-tight:   1.1;
  --thc-lh-btn:     1;

  /* TYPOGRAPHY — Letter Spacing */
  --thc-ls-heading: -0.02em;
  --thc-ls-body:    0em;
  --thc-ls-label:   0.1em;
  --thc-ls-btn:     0.02em;

  /* BORDER RADIUS */
  --thc-radius-sm:   4px;
  --thc-radius-md:   8px;
  --thc-radius-lg:   12px;
  --thc-radius-xl:   20px;
  --thc-radius-full: 9999px;

  /* TRANSITIONS */
  --thc-transition-fast: 0.15s ease;
  --thc-transition-base: 0.25s ease;
  --thc-transition-slow: 0.4s ease;
}


/* ============================================================
   3. BASE RESET
   ============================================================ */

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

body {
  font-family:              var(--thc-font-body);
  font-size:                var(--thc-fs-body);
  font-weight:              var(--thc-fw-regular);
  line-height:              var(--thc-lh-body);
  color:                    var(--thc-color-body);
  background-color:         var(--thc-color-bg-white);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}


/* ============================================================
   4. TYPOGRAPHY — HEADINGS
   ============================================================ */

/* Shared base — h1 and h2 are visually identical by design */
.h1, h1,
.h2, h2 {
  font-family:    var(--thc-font-heading);
  font-size:      var(--thc-fs-h1);
  font-weight:    var(--thc-fw-medium);
  line-height:    130% !important;
  letter-spacing: var(--thc-ls-heading);
  color:          var(--thc-color-heading);
  margin-top:     0;
  margin-bottom:  1.5rem;
}

.h2-smaller {
  font-size:   var(--thc-fs-h2);
  line-height: 130% !important;
}

.h3, h3 {
  font-family:    var(--thc-font-heading);
  font-size:      var(--thc-fs-h3);
  font-weight:    var(--thc-fw-medium);
  line-height:    130% !important;
  letter-spacing: var(--thc-ls-heading);
  color:          var(--thc-color-heading);
  margin-top:     0;
  margin-bottom:  1rem;
}

.h4, h4 {
  font-family:    var(--thc-font-heading);
  font-size:      var(--thc-fs-h4);
  font-weight:    var(--thc-fw-medium);
  line-height:    130% !important;
  letter-spacing: -0.01em;
  color:          var(--thc-color-heading);
  margin-top:     0;
  margin-bottom:  1rem;
}

.h5, h5 {
  font-family:    var(--thc-font-heading);
  font-size:      var(--thc-fs-h5);
  font-weight:    var(--thc-fw-medium);
  line-height:    120% !important;
  letter-spacing: 0em;
  color:          var(--thc-color-heading);
  margin-top:     0;
  margin-bottom:  0.75rem;
}

.h6, h6 {
  font-family:    var(--thc-font-heading);
  font-size:      var(--thc-fs-h6);
  font-weight:    var(--thc-fw-medium);
  line-height:    120% !important;
  letter-spacing: var(--thc-ls-label);
  text-transform: uppercase;
  color:          var(--thc-color-muted);
  margin-top:     0;
  margin-bottom:  0.75rem;
}

/* Headings on dark/photo hero backgrounds */
.thc-bg-dark h1, .thc-bg-dark .h1,
.thc-bg-dark h2, .thc-bg-dark .h2,
.thc-bg-dark h3, .thc-bg-dark .h3,
.thc-bg-dark h4, .thc-bg-dark .h4,
.thc-bg-dark h5, .thc-bg-dark .h5,
.thc-bg-dark h6, .thc-bg-dark .h6 {
  color: var(--thc-color-white);
}

.thc-hero-h1 h1 {
  color:          white !important;
  line-height:    125% !important;
  letter-spacing: 1px !important;
}

.thc-header-h2-white h2 {
  color:          white !important;
  font-weight:    500 !important;
  line-height:    130% !important;
  letter-spacing: 1px !important;
}

.thc-hero-txt p {
  color:          white !important;
  letter-spacing: 0px;
  line-height:    130% !important;
}

.footer-cta h2 {
  color:          white;
  font-weight:    500 !important;
  letter-spacing: 0px !important;
  line-height:    130% !important;
}

/* ============================================================
   5. TYPOGRAPHY — BODY & PARAGRAPH
   ============================================================ */

p,
.thc-body {
  font-size:     var(--thc-fs-body);
  font-weight:   var(--thc-fw-regular);
  line-height:   1.375 !important;
  color:         var(--thc-color-body);
  margin-top:    0;
  margin-bottom: 1rem;
}

.thc-caption p {
  color:     var(--thc-color-white) !important;
  font-size: var(--thc-fs-body-lg) !important;
}

.thc-text p {
  color:     var(--thc-color-white) !important;
  font-size: var(--thc-fs-body) !important;
}

a {
  color: var(--thc-color-primary);
}

a:hover {
  color: var(--thc-color-accent);
}

.thc-body-lg p {
  font-size:   var(--thc-fs-body-lg) !important;
  line-height: var(--thc-lh-body);
}
.thc-body-muted { color: var(--thc-color-muted); }
.thc-body-white { color: var(--thc-color-white); }

/* Eyebrow / section label */
.thc-label {
  display:        block;
  font-size:      var(--thc-fs-label);
  font-weight:    var(--thc-fw-semibold);
  letter-spacing: var(--thc-ls-label);
  line-height:    125% !important;
  text-transform: uppercase;
  color:          var(--thc-color-accent);
  margin-bottom:  0.75rem;
}
.thc-label--dark   { color: var(--thc-color-primary); }
.thc-label-white p {
  font-size: 1.125rem !important;
  color:     #FFFFFFCC !important;
}

.thc-nav-link a {
  font-size:       var(--thc-fs-nav);
  font-weight:     var(--thc-fw-regular);
  letter-spacing:  0em;
  color:           var(--thc-gray-700);
  text-decoration: none;
  transition:      color var(--thc-transition-fast);
}

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

/* Custom Text Classes */

.what-we-believe-txt p{
    color: #fff !important;
}

.font-regular p,
.font-regular li {
  font-weight: 300 !important;
}
.footer-link-list li{
	font-weight: 400;
}

.footer-text p{
	color: #fff !important;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

/* Base button reset — applies to every button variant */
.thc-btn-primary .elementor-button,
.thc-btn-text .elementor-button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.65rem;
  font-family:     var(--thc-font-primary);
  font-size:       1rem;
  font-weight:     700;
  letter-spacing:  0px;
  line-height:     137.5%;
  padding:         1.25rem 1.875rem 1.25rem 2rem !important;
  border-radius:   var(--thc-radius-full);
  border:          2px solid transparent;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;
  transition:      all 200ms ease !important;
  flex:            0 1 auto;
  min-width:       clamp(11rem, 18vw, 12rem);
  min-height:      3.125rem;
}

/* Ensure icons follow text color and animate on hover */
.thc-btn-primary .elementor-button svg,
.thc-btn-text .elementor-button svg {
  fill:       currentColor;
  transition: transform 200ms ease;
}

/* PRIMARY — Solid rose, used for main CTAs (Subscribe Now, Send Message) */

.thc-btn-primary .elementor-button {
  background-color: var(--thc-color-primary);
  color:            var(--thc-color-white) !important;
  border:           0;
}

/* darker rose overlay on hover */
.thc-btn-primary .elementor-button:hover {
  color:         #AA6767 !important;
  background:    #E0BEBE !important;
  transition:    200ms ease;
}

/* TEXT — link-style, with optional white variant via underline */

.thc-btn-text .elementor-button {
  background:      transparent !important;
  border:          none !important;
  padding:         0 !important;
  color:           #111;
  font-weight:     700 !important;
  min-width:       auto;
  min-height:      auto;
}

/* No overlay on text buttons */
.thc-btn-text .elementor-button::after {
  display: none !important;
}

/* Subtle interaction on text buttons */
.thc-btn-text .elementor-button:hover,
.thc-btn-text .elementor-button:active,
.thc-btn-text .elementor-button:focus {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color:     var(--thc-color-primary);
}

/* Icon nudge on hover for solid/outline buttons */
.thc-btn-primary .elementor-button:hover svg,
.thc-btn-text .elementor-button:hover svg {
  transform: translateX(3px);
}

/* "Back To Previous Page" — primary fill with left-pointing chevron */
.thc-btn-back .elementor-button:hover svg {
  transform: translateX(-3px);
}

/*Button Addons*/
.home-text-btn .elementor-button:hover{
    background: #BB7171 !important;
    color: #fff !important;
    padding: 0.5rem 1.125rem !important;
    text-decoration: none !important;
}

/* ============================================================
   7. SECTION & LAYOUT UTILITIES
   ============================================================ */

.thc-homepage-hero {
  max-height: 100vh !important;
}

.thc-hero {
  margin-top: -11.5rem;
  padding:    15.5rem 5rem 8rem 5rem;
  background: transparent;
  gap:        3.5rem;
}

.thc-section {
  padding: 6.25rem 5rem;
}

.thc-section-hero-md {
  margin-top: -13.5rem;
  padding:    15rem 5rem 8rem 5rem;
  background: transparent;
  gap:        2.5rem;
}

.thc-section--sm {
  padding-top:    4rem;
  padding-bottom: 4rem;
}

.thc-footer {
  background-color: var(--thc-color-bg-dark);
  padding:          8rem 5rem 3rem 5rem;
  gap:              3rem;
}

.featured-post-home:hover{
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.featured-post-listing:hover{
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.post-template:hover{
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

/* Newsletter strip — sage green block with leaf decorations */
.thc-newsletter {
  background-color: var(--thc-color-accent);
  padding:          4rem 5rem;
}

/* Hero overlay gradient — for hero sections sitting under header */
.thc-gradient {
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 100%);
}

.thc-bg-dark {
  background-color: var(--thc-color-bg-dark);
}

.header-pill p {
  font-weight: 400 !important;
  color:       var(--thc-color-primary) !important;
  padding:     6px 10px;
}

.header-pill {
  border-radius: 100px !important;
}

.thc-bg-grey  { background: var(--thc-gray-100); }
.thc-bg-soft  { background: var(--thc-color-bg-soft); }

/* Background helpers */
.thc-bg-white { background-color: var(--thc-color-bg-white); }
.thc-bg-light { background-color: var(--thc-color-bg-light); }

/* Text colour helpers */
.thc-text-white   { color: var(--thc-color-white);   }
.thc-text-dark    { color: var(--thc-color-heading); }
.thc-text-muted   { color: var(--thc-color-muted);   }
.thc-text-primary { color: var(--thc-color-primary); }
.thc-text-accent  { color: var(--thc-color-accent);  }


/* Category card Listing — base styling for grid items */
.cat-listing{
    border-radius: 0.5rem;
    cursor: pointer;
}
.cat-listing:hover{
    box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.06);
}

.cat-listing-header h5{
    font-weight: 500 !important;
    color: #fff !important;
}

/* ============================================================
   8. ELEMENTOR OVERRIDES
   ============================================================ */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--thc-font-heading);
  font-weight: var(--thc-fw-bold);
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--thc-font-body) !important;
  font-size:   1rem;
  color:       var(--thc-color-body);
}

.elementor-button {
  font-family:    var(--thc-font-primary);
  font-weight:    var(--thc-fw-bold);
  letter-spacing: var(--thc-ls-btn);
  border-radius:  var(--thc-radius-full) !important;
  transition:     color !important;
}

.elementor a, span {
  text-decoration: none;
}

.elementor-button {
  z-index: 0;
}

.elementor-button * {
  position: relative;
  z-index:  1;
}

/* ============================================================
   9. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 1024px) {
  .thc-header {
    padding: 3rem 3rem;
  }

  .thc-hero {
    margin-top: -8rem;
    padding:    12rem 4rem 6rem 4rem;
    gap:        3rem;
  }

  .thc-section-hero-md {
    margin-top: -11rem;
    padding:    13rem 7rem 4rem 7rem;
    background: transparent;
    gap:        2.5rem;
  }

  .thc-footer {
    padding: 3rem 3rem;
    gap:     1.5rem;
  }

  .thc-newsletter {
    padding: 3rem 3rem;
  }

  .thc-section {
    padding: 4rem 2rem;
  }

  .end-margin p {
    margin-top: 1.5rem !important;
  }
}

@media (max-width: 768px) {

  .h1, h1,
  .h2, h2 {
    font-size: 2rem;
    line-height: 120% !important;
  }

  .h3, h3 {
    font-size: 1.875rem;
    line-height: 120% !important; 
  }

  .h4, h4 {
    font-size: 1.5rem;
    line-height: 120% !important;
  }

  .h5, h5 {
    font-size: 1.25rem;
    line-height: 120% !important;
  }

  .thc-header {
    padding: 2rem 0.75rem;
  }

  .thc-hero {
    margin-top: -7rem;
    padding:    10rem 1.5rem 5rem 1.5rem;
    gap:        2.5rem;
  }

  .thc-section-hero-md {
    margin-top: -7rem;
    padding:    10rem 1.5rem 5rem 1.5rem;
    gap:        2.5rem;
  }

  .thc-section {
    padding: 4rem 1.5rem;
  }

  .thc-section--sm {
    padding-top:    3rem;
    padding-bottom: 3rem;
  }

  .thc-footer {
    padding: 3rem 1.5rem;
    gap:     1.5rem;
  }

  .thc-newsletter {
    padding: 3rem 1.5rem;
  }

  .elementor-button {
    font-size:   1rem !important;
    line-height: 120% !important;
  }

  .end-margin p {
    margin-top: 1rem !important;
  }
}

@media (max-width: 480px) {
  .thc-hero {
    margin-top: -5rem;
    padding:    8rem 2rem 4rem 2rem;
    gap:        2rem;
  }

  .thc-btn-primary .elementor-button {
    min-width: 100%;
  }
}