/* ==========================================================================
   VMC Innovations theme layer
   Loaded after style.css/extra.css on every frontend + auth page.
   Scoped, additive polish on top of the CSS variables set in
   frontend/layouts/dynamic-style.blade.php — not a full template rewrite.
   Palette matches vmcinnovations.com's real brand colors.
   ========================================================================== */

:root {
    --vmc-navy: #16232D;
    --vmc-blue: #0079C2;
    --vmc-blue-deep: #013E81;
    --vmc-blue-mid: #0F5A9E;
    --vmc-surface: #F2F5F8;
}

/* Headings: tighter tracking, slightly bolder for a more editorial/edtech feel */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-heading {
    letter-spacing: -0.01em;
}

/* Buttons: soften the flat 4px corners, add a resting shadow so CTAs lift off the page */
.theme-btn,
.theme-button1,
.theme-button2,
.btn-orange,
.orange-theme-btn {
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(0, 121, 194, 0.18);
}

.btn-orange,
.orange-theme-btn {
    box-shadow: 0 6px 16px rgba(15, 90, 158, 0.25);
}

.theme-btn:hover,
.theme-button1:hover,
.theme-button2:hover {
    box-shadow: 0 8px 20px rgba(0, 121, 194, 0.26);
    transform: translateY(-1px);
}

/* The old "violet-transparent" pill button was hand-authored with a literal purple
   rgba rather than a CSS variable, so it survives the palette swap untouched.
   Re-tint it to the new accent here instead of hunting every usage in style.css. */
.btn-violet-transparent {
    background-color: rgba(0, 121, 194, 0.12) !important;
    border: 2px solid rgba(0, 121, 194, 0.12) !important;
    color: var(--theme-color) !important;
}
.btn-violet-transparent:hover {
    background-color: var(--white-color) !important;
}

/* Cards: soften shadows to a cooler navy tint and round corners slightly more */
.course-item,
.single-course,
.course-card,
.single-blog,
.blog-item,
.card {
    border-radius: 10px;
}

/* Form controls: match the new button radius language */
.form-control,
.form-select {
    border-radius: 8px;
}

/* Real VMC Innovations logo (navbar/footer): the vendor markup gives it a fixed
   height that assumed a wordmark image; the real logo is a wider/denser mark, so
   keep it readable at small nav heights. */
#mainNav .navbar-brand img,
.footer-widget.footer-about img {
    height: 42px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

/* Wordmark text beside the logo mark: ECAMPUS is the primary, visible mark
   (this app IS Ecampus); VMC INNOVATIONS reads as the smaller parent-brand line. */
.vmc-brand-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.05;
    white-space: nowrap;
}
.vmc-brand-ecampus {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-transform: uppercase;
}
.vmc-brand-parent {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #7FB8E0;
    text-transform: uppercase;
    margin-top: 2px;
}
@media (max-width: 575.98px) {
    .vmc-brand-title {
        display: none;
    }
}

/* Hero eyebrow label ("VMC Engineering Division"): this component was
   built for a row of short separate tag-words, each with a trailing
   bullet-dot separator and very wide per-letter spacing (0.89em, fine
   for "NEW" but not a 3-word phrase). Now that it's one combined
   label, drop the leftover dot and tighten the spacing/width so it
   reads as a single line instead of wrapping with a stray floating
   dot. */
.come-for-learn-text {
    letter-spacing: 0.25em;
    width: auto;
    max-width: 100%;
}
.come-for-learn-text span:after {
    display: none;
}

/* Hero heading: our real copy runs longer than the template's demo
   text, so make sure long words/lines wrap inside their own column
   instead of overflowing into the banner image next to it. */
.hero-heading {
    overflow-wrap: break-word;
}

/* Hero banner image: the source graphic is a wide diagram with a lot
   of light empty canvas around it. Instead of letting it stretch
   full-bleed with visible dead space, contain it in a bordered card
   sized to the image's own content so the padding reads as an
   intentional frame. Not cropped to a literal square - the diagram's
   labels sit close to its left/right edges and a hard crop would cut
   them off. */
.hero-image-frame {
    background: var(--vmc-surface);
    border: 1px solid rgba(0, 121, 194, 0.35);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 25px 60px rgba(1, 15, 30, 0.4);
    max-width: 460px;
    margin: 0 auto;
}
.hero-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}
@media (max-width: 767.98px) {
    .hero-image-frame {
        max-width: 100%;
        padding: 16px;
    }
}