/*
Theme Name:   Tree Insurance Agency
Theme URI:    https://treeinsuranceagency.com
Description:  Custom child theme for Tree Insurance Agency, built on Hello Elementor. Contains the agency's design tokens, typography, login branding and admin customisations. Designed and developed by Bizopia.
Author:       Bizopia
Author URI:   https://bizopia.com
Template:     hello-elementor
Version:      1.4.3
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  tree-insurance
Tags:         elementor, custom, insurance
*/

/* ==========================================================================
   Tree Insurance Agency — Design Tokens
   Sampled from the agency logo and the previous site's Elementor globals.
   Full documentation: /design/style-guide.html
   ========================================================================== */

:root {

  /* --- Forest: structure. Headers, navigation, footers, headings --------- */
  --ti-forest-50:  #F4F8F1;
  --ti-forest-100: #E4EEDD;
  --ti-forest-200: #C2D8B6;
  --ti-forest-300: #8FB87A;
  --ti-forest-400: #5D9047;
  --ti-forest-500: #406831;
  --ti-forest-600: #2D4D23;
  --ti-forest-700: #1D3617;
  --ti-forest-900: #12240F;

  /* --- Leaf: heritage brand green. ACCENT ONLY — never text ------------- */
  --ti-leaf-50:  #F7FAEF;
  --ti-leaf-100: #E6F0D0;
  --ti-leaf-200: #CCE1A3;
  --ti-leaf-300: #AFD06D;
  --ti-leaf-400: #8FB73C;  /* brand */
  --ti-leaf-500: #72942E;
  --ti-leaf-600: #557321;  /* lowest step safe for body text — 5.4:1 */
  --ti-leaf-700: #3C5417;
  --ti-leaf-900: #26380F;

  /* --- Bark: heritage brand brown. Action colour ------------------------ */
  --ti-bark-50:  #F9F5F0;
  --ti-bark-100: #F1E6DA;
  --ti-bark-200: #E2C6AC;
  --ti-bark-300: #D09B6C;
  --ti-bark-400: #B76F34;
  --ti-bark-500: #8D5325;  /* brand */
  --ti-bark-600: #6E3F1C;
  --ti-bark-700: #4E2B12;
  --ti-bark-900: #361D0C;

  /* --- Clay: secondary warm accent. Use sparingly ----------------------- */
  --ti-clay-50:  #FAF3EF;
  --ti-clay-100: #F4E1D7;
  --ti-clay-200: #E8C2B0;
  --ti-clay-300: #DA9B81;
  --ti-clay-400: #CD7451;
  --ti-clay-500: #B65735;
  --ti-clay-600: #8E4329;
  --ti-clay-700: #672F1E;
  --ti-clay-900: #472015;

  /* --- Sand: warm structural neutral. Backgrounds ----------------------- */
  --ti-sand-50:  #FBF8F4;
  --ti-sand-100: #F4EFE6;
  --ti-sand-200: #E9E0D3;
  --ti-sand-300: #D7C9B7;
  --ti-sand-400: #BDAA93;
  --ti-sand-500: #A48A70;
  --ti-sand-600: #816A56;
  --ti-sand-700: #5A4B3F;
  --ti-sand-900: #3B312B;

  /* --- Stone: warm-biased grey. Type ------------------------------------ */
  --ti-stone-50:  #FBFAF9;
  --ti-stone-100: #F4F3F1;
  --ti-stone-200: #E6E3E0;
  --ti-stone-300: #C7C2BD;
  --ti-stone-400: #A09992;
  --ti-stone-500: #7E766D;
  --ti-stone-600: #5D5751;  /* lowest step safe for body text — 7.1:1 */
  --ti-stone-700: #423D38;
  --ti-stone-900: #2A2623;

  /* --- Semantic --------------------------------------------------------- */
  --ti-bg:          var(--ti-sand-50);
  --ti-bg-panel:    #FFFFFF;
  --ti-bg-sunk:     var(--ti-sand-100);
  --ti-ink:         var(--ti-stone-900);
  --ti-ink-muted:   var(--ti-stone-600);
  --ti-rule:        var(--ti-sand-200);
  --ti-heading:     var(--ti-forest-700);
  --ti-link:        var(--ti-bark-600);
  --ti-cta:         var(--ti-bark-500);
  --ti-cta-hover:   var(--ti-bark-600);
  --ti-accent:      var(--ti-leaf-400);
  --ti-focus:       var(--ti-leaf-400);

  /* --- Type ------------------------------------------------------------- */
  --ti-font-display: "Petrona", Georgia, "Times New Roman", serif;
  --ti-font-body:    "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ti-measure:      66ch;

  --ti-t-h1:   52px;
  --ti-t-h2:   39px;
  --ti-t-h3:   29px;
  --ti-t-h4:   22px;
  --ti-t-lede: 19px;
  --ti-t-body: 17px;
  --ti-t-sm:   15px;
  --ti-t-cap:  13px;

  /* --- Space: 4px base -------------------------------------------------- */
  --ti-s-1: 4px;  --ti-s-2: 8px;  --ti-s-3: 12px; --ti-s-4: 16px;
  --ti-s-5: 24px; --ti-s-6: 32px; --ti-s-7: 48px; --ti-s-8: 64px; --ti-s-9: 96px;

  --ti-radius:    4px;
  --ti-radius-lg: 7px;
  --ti-shadow:    0 1px 2px rgba(59,49,43,.06), 0 8px 24px -12px rgba(59,49,43,.18);

  /* --- Gradients (style guide, section 07) ------------------------------ */
  --ti-grad-canopy:
      radial-gradient(120% 90% at 12% 8%,  #2D4D23 0%, transparent 55%),
      radial-gradient(100% 80% at 88% 22%, #3C5417 0%, transparent 50%),
      linear-gradient(160deg, #1D3617, #12240F);
  --ti-grad-understory: linear-gradient(165deg, #2D4D23, #1D3617);
  --ti-grad-ember:      linear-gradient(145deg, #8D5325, #4E2B12);
  --ti-scrim-base: linear-gradient(to top, rgba(18,36,15,.88) 0%, rgba(18,36,15,.55) 38%, rgba(18,36,15,0) 78%);
  --ti-scrim-side: linear-gradient(100deg, rgba(18,36,15,.92) 0%, rgba(18,36,15,.72) 42%, rgba(18,36,15,.15) 100%);
  --ti-wash-paper: linear-gradient(180deg, #FBF8F4, #F4EFE6);
  --ti-wash-leaf:  linear-gradient(180deg, #F7FAEF, #E6F0D0);
  --ti-wash-clay:  linear-gradient(180deg, #FAF3EF, #F4E1D7);
  --ti-pat-contour: repeating-radial-gradient(circle at 18% 118%, transparent 0 17px, rgba(143,183,60,.20) 17px 18.5px);
  --ti-pat-hatch:   repeating-linear-gradient(45deg, transparent 0 7px, rgba(141,83,37,.11) 7px 8px);
  /* Leaf fall. Licensed iStock artwork (2210074326), composed into a 420px
     tile at 2x, edge-wrapped so it repeats seamlessly. Opacity is baked
     into the PNG alpha — regenerate the tile to change it. */
  --ti-pat-leaf:    url("assets/images/leaf-pattern.png");
  --ti-rule-brand:  linear-gradient(90deg, #8FB73C 0 33.3%, #8D5325 33.3% 66.6%, #B65735 66.6%);
}

/* ==========================================================================
   Base
   Elementor controls most page styling. Only global defaults live here.
   ========================================================================== */

body {
  background: var(--ti-bg);
  color: var(--ti-ink);
  font-family: var(--ti-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ti-font-display);
  color: var(--ti-heading);
  text-wrap: balance;
}

a { color: var(--ti-link); }

/* Keyboard focus must stay visible — accessibility requirement, do not remove. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ti-focus);
  outline-offset: 2px;
}

/* Skip link, revealed on focus */
.ti-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--ti-forest-700);
  color: #fff;
  font-family: var(--ti-font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--ti-radius) 0;
}
.ti-skip-link:focus {
  left: 0;
  color: #fff;
}

/* Utility classes available to Elementor widgets via the Advanced > CSS Classes field */
.ti-ground-canopy     { background: var(--ti-grad-canopy); }
.ti-ground-understory { background: var(--ti-grad-understory); }
.ti-ground-ember      { background: var(--ti-grad-ember); }
.ti-wash-paper        { background: var(--ti-wash-paper); }
.ti-wash-leaf         { background: var(--ti-wash-leaf); }
.ti-wash-clay         { background: var(--ti-wash-clay); }
.ti-pattern-contour   { background-color: var(--ti-forest-700); background-image: var(--ti-pat-contour); }
.ti-pattern-hatch     { background-color: var(--ti-sand-100); background-image: var(--ti-pat-hatch); }
.ti-pattern-leaf      { background-color: var(--ti-forest-700); background-image: var(--ti-pat-leaf);
                        background-size: 420px 420px; background-repeat: repeat; }
.ti-rule-brand        { height: 4px; background: var(--ti-rule-brand); }
.ti-measure           { max-width: var(--ti-measure); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Long-form text (articles and legal pages: Elementor Post Content widget)
   Heading sizes and rhythm for text written in the WordPress editor.
   ========================================================================== */
.elementor-widget-theme-post-content :where(h2, h3, h4) {
  font-family: var(--ti-font-display);
  color: var(--ti-heading);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.elementor-widget-theme-post-content h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); margin: 1.8em 0 .5em; }
.elementor-widget-theme-post-content h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.5rem); font-weight: 500; margin: 1.6em 0 .4em; }
.elementor-widget-theme-post-content h4 { font-size: 1.15rem; font-weight: 500; margin: 1.4em 0 .35em; }
.elementor-widget-theme-post-content :where(h2, h3, h4):first-child { margin-top: 0; }
.elementor-widget-theme-post-content :where(p, ul, ol) { margin: 0 0 1.1em; }
.elementor-widget-theme-post-content :where(ul, ol) { padding-left: 1.3em; }
.elementor-widget-theme-post-content li { margin-bottom: .35em; }
.elementor-widget-theme-post-content li::marker { color: var(--ti-forest-500); }
.elementor-widget-theme-post-content a { color: var(--ti-link); text-underline-offset: .18em; }
.elementor-widget-theme-post-content a:hover { color: var(--ti-bark-700); }

/* Article blocks: key points box, comparison tables, in-article photo, FAQ (Yoast FAQ block), sources list */
.elementor-widget-theme-post-content .ti-keypoints {
  margin: 0 0 2em; padding: 1.4em 1.6em .4em; border-radius: 7px;
  background: var(--ti-forest-100); border-left: 4px solid var(--ti-leaf-500);
}
.elementor-widget-theme-post-content .ti-keypoints__label {
  margin: 0 0 .6em; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ti-leaf-700);
}
.elementor-widget-theme-post-content .ti-keypoints ul { margin-bottom: 1em; }
.elementor-widget-theme-post-content .wp-block-table { margin: 1.6em 0 2em; overflow-x: auto; }
.elementor-widget-theme-post-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.45; }
.elementor-widget-theme-post-content .wp-block-table :where(th, td) { padding: .7em .8em; border: 1px solid #E9E0D3; text-align: left; vertical-align: top; }
.elementor-widget-theme-post-content .wp-block-table thead th { background: var(--ti-leaf-100); color: var(--ti-heading); font-weight: 600; }
.elementor-widget-theme-post-content .wp-block-table tbody tr:nth-child(even) td { background: var(--ti-sand-50); }
.elementor-widget-theme-post-content .wp-block-image { margin: 2em 0; }
.elementor-widget-theme-post-content .wp-block-image img { width: 100%; height: auto; border-radius: 7px; }
.elementor-widget-theme-post-content .schema-faq-section { padding: 1.1em 0; border-top: 1px solid #E9E0D3; }
.elementor-widget-theme-post-content .schema-faq-section:last-child { border-bottom: 1px solid #E9E0D3; }
.elementor-widget-theme-post-content .schema-faq-question { display: block; margin-bottom: .4em; font-family: var(--ti-font-display); font-weight: 500; font-size: 1.15em; color: var(--ti-heading); }
.elementor-widget-theme-post-content .schema-faq-answer { margin: 0; }
.elementor-widget-theme-post-content .ti-sources { font-size: .88em; color: var(--ti-stone-600, #5D5751); }

/* Sticky header (Elementor Motion Effects > Sticky on the header container): keep in-page jumps such as
   /client-center/#report-a-claim from landing under it. Header is about 120-130px tall with the line row, 60-76px below 880px where that row is hidden. */
html { scroll-padding-top: 140px; }
@media (max-width: 879px) { html { scroll-padding-top: 92px; } }