/* =====================================================================
   TAPS CMS v0.3.1 — Header logo fit + dark corporate footer
   Loaded after taps.css so it only overrides the affected components.
   ===================================================================== */

/* Header logo
   The uploaded TAPS logo has an approximately 3:1 ratio. The shell below
   follows that ratio more closely, so the image fills the visible area
   without looking like a small black rectangle inside a wide empty box. */
.site-header .brand {
    width: 220px;
    height: 74px;
    flex: 0 0 220px;
    padding: 4px 6px;
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(3, 14, 29, .96), rgba(5, 24, 43, .88));
    border-color: rgba(86, 205, 255, .20);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 24px rgba(0, 188, 255, .06);
}

.site-header .brand::before {
    inset: -30% 6% auto -4%;
    height: 78%;
}

.site-header .brand img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .18));
}

/* Dark footer */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 34px 0 16px;
    color: #9fb1c5;
    border-top: 1px solid rgba(94, 205, 255, .14);
    background:
        radial-gradient(circle at 7% 4%, rgba(0, 183, 255, .13), transparent 29%),
        radial-gradient(circle at 92% 88%, rgba(0, 221, 197, .08), transparent 28%),
        linear-gradient(135deg, #020814 0%, #06172a 58%, #071d32 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.site-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background-image:
        linear-gradient(rgba(66, 174, 230, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 174, 230, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.site-footer .footer-grid {
    gap: 34px;
}

.site-footer .footer-brand img {
    width: 214px;
    height: 72px;
    padding: 5px 7px;
    object-fit: contain;
    object-position: center;
    margin: 0 0 12px;
    border-radius: 17px;
    background: rgba(2, 10, 23, .74);
    border: 1px solid rgba(102, 212, 255, .15);
    box-shadow: 0 13px 32px rgba(0, 0, 0, .26);
}

.site-footer .footer-brand p,
.site-footer .footer-newsletter p {
    color: #93a8bd;
}

.site-footer h4 {
    color: #f3f9ff;
    font-size: 10.5px;
    letter-spacing: .02em;
}

.site-footer a {
    color: #aebed0;
    transition: color .2s ease, transform .2s ease;
}

.site-footer a:hover {
    color: #43d8f4;
    transform: translateX(2px);
}

.site-footer .social-links a {
    color: #dff8ff;
    background: rgba(16, 57, 91, .82);
    border: 1px solid rgba(93, 210, 255, .14);
}

.site-footer .social-links a:hover {
    color: #03111f;
    background: #37d8f4;
    transform: translateY(-2px);
}

.site-footer .footer-newsletter form {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(137, 199, 230, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.site-footer .footer-newsletter input {
    color: #eaf8ff;
    background: transparent;
}

.site-footer .footer-newsletter input::placeholder {
    color: #71869a;
}

.site-footer .footer-newsletter button {
    background: linear-gradient(135deg, #087df2, #0abbdc);
    color: #fff;
}

.site-footer .footer-bottom {
    color: #71869a;
    border-top-color: rgba(141, 196, 226, .13);
}

@media (max-width: 1180px) {
    .site-header .brand {
        width: 204px;
        height: 68px;
        flex-basis: 204px;
    }
}

@media (max-width: 900px) {
    .site-header .brand {
        width: 188px;
        height: 62px;
        flex-basis: 188px;
        padding: 4px 5px;
        border-radius: 18px;
    }

    .site-header .brand img {
        border-radius: 13px;
        clip-path: inset(0 round 13px);
    }
}

@media (max-width: 640px) {
    .site-header .brand {
        width: 170px;
        height: 56px;
        flex-basis: 170px;
    }

    .site-footer {
        padding-top: 28px;
    }

    .site-footer .footer-brand img {
        width: 198px;
        height: 66px;
    }
}