/* Site footer (layouts/footer.blade.php) — navy, with a brand + quick-links band, four link columns + contact,
   and a legal strip. Everything is scoped to .cn-ft so the old footer rules in style.css can't reach it.
   Loaded from layouts/app.blade.php after header-modern.css. */

.cn-ft {
    --ft-bg: #0b1f3f;
    --ft-bg-2: #0e2a52;
    --ft-line: rgba(255, 255, 255, .1);
    --ft-text: #c3cfdf;
    --ft-head: #ffffff;
    --ft-accent: #f07f22;
    background: linear-gradient(180deg, var(--ft-bg-2) 0, var(--ft-bg) 100%) !important;
    padding: 0 !important;
    color: var(--ft-text);
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
    position: relative;
}
.cn-ft::before {   /* faint dot texture */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px) 0 0 / 20px 20px;
}
.cn-ft > * { position: relative; }
.cn-ft ul { list-style: none; margin: 0; padding: 0; }
.cn-ft a { color: inherit; text-decoration: none; transition: color .25s ease; }
.cn-ft a:hover, .cn-ft a:focus { color: var(--ft-accent); text-decoration: none; }

/* brand + quick links */
.cn-ft__top { border-bottom: 1px solid var(--ft-line); }
.cn-ft__top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.cn-ft__brand { display: block; }
.cn-ft__brand img { width: 210px; height: auto; display: block; }   /* the logo carries the tagline */
.cn-ft__quick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cn-ft__quick a {
    display: inline-block; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .02em;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.cn-ft__quick a:hover { background: var(--ft-accent); border-color: var(--ft-accent); color: #fff; }

/* link columns + contact */
.cn-ft__main { display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.cn-ft__h, .cn-ft__title {
    display: block; width: 100%; margin: 0 0 18px; padding: 0 0 10px; background: none; border: 0; text-align: left;
    font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ft-head);
    position: relative; cursor: default;
}
.cn-ft__h::after, .cn-ft__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--ft-accent); }
.cn-ft__links li { margin: 0 0 10px; }
.cn-ft__links a { display: inline-block; font-size: 14px; line-height: 1.4; transition: color .25s ease, transform .25s ease; }
.cn-ft__links a:hover { transform: translateX(4px); }

.cn-ft__info li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.cn-ft__info i { flex: 0 0 18px; margin-top: 2px; text-align: center; font-size: 16px; color: var(--ft-accent); }
.cn-ft__info a { overflow-wrap: anywhere; }
.cn-ft__info a[href^="tel:"] { white-space: nowrap; }   /* a phone number never splits across lines */
.cn-ft__social { display: flex; gap: 10px; margin-top: 18px !important; }
.cn-ft__social a {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px;
    transition: background-color .25s ease, transform .25s ease, color .25s ease;
}
.cn-ft__social a:hover { background: var(--ft-accent); color: #fff; transform: translateY(-3px); }

/* legal strip */
.cn-ft__bottom { background: rgba(0, 0, 0, .22); border-top: 1px solid var(--ft-line); }
.cn-ft__bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.cn-ft__copy { margin: 0 0 4px; font-size: 13.5px; color: #e4ebf5; }
.cn-ft__note { margin: 0; max-width: 620px; font-size: 11px; line-height: 1.5; color: #8496b0; }
.cn-ft__legal { display: flex; flex-wrap: wrap; gap: 6px 0; justify-content: flex-end; white-space: nowrap; }
.cn-ft__legal li { font-size: 13px; }
.cn-ft__legal li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 12px; vertical-align: -1px; background: rgba(255, 255, 255, .25); }

/* tablets: links in two rows, contact full width */
@media (max-width: 991px) {
    .cn-ft__main { grid-template-columns: repeat(2, 1fr); }
    .cn-ft__contact { grid-column: 1 / -1; }
}

/* tablets and laptops: the four link columns stay in one row (contact below, in two columns), the legal links stay on
   one line, and the bottom strip leaves room for the fixed Back to Top / Prev Page buttons, which otherwise sat on the
   copyright and "Privacy Policy" on screens narrower than ~1280px. Phones (below 768px) are handled in the next block. */
@media (min-width: 768px) {
    .cn-ft__legal { flex-wrap: nowrap; flex-shrink: 0; }
    .cn-ft__bottom-in > div:first-child { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .cn-ft__bottom-in { padding-bottom: 76px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .cn-ft__main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .cn-ft__contact { grid-column: 1 / -1; }
    .cn-ft__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
    .cn-ft__bottom-in { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cn-ft__legal { justify-content: flex-start; }
}

/* phones: stacked; each link column folds open from its heading */
@media (max-width: 767px) {
    .cn-ft .container { padding-left: 20px !important; padding-right: 20px !important; width: 100%; max-width: 100%; }
    .cn-ft__top-in { flex-direction: column; align-items: flex-start; padding-top: 24px; padding-bottom: 22px; }
    .cn-ft__quick { justify-content: flex-start; gap: 8px; }
    .cn-ft__quick a { padding: 7px 13px; font-size: 12.5px; }
    .cn-ft__main { grid-template-columns: 1fr; gap: 0; padding-top: 10px; padding-bottom: 24px; }
    .cn-ft__col { border-bottom: 1px solid var(--ft-line); }
    .cn-ft__h { margin: 0; padding: 16px 0; cursor: pointer; font-size: 14px; }
    .cn-ft__h::after { display: none; }
    .cn-ft__h::before {   /* chevron, turns when open */
        content: "\f054"; font-family: FontAwesome; position: absolute; right: 2px; top: 50%; margin-top: -9px;
        font-size: 12px; color: var(--ft-accent); transition: transform .25s ease;
    }
    .cn-ft__col.is-open .cn-ft__h::before { transform: rotate(90deg); }
    .cn-ft__links { display: none; padding: 0 0 12px; }
    .cn-ft__col.is-open .cn-ft__links { display: block; }
    .cn-ft__contact { padding-top: 24px; }
    .cn-ft__bottom-in { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 80px; }   /* room for the float buttons */
    .cn-ft__legal { justify-content: flex-start; }
}