/*
 * Agilissimo - Custom Styles
 * Last updated: 2026
 */

/* =============================================
   COLOR PALETTE
   Steel Blue  : #36648B  (primary — all sections)
   White       : #ffffff
   Dark Grey   : #252525
   ============================================= */

/* =============================================
   LOGO
   Rendered white via CSS filter with a dark-grey
   emboss drop-shadow. Width set to 325px (25%
   larger than previous 260px). Scales to 200px
   on mobile.
   ============================================= */
#awd-site-logo h1 {
    line-height: 1;
    margin-bottom: 0;
}

#awd-site-logo h1 > a > img {
    width: 325px;
    height: auto;
    /* Pure white rendering + dark-grey emboss line */
    -webkit-filter: brightness(0) invert(1) drop-shadow(0px 2px 0px rgba(30,30,30,0.55)) drop-shadow(0px 4px 10px rgba(0,0,0,0.30));
    filter: brightness(0) invert(1)
            drop-shadow(0px 2px 0px rgba(30,30,30,0.55))
            drop-shadow(0px 4px 10px rgba(0,0,0,0.30));
    -webkit-transition: filter 0.25s ease, -webkit-transform 0.25s ease;
    transition: filter 0.25s ease, transform 0.25s ease;
    display: block;
}

#awd-site-logo h1 > a > img:hover {
    -webkit-filter: brightness(0) invert(1) drop-shadow(0px 3px 0px rgba(30,30,30,0.7)) drop-shadow(0px 6px 16px rgba(0,0,0,0.35));
    filter: brightness(0) invert(1)
            drop-shadow(0px 3px 0px rgba(30,30,30,0.7))
            drop-shadow(0px 6px 16px rgba(0,0,0,0.35));
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* =============================================
   ALL SECTIONS — uniform steel blue background
   Only sections actually used in the HTML are
   defined here: home, services, contact, about.
   (bg-subscribe and bg-products removed — not
   present in the page overlay.)
   ============================================= */

/* Home */
.bg-home,
.bg-home nav::before {
    background-color: #36648B;
    color: #ffffff;
}
.bg-home *:not(i):not(nav)::after,
.bg-home *:not(i):not(nav)::before,
.bg-home .btn:hover,
.bg-home .btn-inverse {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #36648B;
}

/* Services */
.bg-services,
.bg-services nav::before {
    background-color: #36648B;
    color: #ffffff;
}
.bg-services *:not(i):not(nav)::after,
.bg-services *:not(i):not(nav)::before {
    background-color: #ffffff;
}

/* About (kept in overlay for transition animation) */
.bg-about,
.bg-about nav::before {
    background-color: #36648B;
    color: #ffffff;
}
.bg-about *:not(i):not(nav)::after,
.bg-about *:not(i):not(nav)::before {
    background-color: #ffffff;
}

/* AI Services (products slide) */
.bg-products,
.bg-products nav::before {
    background-color: #36648B;
    color: #ffffff;
}
.bg-products *:not(i):not(nav)::after,
.bg-products *:not(i):not(nav)::before {
    background-color: #ffffff;
}

/* Contact */
.bg-contact,
.bg-contact nav::before {
    background-color: #36648B;
    color: #ffffff;
}
.bg-contact *:not(i):not(nav)::after,
.bg-contact *:not(i):not(nav)::before,
.bg-contact .btn:hover,
.bg-contact .btn-inverse {
    border-color: #ffffff;
    background-color: #ffffff;
    color: #36648B;
}
.bg-contact input,
.bg-contact textarea {
    border-color: rgba(255,255,255,0.6);
    color: #252525;
}

/* =============================================
   CONTACT INFO — clickable phone and email links
   ============================================= */
.contact-info a {
    color: inherit;
    text-decoration: none;
}
.contact-info a:hover,
.contact-info a:focus {
    text-decoration: underline;
    opacity: 0.85;
}

/* =============================================
   CONTENT LISTS
   Restore bullets overridden by the template reset
   ============================================= */
.slide-content ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.slide-content ul li {
    margin-bottom: 0.4em;
    line-height: 1.5;
}

/* =============================================
   AI SERVICES — offering cards
   ============================================= */
.ai-offering {
    border-left: 3px solid rgba(255,255,255,0.4);
    padding-left: 16px;
    margin-bottom: 28px;
}
.ai-offering h3 {
    margin-bottom: 6px;
    font-size: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.95;
}
.ai-offering p {
    font-size: 0.85em;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 0;
}

/* =============================================
   HOME SECTION — centred layout now that the
   countdown column is removed
   ============================================= */
.slide-item[data-slide-id="home"] .section-info {
    text-align: center;
}

/* =============================================
   MOBILE IMPROVEMENTS
   ============================================= */
@media (max-width: 767px) {
    .contact-form input,
    .contact-form textarea {
        width: 100%;
        margin-bottom: 10px;
    }
    .section-info {
        padding: 10px;
    }
    #awd-site-footer {
        -webkit-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
    /* Logo scales down gracefully on small screens */
    #awd-site-logo h1 > a > img {
        width: 200px;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 991px) {
    #awd-site-nav ul li a {
        padding: 12px 16px;
        display: block;
        min-height: 44px;
        line-height: 20px;
    }
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

/* Visually hidden — used for form labels */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus ring — visible on all interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(255,255,255,0.8);
    outline-offset: 2px;
}

/* Respect user OS reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .animated,
    .awd-site-bg,
    #awd-site-wrap.bg {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
}