@charset "utf-8";
/* Responsive layer for the DeBlasio & Associates frontend.

   styles.css is the reference site's stylesheet, copied verbatim. The
   reference itself is desktop-only (viewport width=1620), so everything
   here either reproduces its desktop look or adapts it for smaller
   screens. At 1360px and wider, the page renders exactly like the reference.

   Breakpoints:
     1200-1359  header nav scales down so it stays on one line
     <=1199     header switches to logo + menu button
     <=1024     card grids go 2-up, fixed-width footer tables go fluid
     <=900      side-by-side photo/text blocks stack
     <=767      phone layout: forms, footer and services stack
     <=600      card grids go 1-up

   The da-* class hooks live in the CP-managed header, footer and page
   content (tbl_websitecontent, pages, tbl_custompages). Keep them when
   editing that content in the CP. */

/* ---- Header ------------------------------------------------------------ */
.da-dropdown { position: relative; }
.da-dropdown-toggle img { vertical-align: baseline; }
.da-dropdown-menu a { display: block; white-space: nowrap; }

/* Mobile header icons: tap-to-call and the menu button, the same call.png /
   menu.png images and navy recolour filter as anchorinsuranceagency.com.
   Hidden on desktop, where the full nav shows. */
.da-mobile-actions { display: none; align-items: center; }
.da-mobile-phone { display: block; }
.site-header-toggle {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.da-mobile-icon {
    display: block;
    width: auto;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(9%) sepia(28%) saturate(1445%) hue-rotate(184deg) brightness(88%) contrast(102%);
}

@media screen and (min-width: 1200px) {
    /* The reference's ENGINEERING and SERVICES items carry a dropdown arrow;
       their sub-pages are the ones listed under each heading in the footer. */
    .da-dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: -20px;
        z-index: 50;
        min-width: 250px;
        padding: 10px 0;
        background: #FFFFFF;
        box-shadow: 0 6px 16px rgba(46, 46, 69, 0.15);
        text-align: left;
        line-height: normal;
    }
    .da-dropdown-menu a { padding: 9px 20px; font-size: 17px; }
    .da-dropdown:hover .da-dropdown-menu,
    .da-dropdown:focus-within .da-dropdown-menu { display: block; }
}

@media screen and (min-width: 1200px) and (max-width: 1359px) {
    /* At 18px the nav needs ~1350px. Scale it (and its &nbsp; gaps) with the
       viewport so it never wraps. */
    .da-header .da-nav { font-size: calc(1.6vw - 4.5px); }
}

@media screen and (max-width: 1199px) {
    .da-header,
    .da-header > tbody { display: block; width: 100%; }
    .da-header .da-header-spacer td { display: block; }
    .da-header .da-header-spacer img { height: 15px; }
    .da-header .da-header-row { display: flex; flex-wrap: wrap; }

    .da-header .da-logo {
        order: -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .da-mobile-actions { display: flex; }

    .da-header .da-nav {
        display: none;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        font-size: 0; /* hides the &nbsp; spacing between the desktop links */
        text-align: left;
    }
    .da-header.is-open .da-nav { display: block; }
    .da-header .da-nav-left { margin-top: 15px; }
    .da-header .da-nav a {
        display: block;
        padding: 12px 0;
        border-top: 1px solid #E5E5E6;
        font-size: 18px;
        line-height: 1.3;
    }
    .da-dropdown { display: block; }
    .da-dropdown-menu a { padding-left: 20px !important; font-size: 17px !important; }
}

@media screen and (max-width: 400px) {
    .da-header .da-logo > a > img { width: 190px; height: auto; }
    .da-mobile-icon { height: 54px; }
}

/* ---- Home hero (CP home slider) ---------------------------------------- */
/* The reference row is 620px tall with slide1.jpg (1920x621) centred at the
   top and unscaled. cover reproduces that up to 1920px wide, fills the row
   beyond it, and below 1240px the row shrinks with the viewport instead of
   showing an ever-narrower slice of the photo. */
.da-hero { padding: 0; }
.da-hero-slider { position: relative; width: 100%; overflow: hidden; }
.da-hero-track { display: flex; transition: transform 0.6s ease-in-out; }
.da-hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: min(620px, 50vw);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (min-width: 1240px) and (max-width: 1920px) {
    .da-hero-slide { background-size: auto; }
}
.da-hero-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.da-hero-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.5);
}
.da-hero-dot.is-active { background: #FFFFFF; }

/* ---- Blog posts (Projects / News / Experience) ------------------------- */
/* Card photos are CP uploads of any size, so they fill the 299px-tall card
   instead of showing an unscaled corner as the reference's fixed-size
   placeholders do. */
.da-card-photo { background-size: cover; background-position: center; }
.da-post-image { display: block; max-width: 100%; height: auto; }
.da-page img[src$="pagebreak.png"] { max-width: 100%; height: auto; }
.da-page img.da-fluid { max-width: 100%; height: auto; }
.da-page ul.da-cols { columns: 2; column-gap: 40px; }

/* Home intro: the 10-year anniversary logo in place of the old photo. */
.da-intro .da-intro-logo img { max-width: 100%; height: auto; }

/* ---- Contact form ------------------------------------------------------ */
/* The reference's SUBMIT is a link in a #2E2E45 cell; here it is a real
   submit button, styled to look the same. */
.da-submit {
    padding: 0;
    border: 0;
    background: none;
    color: #E0E0E0;
    font: inherit;
    cursor: pointer;
}
.da-submit:hover { color: #FFFFFF; }

/* ---- <=1024 ------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    /* Project / news / experience card grids: 4-up -> 2-up. */
    .da-cards,
    .da-cards > tbody { display: block; width: 100%; }
    .da-cards > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 25px;
        box-sizing: border-box;
    }
    .da-cards > tbody > tr > td { display: none; }
    .da-cards > tbody > tr > td.da-card {
        display: block;
        width: 48.5% !important;
        margin-bottom: 30px;
    }
    .da-card td[background] { background-size: cover; background-position: center; }

    .da-services,
    .da-footer-contact table,
    .da-footer-links table { width: 100% !important; }

    .da-page img[src$="pagebreak.png"],
    .da-home img[src$="pagebreak.png"] { max-width: 100%; height: auto; }
}

/* ---- <=900 -------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    /* Home intro: photo above text. */
    .da-intro,
    .da-intro > tbody,
    .da-intro > tbody > tr { display: block; width: 100% !important; }
    .da-intro > tbody > tr > td { display: block; width: auto !important; }
    .da-intro > tbody > tr > td[width="1%"] { display: none; }
    .da-intro .da-intro-photo {
        margin: 0 16px 10px;
        background-size: cover;
        background-position: center;
    }
    .da-intro .da-intro-photo img { width: 100%; height: auto; aspect-ratio: 747 / 497; }
    .da-intro .da-intro-text { padding: 0 16px; }
    .da-intro .da-intro-logo { padding: 0 16px 20px; }
    .da-page ul.da-cols { columns: 1; }

    /* About photo / text and the contact page's two office maps. */
    .da-split,
    .da-split > tbody,
    .da-split > tbody > tr { display: block; width: 100% !important; }
    .da-split > tbody > tr > td { display: block; width: auto !important; }
    .da-split > tbody > tr > td[width="1%"]:not(.da-split-photo),
    .da-split > tbody > tr > td[width="2%"] { display: none; }
    .da-split .da-split-photo {
        max-width: 431px;
        margin: 0 auto 30px;
        background-size: cover;
        background-position: center top;
    }
    .da-split .da-split-photo img { width: 100%; height: auto; aspect-ratio: 431 / 550; }
    .da-maps > tbody > tr > td { margin-bottom: 20px; }

    /* Services band: three columns -> one centred list. */
    .da-services,
    .da-services > tbody,
    .da-services > tbody > tr { display: block; }
    .da-services { max-width: 440px; margin: 0 auto; }
    .da-services > tbody > tr > td { display: block; width: auto !important; padding: 0 24px; }
    .da-services > tbody > tr > td[width="30"] { display: none; }
}

/* ---- <=767 -------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    h1 { font-size: 34px; }
    h1.lrgspacing, h1 { line-height: 44px; }
    h2 { font-size: 28px; line-height: 36px; }
    h3, h4 { font-size: 21px; line-height: 30px; }
    .medspacing { line-height: 32px; }

    .da-services .size24,
    .da-services.size24 { font-size: 21px; }
    .da-services-title { font-size: 20px; line-height: 30px; padding: 10px 16px; }
    .da-heading { font-size: 26px; line-height: 34px; padding: 0 16px; }
    .da-btns { width: 100% !important; max-width: 440px; }
    .da-page table[width="350"] { width: 100% !important; max-width: 350px; }
    .da-maps iframe { height: 400px; }

    /* Contact form fields stack. */
    .da-form { width: 100% !important; }
    .da-form > tbody > tr > td { display: block; width: auto !important; }
    .da-form input,
    .da-form textarea { width: 100% !important; box-sizing: border-box; }
    .da-form td[align="right"] input { margin-top: 20px; }

    /* Footer. */
    .da-footer-logo table { width: 100% !important; max-width: 512px; padding: 0 16px; box-sizing: border-box; }
    .da-footer-logo img { max-width: 100%; height: auto; }

    .da-footer-contact table,
    .da-footer-contact tbody { display: block; }
    .da-footer-contact-spacer td { display: block; }
    .da-footer-contact .da-footer-contact-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .da-footer-contact .da-footer-item {
        display: block;
        width: 100% !important;
        padding: 8px 16px;
        box-sizing: border-box;
        line-height: 1.4;
    }
    .da-footer-contact .da-footer-divider,
    .da-footer-contact .da-footer-gap { display: none; }
    .da-footer-contact .da-footer-social { display: block; width: auto !important; padding: 8px 8px 0; }
    .da-footer-contact .da-footer-social-gap { display: none; }

    .da-footer-links table,
    .da-footer-links tbody { display: block; }
    .da-footer-links-spacer td { display: block; }
    .da-footer-links .da-footer-links-row { display: flex; flex-wrap: wrap; padding: 0 16px; }
    .da-footer-links .da-footer-col-gap,
    .da-footer-links .da-footer-col-line { display: none; }
    .da-footer-links .da-footer-col {
        display: block;
        width: 50% !important;
        padding: 0 8px 20px;
        box-sizing: border-box;
    }
    .da-footer-copyright .copyright { padding: 0 16px; line-height: 1.5; }
}

/* ---- <=600 -------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .da-cards > tbody > tr { padding: 0 16px; }
    .da-cards > tbody > tr > td.da-card { width: 100% !important; }
    .da-heading img { display: none; }
}

@media screen and (max-width: 420px) {
    .da-footer-links .da-footer-col { width: 100% !important; }
}