/* ---------------------------------------------------------------
   Cornerstone Software Solutions - site-specific overrides
   Layered on top of the Megabiz Blue theme. Keep this file small;
   everything else comes from the theme's own stylesheets.
------------------------------------------------------------------ */

/* Logo: recolored to the site's blue palette, background matched to
   the header so it sits cleanly with no frame. */

/* Kill the theme's decorative "A multidisciplinary company." doodle
   graphic that sits next to the logo. */
#header .logo-info {
    display: none;
}

/* Bigger logo (285x90, same aspect ratio as before) without growing
   the white header bar: shave the same amount off the header's top
   padding and the dark menu bar's top margin that the logo gained in
   height, so the header's overall height stays exactly what it was
   at the old 190x60 logo size. */
#header {
    padding-top: 7px;
    background-image: none;
    background-color: #071126;
}

.menu-wrapper {
    margin-top: 0;
}

/* Drop the theme's curved drop-shadow/wave graphic that sits right
   below the gray page-title bar (above the two-column body content). */
#content-top {
    background-image: none;
    padding-bottom: 0;
}

/* Add a thin blue accent line under the gray page-title bar, matching
   the one already under the header/dark menu bar above it. */
#content-top-inner {
    border-bottom: 1.5px solid #509fb9;
}

/* ---------------- Full-width dark menu bar ----------------
   The theme paints the dark nav background directly on
   .menu-wrapper, which lives inside .container and so is capped
   at the page's content width. To stretch the bar edge-to-edge
   while leaving the actual nav links/phone/email exactly where
   they already sit, move the background onto a full-viewport
   ::before layer positioned behind the real menu content instead
   of widening .menu-wrapper itself. */
.menu-wrapper {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.menu-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    width: auto;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #2f2f2f;
    background: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#2f2f2f));
    background: -moz-linear-gradient(top, #494949, #2f2f2f);
    background: -o-linear-gradient(top, #494949, #2f2f2f);
    background: linear-gradient(to bottom, #494949, #2f2f2f);
    border-top: 1px solid #1b1b1b;
    box-shadow: 0 0 .7px 0 rgba(255,255,255,.5) inset;
    z-index: 0;
}
.menu-wrapper #smoothmenu,
.menu-wrapper > .inline-right {
    position: relative;
    z-index: 1;
}

/* ---------------- Homepage video / hero section ---------------- */
.video-hero {
    position: relative;
    background: #14324d url('../img/brand/video-placeholder.jpg') center/cover no-repeat;
    color: #fff;
    padding: 90px 0 80px;
    text-align: center;
}
.video-hero .video-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}
.video-hero h1 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 15px;
}
.video-hero p.text-big {
    color: #e6eef5;
}
.video-placeholder-badge {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 26px;
    border: 2px dashed rgba(255,255,255,0.6);
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,0.25);
}
.video-hero video {
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

/* ---------------- Testimonials ---------------- */
.testimonial-card {
    background: #f5f7f9;
    border-left: 4px solid #2f6fa7;
    padding: 20px 22px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.testimonial-card p.quote {
    font-style: italic;
    margin-bottom: 10px;
}
.testimonial-card .attribution {
    font-weight: 600;
    color: #2f6fa7;
}
.testimonial-card .attribution span {
    display: block;
    font-weight: 400;
    color: #777;
    font-size: 12px;
}

/* ---------------- Team ---------------- */
.team-member {
    text-align: center;
    margin-bottom: 30px;
}
.team-member img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.team-member h4 {
    margin-bottom: 2px;
}
.team-member .role {
    color: #2f6fa7;
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
}
.team-member a {
    font-size: 12px;
}

/* ---------------- Service tiles on Services overview ---------------- */
.service-tile {
    display: block;
    padding: 26px 20px;
    background: #f5f7f9;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    transition: box-shadow .2s ease, transform .2s ease;
}
.service-tile:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.service-tile h4 {
    margin: 10px 0 6px;
}
.service-tile p {
    font-size: 13px;
    color: #666;
    margin-bottom: 0;
}

/* ---------------- How-To / article listing ---------------- */
.article-list li {
    padding: 10px 0;
    border-bottom: 1px solid #e6e6e6;
}
.article-list li:last-child {
    border-bottom: none;
}
.article-list .article-desc {
    color: #777;
    font-size: 13px;
}

/* ---------------- Legacy how-to article tables (image + caption layout) ---------------- */
.article-body table {
    width: 100%;
    margin-bottom: 16px;
    border-collapse: collapse;
}
.article-body table td, .article-body table th {
    vertical-align: top;
    padding: 6px 10px 6px 0;
    text-align: left;
}
.article-body table.data-table td, .article-body table.data-table th {
    border: 1px solid #e2e2e2;
    padding: 8px 10px;
}

/* ---------------- How-to screenshots embedded in article bodies ---------------- */
img.img-howto {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px 0;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 4px;
    background: #fff;
}

/* ---------------- EZ Scheduler page: CTA row + video placeholder ---------------- */
.ez-cta-row { margin: 20px 0 26px; }
.ez-cta-row .mybtn { margin-right: 12px; margin-bottom: 10px; }
.ez-cta-row .mybtn-line {
    background: transparent;
    border: 2px solid #2f6fa7;
    color: #2f6fa7 !important;
}
.ez-cta-row .mybtn-line:hover {
    background: #2f6fa7;
    color: #fff !important;
}
.ez-video-frame {
    position: relative;
    background: #14324d;
    background: linear-gradient(160deg, #14324d 0%, #1c3f5e 100%);
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 26px rgba(20,50,77,.25);
}
.ez-video-frame .play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    padding-left: 4px;
}
.ez-video-frame .video-caption {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,.6);
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* ---------------- Misc content pages ---------------- */
.cta-strip {
    background: #2f6fa7;
    color: #fff;
    padding: 40px 0;
    text-align: center;
}
.cta-strip h2, .cta-strip h2 span {
    color: #fff;
}
.cta-strip .mybtn {
    background: transparent;
    border: 2px solid #fff;
}
.cta-strip .mybtn:hover {
    background: #fff;
    color: #2f6fa7 !important;
}