/* Services Page Styling */
.services-intro {
    margin-bottom: 3rem;
}

.services-intro h1 {
    margin-bottom: 1rem;
}

.services-intro .lead {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.services-intro .content {
    margin-top: 2rem;
}

.services-list {
    margin-top: 3rem;
}

.services-list h2 {
    margin-bottom: 2rem;
    text-align: center;
}

.service-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.service-card h3 {
    margin-bottom: 1rem;
}

.service-card h3 a {
    color: #333;
    text-decoration: none;
}

.service-card h3 a:hover {
    color: #007bff;
}

.service-card p {
    color: #666;
    margin-bottom: 1.5rem;
}

.service-card .btn {
    margin-top: auto;
}

/* Skip navigation link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #267F7F;
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-weight: bold;
}
.skip-link:focus {
    top: 0;
}
/* FAQ Accordion */
details {
    border-bottom: 1px solid #CCCCCC;
    padding: 0.75rem 0;
    margin-bottom: 0.25rem;
}
details summary {
    font-weight: bold;
    cursor: pointer;
    color: #1A5353;
    font-size: 16px;
    padding: 0.25rem 0;
    list-style: none;
}
details summary::-webkit-details-marker {
    display: none;
}
details summary::before {
    content: '+ ';
    color: #267F7F;
    font-weight: bold;
}
details[open] summary::before {
    content: '— ';
    color: #267F7F;
}
details[open] {
    padding-bottom: 1rem;
}
details p {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* How It Works section */
.how-it-works-step {
    padding: 2rem 1.5rem;
}
.how-it-works-step i {
    margin-bottom: 1.25rem;
    display: block;
}
.how-it-works-step h3 {
    color: #1A5353;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.how-it-works-step p {
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Replace dated pentagon texture background with brand-approved gradient */
.bar.background-pentagon {
    background: linear-gradient(to right, #00969B, #75C1BD, #FFFFFF) !important;
    border-top: solid 1px #75C1BD !important;
    border-bottom: solid 1px #CCCCCC !important;
}
.bar.background-pentagon h2,
.bar.background-pentagon h3 {
    color: #FFFFFF !important;
}

/* Replace pentagon texture on inner page header band */
#heading-breadcrumbs {
    background: #00969B !important;
    background-image: none !important;
    border-top: solid 1px #75C1BD !important;
    border-bottom: solid 1px #CCCCCC !important;
    padding: 2px 0 !important;
    margin-bottom: 20px !important;
}
#heading-breadcrumbs h1,
#heading-breadcrumbs h2,
#heading-breadcrumbs h3 {
    color: #FFFFFF !important;
}

/* Replace retired theme accent color #38A7BB with Brand Teal #00969B sitewide */
a,
a:hover,
a:focus {
    color: #00969B;
}
.navbar-toggle,
.navbar-toggle i {
    color: #00969B;
}
.btn-template-main,
.btn-template-main:hover,
.btn-template-main:focus {
    color: #00969B;
}
/* Topbar icons — white on dark background (#555555) for visibility */
#top i,
#top a,
#top a i,
#top p {
    color: #FFFFFF !important;
}
.btn-template-main {
    border-color: #00969B !important;
}
.navbar .active > a,
.navbar .active > a:hover,
.navbar .active > a:focus {
    background-color: #00969B !important;
    color: #FFFFFF !important;
}

/* ── Hero Section ────────────────────────────────────────────── */
#dle-hero {
    background-color: #267F7F;
    padding: 4rem 0 3rem;
}
.dle-hero-row {
    display: flex;
    align-items: center;
}
.dle-hero-text {
    padding-right: 2rem;
}
.dle-hero-h1 {
    font-size: 36px;
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: 1.25rem;
    text-transform: none;
}
.dle-hero-subhead {
    font-size: 1.5rem;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.dle-hero-btn {
    background-color: #00969B;
    color: #ffffff !important;
    border: none;
    padding: 0.85rem 2rem;
    font-size: 16px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1.25rem;
}
.dle-hero-btn:hover,
.dle-hero-btn:focus {
    background-color: #007a7e;
    color: #ffffff !important;
}
.dle-hero-trust {
    font-size: 13px;
    color: #777777;
    margin-top: 0.5rem;
    font-style: italic;
}
.dle-hero-img-wrap {
    text-align: center;
}
.dle-hero-img {
    max-width: 100%;
    width: 220px;
    height: 220px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 6px;
    display: inline-block;
}
/* Mobile: stack image above text */
@media (max-width: 767px) {
    .dle-hero-row {
        flex-direction: column;
    }
    .dle-hero-img-wrap {
        margin-bottom: 2rem;
        width: 100%;
    }
    .dle-hero-img {
        max-height: 320px;
        width: auto;
    }
    .dle-hero-text {
        padding-right: 0;
        width: 100%;
    }
    .dle-hero-h1 {
        font-size: 26px;
    }
}

/* Hero image square crop override */
.dle-hero-img-square {
    width: 320px;
    height: 320px;
    overflow: hidden;
    border-radius: 6px;
    display: inline-block;
    margin: 0 auto;
}
.dle-hero-img-square .dle-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

/* ── About Page Photo ─────────────────────────────────────────── */
.about-photo-wrap {
    float: right;
    margin: 0 0 1.5rem 2rem;
    width: 259px;
}
.about-photo-circle {
    width: 259px;
    height: 259px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
.about-photo-img {
    max-width: none;
    position: absolute;
    width: 260px;
    height: auto;
    top: -80px;
    left: -1px;
    object-fit: cover;
}

/* ── About Page Pull Quote ───────────────────────────────────── */
.about-pullquote {
    border-left: 4px solid #00969B;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background-color: #f5fbfb;
}
.about-pullquote p {
    font-size: 1.15rem;
    color: #1A5353;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

/* ── Tech Stack Callout ──────────────────────────────────────── */
.tech-callout {
    border: 1px solid #75C1BD;
    border-left: 4px solid #00969B;
    background-color: #f5fbfb;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}
.tech-callout p {
    margin: 0;
    color: #1A5353;
    font-size: 16px;
    line-height: 1.6;
}


/* Get-started and thank-you page header — solid deep teal, mixed case */
.get-started-header #heading-breadcrumbs {
    background: #00969B !important;
    background-image: none !important;
}
.get-started-header #heading-breadcrumbs h1 {
    text-transform: none;
    color: #FFFFFF;
}

/* Site-wide page header title — reduced size and mixed case */
#heading-breadcrumbs h1 {
    font-size: 24px !important;
    text-transform: none !important;
}
/* ================================================================
   WCAG AA contrast remediation -- locked Production Color Palette
   Brand Teal #00969B = large text / backgrounds only.
   Deep Teal #1A5353 = readable teal text. Slate #666666 = secondary
   gray text. #555555 is retired -> Slate #666666 / Charcoal #2D2D2D.
   ================================================================ */

/* Hero CTA: white text needs a dark fill, not Brand Teal (was 3.59:1) */
.dle-hero-btn { background-color: #1A5353; }
.dle-hero-btn:hover,
.dle-hero-btn:focus { background-color: #14403F; color: #FFFFFF !important; }

/* Sitewide teal links/text on light -> Deep Teal (was 3.59:1) */
a,
a:hover,
a:focus { color: #1A5353; }
.btn-template-main,
.btn-template-main:hover,
.btn-template-main:focus { color: #1A5353; border-color: #1A5353 !important; }

/* Hero trust line: white on teal background */
.dle-hero-trust { color: #FFFFFF; }

/* Theme gray body/secondary text on white #999 -> Slate (was 2.84:1) */
.box-simple p,
.box-image-text .content p,
.box-image-text .content .author-category a,
blockquote footer,
blockquote small,
blockquote .small { color: #666666; }

/* Footer: retired #555 surface -> Slate, light text/links (was 2.61 / 2.07:1) */
#footer { background: #666666; }
#footer,
#footer p,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .blog-entries .item .text { color: #E8F4F4 !important; }
#footer a { color: #E8F4F4 !important; }
#footer a:hover { color: #FFFFFF !important; }
#footer .btn-template-main { color: #FFFFFF !important; border-color: #FFFFFF !important; }
#footer .btn-template-main:hover { background: #FFFFFF !important; color: #1A5353 !important; }
#copyright { background: #2D2D2D; }
#copyright,
#copyright p,
#copyright a { color: #E8F4F4 !important; }

/* Contrast mop-up: theme selectors outranked the earlier overrides, leaving
   author-category and testimonial text at #999 on white. Higher specificity. */
.box-image-text .content p.author-category,
.box-image-text .content p.author-category a { color: #666666; }
.testimonials .item .testimonial .text,
.testimonials .item .testimonial .text p,
.testimonials .item .testimonial .name-picture p { color: #666666; }

/* DLE: visually-hidden utility for a11y heading outline (heading-order) */
.dle-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* DLE heading-order: demoted headings hold their original appearance */
/* testimonial author (was h5); also beats .bar.background-pentagon h3 white !important */
.testimonials .item .testimonial .name-picture h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #333333 !important;
}
/* blog card title (was h4) */
.box-image-text.blog .content h3 {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* ================================================================
   Typography standard compliance - sentence case site-wide
   Brand -> Typography: "Avoid ALL CAPS except small labels"
   Removes theme text-transform: uppercase on headings, nav, footer,
   blog, section/box titles, buttons. Genuine small labels
   (testimonial author name ~line 430, .label badges) keep uppercase
   per the standard's small-label carve-out.
   ================================================================ */
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5,
.navbar ul.nav > li > a,
.navbar ul.dropdown-menu li,
.panel.sidebar-menu .panel-heading,
.panel-heading,
.btn,
.box-simple h3,
.box-image .name h3,
.box-image-text .top .name h3,
.box-image-text .content h3, .box-image-text .content h4,
.box .box-header,
.packages .package .package-header h5,
.packages .best-value .package .package-header h5,
#get-it h1, #get-it h2, #get-it h3, #get-it h4, #get-it h5, #get-it h6,
#blog-listing-big .post h2, #blog-homepage .post h2,
#blog-listing-big .post h4, #blog-homepage .post h4,
#blog-listing-medium .post h2,
#blog-listing-big .post .author-category, #blog-homepage .post .author-category,
#blog-listing-medium .post .author-category,
.box-image-text.blog .author-category,
#footer h4,
#footer .blog-entries .item .name h5,
.breadcrumb,
.pager {
    text-transform: none !important;
}

/* Footer recent-posts titles: regular weight (was bold) */
#footer .blog-entries .item .name h5 {
    font-weight: 400 !important;
}

/* Testimonial card: flexbox pin — equal-height cards, attribution anchored to bottom */
.testimonials .item {
    overflow: visible !important;
}
.testimonials .item .testimonial {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.testimonials .item .testimonial .text {
    flex: 1 !important;
}
.testimonials .item .testimonial .bottom {
    position: relative !important;
    height: auto !important;
    margin-top: 1rem;
}

/* Feature cards: outcome as H3, lockup as muted paragraph */
.box-simple h3.feature-outcome {
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.box-simple .feature-lockup {
    font-size: 1.15rem;
    color: #666666;
    font-weight: 400;
    margin: 0 0 0.75rem;
}
.box-simple p:not(.feature-lockup) {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Pricing page: outcome lines as H2 — unbold, normal weight */
body.pricing h2 {
    font-weight: 400;
    font-size: 2.2rem;
}

/* Pricing page: lockup H3 — smaller to fit one line and reinforce hierarchy */
body.pricing h3 {
    font-size: 1.5rem;
}

/* ── Tap target fixes (Lighthouse) ───────────────────────────── */
/* Expand social icon touch targets to 48x48px min */
#top .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
}
/* Hide redundant phone/email text links on mobile (duplicated in social icon row) */
#top .hidden-md {
    display: none;
}