/*
Theme Name: DL Tree Service
Template: devq-starter
Author: Josh Yager
Author URI: https://thedevq.com/
Description: Child theme for DL Tree Service, built on DevQ Starter.
Version: 2.0.0
*/

/* ══════════════════════════════════════════════════════════
   DL TREE SERVICE — child theme
   Body design ships as custom blocks under blocks/<name>/.
   This file carries only site-wide CHROME: top bar, header,
   dropdown, mobile menu, sticky mobile bar. Footer chrome lives
   in template-parts/footer/style-columns.php (child override).
   Tokens: --primary #649d47 (brand green)  --secondary #211D19 (charcoal)
           --tertiary #5FA83C (bright accent green — chrome + dark-band pops)
           --dl-accent #2E7D32 (deep accent green — eyebrows/accents on light bg)
           #1B4332 = deep forest (dark bands only)
           cream #F5F3EE  Archivo (--font1)  Public Sans (--font2)
   ══════════════════════════════════════════════════════════ */

/* Accent-green tokens (secondary color). --tertiary (bright) comes from ACF
   theme settings and drives chrome; --dl-accent is the darker green used for
   small text/borders on light backgrounds where legibility needs the contrast. */
:root {
    --dl-accent: #2E7D32;
    --dl-accent-h: #245F27;
}

/* ── Top emergency utility bar ───────────────────────────── */
.dl-topbar { background: var(--secondary); color: #F5F3EE; }
.dl-topbar__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 9px 24px; flex-wrap: wrap; text-align: center;
    font-size: 13px; letter-spacing: .02em;
}
.dl-topbar__flag {
    font-family: var(--font1); font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; font-size: 11px; color: var(--tertiary);
}
.dl-topbar__text { opacity: .85; }
.dl-topbar__phone { color: var(--tertiary); font-weight: 700; font-family: var(--font1); }
.dl-topbar__phone:hover { color: #7ABF4D; }

/* ── Header: sticky, white, forest uppercase nav, green pill CTA ── */
.devq-header-wrap.devq-header-standard {
    position: sticky; top: 0; z-index: 50;
    background: #fff; border-bottom: 1px solid #e7e3da;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.devq-header-standard .devq-header { padding: 12px 0; gap: 20px; }
.devq-header-standard .devq-header-logo img { width: auto; height: 52px; }

.devq-header-standard .devq-desktop-nav > li > a {
    font-family: var(--font1); font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--primary); padding: 10px 12px;
}
.devq-header-standard .devq-desktop-nav > li > a:hover,
.devq-header-standard .devq-desktop-nav > li.current-menu-item > a,
.devq-header-standard .devq-desktop-nav > li.current-page-ancestor > a { color: var(--tertiary); }
.devq-header-standard .devq-desktop-nav > li > a i.fa-caret-down { font-size: 10px; opacity: .6; }

/* Services dropdown → orange top rule, forest items */
.devq-header-standard .dropdown-menu {
    min-width: 260px; border-top: 3px solid var(--tertiary);
    border-radius: 0 0 8px 8px; box-shadow: 0 18px 40px rgba(33,29,25,.16);
    padding: 8px;
}
.devq-header-standard .dropdown-menu li a {
    font-family: var(--font1); font-weight: 700; font-size: 14px;
    color: var(--primary); padding: 10px 12px; border-radius: 6px;
    border-left: 3px solid transparent;
}
.devq-header-standard .dropdown-menu li a:hover {
    background: #F5F3EE; color: var(--primary); border-left-color: var(--tertiary);
}

/* Header CTA pill: forest → orange on hover */
.devq-header-standard .devq-header-cta {
    background: var(--dl-accent); border: none; color: #fff;
    font-family: var(--font1); font-weight: 800; font-size: 13px;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 12px 20px; border-radius: 6px;
}
.devq-header-standard .devq-header-cta:hover { background: var(--tertiary); color: var(--secondary); }

/* ── Mobile menu trigger ─────────────────────────────────── */
/* Panel itself lives in template-parts/mobile-menu/style-slidein.php (child override). */
@media (max-width: 1199px) {
    .devq-header-standard .devq-header-logo { flex: 0 0 auto; text-align: left; }
    .devq-header-standard .devq-header-logo img { margin: 0; }
}
.devq-mobile-menu-toggle, .hamburger, .devq-hamburger { color: var(--primary); }

/* ── Sticky mobile action bar (Call · Text · Estimate) ──── */
.dl-mobilebar { display: none; }
@media (max-width: 767px) {
    .dl-mobilebar {
        display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
        background: var(--secondary); border-top: 1px solid #3a352d;
        box-shadow: 0 -6px 24px rgba(0,0,0,.28);
    }
    .dl-mobilebar__btn {
        text-align: center; padding: 15px 6px; color: #F5F3EE;
        font-family: var(--font1); font-weight: 800; text-transform: uppercase;
        font-size: 13px; letter-spacing: .03em; text-decoration: none;
    }
    .dl-mobilebar__call { background: var(--tertiary); color: var(--secondary); }
    body { padding-bottom: 52px; }
}
/* Menu panel carries its own call/estimate CTAs — drop the bar so the two don't stack. */
body.devq-menu-open .dl-mobilebar { display: none; }

/* ══════════════════════════════════════════════════════════
   GRAVITY FORMS — brand styling (GF 2.10 "orbital" framework)
   GF ships high-specificity theme CSS + CSS custom props, so
   overrides MUST use !important (and the .gform_wrapper prefix)
   or they won't take.
   ══════════════════════════════════════════════════════════ */

/* Tighter spacing between fields (GF default row-gap is 40px) */
.gform_wrapper.gform-theme .gform_fields { row-gap: 18px !important; }

/* Labels */
.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme legend.gfield_label {
    font-family: var(--font1) !important;
    font-weight: 700 !important;
    color: #211D19 !important;
    font-size: 14px !important;
    letter-spacing: .01em !important;
    margin-bottom: 8px !important;
}
.gform_wrapper.gform-theme .gfield_required { color: var(--tertiary) !important; }

/* Inputs / textarea / select */
.gform_wrapper.gform-theme input[type=text],
.gform_wrapper.gform-theme input[type=email],
.gform_wrapper.gform-theme input[type=tel],
.gform_wrapper.gform-theme input[type=url],
.gform_wrapper.gform-theme input[type=number],
.gform_wrapper.gform-theme input[type=password],
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme .gform-theme-field-control {
    font-family: var(--font2) !important;
    font-size: 16px !important;
    color: #211D19 !important;
    background-color: #ffffff !important;
    border: 1px solid #d9d4c9 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.gform_wrapper.gform-theme textarea { min-height: 130px !important; }

/* Focus — brand green ring */
.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme textarea:focus,
.gform_wrapper.gform-theme select:focus,
.gform_wrapper.gform-theme .gform-theme-field-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(100,157,71,.18) !important;
    outline: none !important;
}
.gform_wrapper.gform-theme input::placeholder,
.gform_wrapper.gform-theme textarea::placeholder { color: #9a938a !important; }

/* Submit button — brand green, burnt-orange on hover (mirrors header CTA) */
.gform_wrapper.gform-theme .gform_footer .gform_button,
.gform_wrapper.gform-theme .gform_button.button,
.gform_wrapper.gform-theme input[type=submit].gform_button {
    font-family: var(--font1) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: 14px !important;
    background: var(--primary) !important;
    color: #F5F3EE !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 15px 32px !important;
    cursor: pointer !important;
    width: auto !important;
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.gform_wrapper.gform-theme .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme .gform_button.button:hover {
    background: var(--tertiary) !important;
    color: #211D19 !important;
    transform: translateY(-1px) !important;
}

/* Secondary control buttons (e.g. file-upload "browse") — outline */
.gform_wrapper.gform-theme .gform-theme-button--control,
.gform_wrapper.gform-theme .gform_button_select_files {
    font-family: var(--font1) !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: var(--primary) !important;
    border: 1.5px solid var(--primary) !important;
    border-radius: 6px !important;
}
.gform_wrapper.gform-theme .gform-theme-button--control:hover,
.gform_wrapper.gform-theme .gform_button_select_files:hover {
    background: var(--primary) !important;
    color: #F5F3EE !important;
}

/* Validation */
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error textarea,
.gform_wrapper.gform-theme .gfield_error select {
    border-color: #c0392b !important;
}
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
    font-family: var(--font2) !important;
    color: #c0392b !important;
}