/* ==========================================================================
   Dehands Chartered Accountants — theme layer over the Pylon template.
   Palette source: the Dehands logo (#93CF52 green, sampled at 61% coverage).
   Accessibility rule: #93CF52 on white is only 1.86:1, so the brand green is
   used as a FILL with dark text (#16351F = 7.22:1), never as text on white.
   ========================================================================== */

:root {
    --thm-base: #93CF52;
    --thm-base-rgb: 147, 207, 82;
    --thm-primary: #16351F;
    --thm-primary-rgb: 22, 53, 31;
    --thm-secondary: #111C2C;
    --thm-secondary-rgb: 17, 28, 44;
    --dehands-green: #93CF52;
    --dehands-green-dark: #16351F;
    --dehands-green-deep: #0F2A17;
    --dehands-ink: #23393D;
}

body {
    color: var(--dehands-ink);
}

/* --- Headings keep Pylon's Rajdhani but read as a professional-services firm --- */
h1, h2, h3, h4, h5, h6 { color: var(--dehands-green-dark); }

/* --- Buttons: brand green fill with dark-green label (contrast-safe) --- */
.thm-btn,
.thm-btn:visited {
    background-color: var(--dehands-green);
    color: var(--dehands-green-dark);
    font-weight: 700;
}
.thm-btn:hover,
.thm-btn:focus {
    background-color: var(--dehands-green-dark);
    color: #ffffff;
}
.thm-btn.thm-btn--outline,
.call-to-action .thm-btn {
    background-color: var(--dehands-green);
    color: var(--dehands-green-dark);
}
.call-to-action .thm-btn:hover { background-color: #ffffff; color: var(--dehands-green-dark); }

/* --- Top bar / header details --- */
.topbar__left a,
.topbar__right a { color: inherit; }
.topbar__left .pylon-icon-pin1,
.topbar__right i { color: var(--dehands-green); }
.main-header__info-phone i { color: var(--dehands-green); }
/* --- Navigation colours ---------------------------------------------------
   Desktop navigation (and its sticky clone) only. Scoped with `.main-menu`
   because theme.js copies this same `.main-menu__list` into the mobile drawer,
   where dark green text would be unreadable on the dark panel. */
.main-menu .main-menu__list > li > a.is-active,
.main-menu .main-menu__list > li > a:hover { color: var(--dehands-green-dark); }

/* Pylon animates the underline on `::before` (there is no `::after`), so the
   active page needs `::before` forced visible. */
.main-menu .main-menu__list > li > a.is-active::before { transform: scale(1, 1); }

/* Mobile drawer: the accent green reads at 8.8:1 on the #0c2139 panel. */
.mobile-nav__content .main-menu__list li a.is-active,
.mobile-nav__content .main-menu__list li a:hover,
.mobile-nav__content .main-menu__list li a:focus {
    color: var(--dehands-green);
}

.mobile-nav__content .main-menu__list li a.is-active::before,
.mobile-nav__content .main-menu__list li a:hover::before {
    background-color: var(--dehands-green);
}

/* --- Hero: dark scrim so white headline text stays readable over photography ---
   Slider height is controlled here. Pylon's default container padding (150px/274px)
   makes it far taller than this design needs, because Pylon overlaps a feature box
   on its own demo page; we do not. */
.main-slider .swiper-slide { min-height: 630px; }
.main-slider .image-layer { position: relative; }
.main-slider .image-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(10, 32, 18, 0.94) 0%, rgba(15, 42, 23, 0.78) 45%, rgba(15, 42, 23, 0.25) 100%);
}
.main-slider .swiper-slide .container {
    position: relative;
    z-index: 2;
    padding-top: 90px;
    padding-bottom: 90px;
}
/* Only the eyebrow is uppercased in brand green — never the description paragraph. */
.main-slider .swiper-slide .container p:not(.dehands-hero__text) {
    color: var(--dehands-green);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}
.main-slider h1,
.main-slider h2 {
    color: #ffffff;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 18px;
}
.main-slider .thm-btn { background-color: var(--dehands-green); color: var(--dehands-green-dark); }
.main-slider .thm-btn:hover { background-color: #ffffff; color: var(--dehands-green-dark); }
@media (max-width: 991px) {
    .main-slider .swiper-slide { min-height: 520px; }
    .main-slider .swiper-slide .container { padding-top: 70px; padding-bottom: 70px; }
    .main-slider h1, .main-slider h2 { font-size: 34px; }
}
@media (max-width: 575px) {
    .main-slider .swiper-slide { min-height: 440px; }
    .main-slider .swiper-slide .container { padding-top: 56px; padding-bottom: 56px; }
    .main-slider h1, .main-slider h2 { font-size: 26px; }
    .main-slider .swiper-slide .container p:not(.dehands-hero__text) { font-size: 12px; }
}

/* --- Pylon paints a 10000px dark panel behind .why-choose__image. Our layouts place
   content beside the image, so that panel would cover it. Disable it everywhere. --- */
.why-choose__image::before { display: none; }

/* --- Footer: Pylon ships a downscaled copy of this background, so point at the
   full-resolution original with a version tag to defeat the stale browser cache. --- */
.site-footer {
    background-image: url(/public/assets/images/backgrounds/footer-bg-1-1.jpg?v=2);
}

/* --- Interior page header. Pylon styles `.page-header h2`, but every Dehands page
   carries its <h1> here (one h1 per page), so give it the same treatment. --- */
.page-header .container h1 {
    margin: 5px 0 0;
    line-height: 1.1;
    color: #ffffff;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Readability scrim. Pylon ships no overlay, so bright photographs left the
   breadcrumb and title washed out. A dark translucent gradient (brand deep green,
   matching the hero) guarantees contrast on every image. */
.page-header__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(10, 32, 18, 0.45);
    background-image: linear-gradient(90deg, rgba(10, 32, 18, 0.55) 0%, rgba(15, 42, 23, 0.30) 55%, rgba(15, 42, 23, 0.15) 100%);
}

@media (max-width: 991px) {
    .page-header .container h1 { font-size: 42px; }
}

@media (max-width: 575px) {
    .page-header .container h1 { font-size: 32px; }
}

/* --- Interior page header --- */
.page-header { position: relative; }
.page-header__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-header .thm-breadcrumb li { color: #ffffff; }
.page-header .thm-breadcrumb li a { color: var(--dehands-green); }
.page-header h2, .page-header h1 { color: #ffffff; }

/* --- Icons --- */
.dehands-icon { display: inline-flex; align-items: center; justify-content: center; }
.dehands-icon svg { width: 1em; height: 1em; }
.service-icon svg, .service-one__card .service-icon svg { width: 46px; height: 46px; }

/* --- Industry / sector presentation --------------------------------------- */
.dehands-sublist { list-style: none; margin: 12px 0 0; padding: 0; }
.dehands-sublist li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--dehands-ink); }
.dehands-sublist li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--dehands-green);
}
.service-one__card .dehands-sublist { text-align: left; margin-top: 18px; }
.service-one__card h3 { font-size: 20px; }

/* --- Contact form (managed by Richway CMS) -------------------------------- */
.dehands-form-panel {
    background-color: #ffffff;
    border: 1px solid rgba(22, 53, 31, 0.12);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(15, 42, 23, 0.08);
}
.dehands-form-panel h3 { margin-bottom: 6px; }
.dehands-form-panel > p { margin-bottom: 24px; }
.dehands-field { margin-bottom: 20px; }
.dehands-field label { display: block; font-weight: 600; color: var(--dehands-green-dark); margin-bottom: 8px; }
.dehands-field label span { color: #b3261e; }
.dehands-field input,
.dehands-field select,
.dehands-field textarea {
    width: 100%;
    border: 1px solid rgba(35, 57, 61, 0.22);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--dehands-ink);
    background-color: #ffffff;
}
.dehands-field input:focus,
.dehands-field select:focus,
.dehands-field textarea:focus { outline: 2px solid var(--dehands-green); outline-offset: 1px; border-color: var(--dehands-green-dark); }
.dehands-field--full { grid-column: 1 / -1; }
.dehands-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 767px) { .dehands-form-grid { grid-template-columns: 1fr; } }
.dehands-form-panel .honey { position: absolute; left: -9999px; }

/* --- Verification panel --------------------------------------------------- */
.verification-panel {
    border: 1px dashed rgba(22, 53, 31, 0.35);
    border-radius: 8px;
    padding: 24px;
    margin: 8px 0 24px;
    background-color: #f7fbf2;
}
.verification-panel strong { display: flex; align-items: center; gap: 10px; color: var(--dehands-green-dark); }
.verification-panel .verification-status { margin: 10px 0 0; font-size: 14px; }
.verification-panel [data-turnstile-widget] { margin-top: 12px; }

/* --- Notices -------------------------------------------------------------- */
.dehands-notice { border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; border-left: 5px solid; }
.dehands-notice--success { background-color: #f1f9e7; border-color: var(--dehands-green); color: var(--dehands-green-dark); }
.dehands-notice--error { background-color: #fdecea; border-color: #b3261e; color: #7a1a14; }

/* --- Utility pages -------------------------------------------------------- */
.dehands-centered { text-align: center; max-width: 720px; margin: 0 auto; }
.dehands-centered .thm-btn { margin-top: 24px; }

/* --- Shared-class fallbacks so CMS-authored sections still look right ----- */
.prose h2, .prose h3 { color: var(--dehands-green-dark); }
.prose a { color: var(--dehands-green-dark); text-decoration: underline; }
.button-green, .button.button-green {
    display: inline-block;
    background-color: var(--dehands-green);
    color: var(--dehands-green-dark) !important;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
}
.builder-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.builder-card-grid article { background: #ffffff; border: 1px solid rgba(22, 53, 31, 0.12); border-radius: 10px; padding: 28px; }
.builder-images img { max-width: 100%; height: auto; border-radius: 10px; }
.builder-map { width: 100%; min-height: 380px; border: 0; border-radius: 10px; }
.page-builder-section { padding: 60px 0; }

/* --- Accessibility -------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dehands-green-dark);
    color: #ffffff;
    padding: 12px 20px;
    z-index: 9999;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--dehands-green-dark);
    outline-offset: 2px;
}