/* Acceled Technology - site-specific overrides on top of the Edubin template */

/* Sitewide font: the "Tomorrow" Google Font (loaded in _Layout.cshtml) replaces every
   font-family the Edubin template sets - the template pins "Montserrat" and "Roboto"
   across dozens of individual selectors (headings, buttons, nav, body text, ...), so
   overriding each one individually would be fragile. A single !important rule on every
   element is the reliable way to guarantee one consistent font across the whole site.
   Excluded: Font Awesome (.fa/.fas/.far/.fab/.fal, or any class containing "fa-") and
   the template's own "flaticon" icon set (class containing "flaticon") - both render
   icon glyphs by mapping specific codepoints to a custom webfont's own font-family, so
   forcing Tomorrow onto those elements would turn every icon into a blank box. */
body,
body *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="flaticon"]) {
    font-family: "Tomorrow", sans-serif !important;
}

.brand-logotype {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
}

.logo-accel {
    color: #274F94;
}

.logo-ed {
    color: #EB262E;
}

/* Language switch + Admin - one self-contained utility group in the top nav bar,
   sitting beside the page-link menu rather than inside it. It intentionally does NOT
   live inside .main-menu ul (the page-link list cloned into the mobile meanmenu) -
   mixing small pill buttons into that list broke vertical centering, since sibling
   links there are centered via ~40px of top/bottom padding on the anchor, not flexbox. */
.header-utility {
    gap: 12px;
    margin-left: 30px;
    padding-left: 25px;
    position: relative;
}

.header-utility::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background-color: #E5E5E5;
}

/* Round flag button that opens a Vietnamese-first / English-second dropdown */
.lang-switch-item {
    position: relative;
}

.lang-round-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #021E40;
    background: #ffffff;
    line-height: 1;
    cursor: pointer;
    transition: 0.3s;
}

.lang-round-btn:hover,
.lang-round-btn:focus {
    border-color: #ffc600;
}

.lang-round-btn .flag-emoji {
    font-size: 16px;
    line-height: 1;
}

.lang-dropdown-menu {
    min-width: 160px;
    padding: 6px;
    margin-top: 10px !important;
    border: 1px solid #EDEDED;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(2, 30, 64, 0.12);
}

.lang-dropdown-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #021E40;
}

.lang-dropdown-link .flag-emoji {
    font-size: 16px;
    line-height: 1;
}

.lang-dropdown-link:hover {
    background: #F7F7F7;
    color: #021E40;
}

.lang-dropdown-link.is-active {
    background: #021E40;
    color: #ffffff;
}

.header-utility .admin-btn {
    display: inline-block;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 20px;
    white-space: nowrap;
    background: #ffc600;
    color: #021E40;
}

.header-utility .admin-btn:hover {
    background: #021E40;
    color: #ffffff;
}

/* .header-meta (wraps the mobile hamburger button) inherits 85px of left spacing
   (margin-left: 50px + padding-left: 35px) from the vendor template's desktop design, where it
   separated the hamburger from search/cart icons that this project's header doesn't have (see the
   acceled-website skill - only nav/lang-switch/admin were ported in). .header-meta is only ever
   visible below 992px (.side-menu-icon is d-lg-none), so tightening it here can't affect desktop.
   Confirmed via an actual headless-browser measurement that the header overflowed the viewport by
   ~85-97px on real mobile widths (320-414px) before this fix - not a hypothetical. */
@media only screen and (max-width: 991px) {
    .header-meta {
        margin-left: 12px;
        padding-left: 12px;
    }

    /* .side-menu-icon (the hamburger button itself) carries its own extra 30px margin-left on
       top of .header-meta's padding above - same vendor spacing-for-icons-we-removed issue. */
    .side-menu-icon {
        margin-left: 8px;
    }
}

@media only screen and (max-width: 575px) {
    .header-utility {
        margin-left: 12px;
        padding-left: 12px;
        gap: 8px;
    }

    .lang-round-btn {
        width: 30px;
        height: 30px;
    }

    .header-utility .admin-btn {
        padding: 3px 10px;
        font-size: 11px;
    }
}

/* Below 400px, the logo + language switch + Admin pill + hamburger no longer all fit on one
   line no matter how tightly spaced - hide the Admin entry point there. It's an internal
   convenience for staff, not something a public visitor on the smallest phones needs immediate
   access to from the header; staff can still reach /Admin directly by URL. */
@media only screen and (max-width: 399px) {
    .header-utility .admin-btn {
        display: none;
    }
}

/* The 404 illustration is an inline <svg width="380" height="281"> (ported as-is from
   HTMLTemplate/404.html) with no responsive constraint of its own - the site's generic
   "img { max-width: 100% }" reset (style.css) only targets <img>, not raw <svg> markup. Confirmed
   via headless-browser measurement this caused a small (~14px) horizontal scroll on the narrowest
   phones (~320px wide). */
.error-image svg {
    max-width: 100%;
    height: auto;
}

/* The Home page's CTA section (bg/cta-bg3.jpg) puts its inline background-image on
   .edubin-cta-section-03 itself - the template's own style.css only ever defines
   background-size/repeat for ".edubin-cta-section-03 .cta-wrap" (a descendant), which
   isn't where the image actually lives even in the original unmodified template, so
   that rule is effectively dead. Without this, the section falls back to the CSS
   default (small tiled repeat) instead of covering the section like every other
   background-image section on the site. */
.edubin-cta-section-03 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Footer copyright row: the Terms & Acknowledgement link sits next to the social
   icons on the right, both vertically centered via flex - .footer-copyright-links'
   own margin-top:10px (meant for it being the only element in its column in the
   stock template) throws that off here, so it's zeroed out in this context. */
.footer-bottom-right .footer-copyright-links {
    margin-top: 0;
}

/* Projects page - case-study blocks (no equivalent component in the Edubin template,
   which has no "project" concept, only courses/products). */
.project-photo img {
    border-radius: 10px;
    width: 100%;
}

.project-cont .project-tag {
    display: inline-block;
    padding: 5px 16px;
    margin-bottom: 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #021E40;
    background: #ffc600;
}

.project-cont .title {
    margin-bottom: 8px;
}

.project-cont .project-partner {
    margin-bottom: 25px;
    font-weight: 600;
    color: #274F94;
}

.project-point {
    margin-bottom: 18px;
}

.project-point h4 {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #021E40;
}

.project-point p {
    margin-bottom: 0;
}

.project-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #E5E5E5;
}

.project-stat .project-stat-value {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #EB262E;
    line-height: 1;
}

.project-stat .project-stat-label {
    font-size: 14px;
    color: #666;
}

/* Quick Contact banner (Views/Shared/_QuickContactPartial.cshtml, rendered on every
   page from _Layout.cshtml, right before the footer).
   The template's .edubin-cta-section-02 .cta-wrap carries a -120px bottom margin by
   design (Home Style Eight): it's meant to visually overlap into the *next section's*
   generous top padding. A parent's padding-bottom does NOT contain that - the negative
   margin still pulls whatever comes after (here, the footer) up into the card's own
   bottom edge, regardless of any spacing added around it. It's neutralized at the
   source with an inline style directly on the .cta-wrap element in
   _QuickContactPartial.cshtml (inline always wins over an external stylesheet rule,
   regardless of load order or cascade specificity) - the rules below are purely
   cosmetic and don't affect that fix. */

/* The template's own two-column row (col-lg-9 title / col-lg-3 button) was designed for
   a different Home-Style-Eight layout with an inset illustration eating into .cta-cont's
   default 290px left padding - with our simple title+button banner that padding just
   shoves the centered text off-center. Laid out with flexbox instead: title and button
   share one line on wide screens and stack centered on narrow ones. */
.quick-contact-inner {
    gap: 24px;
}
.quick-contact-cont {
    padding-left: 0 !important;
    text-align: left;
}
.quick-contact-btn .btn {
    white-space: nowrap;
}
@media only screen and (max-width: 991px) {
    .quick-contact-inner {
        justify-content: center !important;
        text-align: center;
    }
    .quick-contact-cont {
        text-align: center;
    }
}

/* Give the banner the same top AND bottom breathing room every other section on the
   site gets from .section-padding (the template's .section-padding-02 that this banner
   otherwise uses is deliberately top-only, for the overlap trick above) - so it reads
   as its own distinct floating card with even spacing, not one glued to the footer. */
.quick-contact-section {
    padding-bottom: 120px;
}
@media only screen and (max-width: 1199px) {
    .quick-contact-section { padding-bottom: 100px; }
}
@media only screen and (max-width: 991px) {
    .quick-contact-section { padding-bottom: 80px; }
}
@media only screen and (max-width: 767px) {
    .quick-contact-section { padding-bottom: 60px; }
}

/* ==========================================================================
   Micro-interactions - small, deliberate motion on top of the template's
   existing (mostly static) hover states, added on top of rather than
   replacing them. Kept short (0.2-0.3s) and subtle by design: the goal is
   for the site to feel considered and responsive to the cursor, not showy.
   ========================================================================== */

/* Buttons: the template's .btn already fades its background/text color on
   hover (style.css) - layered on a gentle lift + soft shadow so the button
   visibly responds to the cursor, plus a quick "press" feedback on click so
   clicking feels tactile instead of instant. */
.btn {
    transition: all 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(7, 41, 77, 0.18);
}
.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(7, 41, 77, 0.16);
}

/* Main nav: a thin indicator bar sweeps in under the active/hovered link
   instead of just swapping color - a common, understated way to make a nav
   feel deliberately designed rather than default. Anchored to the very
   bottom of the link's own box (its 40px top/bottom padding already centers
   the text), so it reads as a bar under the whole nav item, not a fragile
   underline chasing the text baseline. */
.main-menu ul li > a {
    position: relative;
}
.main-menu ul li > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s ease;
}
.main-menu ul li:hover > a::before,
.main-menu ul li.active-menu > a::before {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Blog grid cards: a soft lift + shadow reads as "this is clickable" more
   clearly than the template's own color-only hover here. Scoped to cards in
   a plain grid (not inside a Swiper slider, whose overflow:hidden viewport
   would clip a lifted card's shadow/translateY - .single-course and
   .single-testimonial-04 elsewhere on the site are Swiper slides, so this is
   deliberately not applied there). */
.single-blog {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.single-blog:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(7, 41, 77, 0.1);
}

/* Project case-study photos: match the zoom-on-hover the template already
   uses for course/blog thumbnails elsewhere, so the Projects page feels
   consistent with the rest of the site rather than static by comparison. */
.project-photo {
    overflow: hidden;
    border-radius: 10px;
}
.project-photo img {
    transition: transform 0.4s ease;
}
.project-photo:hover img {
    transform: scale(1.06);
}

/* Contact form fields: swap Bootstrap's generic blue focus ring for the
   site's own brand blue, with a smooth transition instead of an instant
   snap, so the form feels like part of this site rather than default
   Bootstrap. */
.form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
    border-color: #0071dc;
    box-shadow: 0 0 0 0.2rem rgba(0, 113, 220, 0.15);
}

/* Back-to-top button: a small pop on hover instead of no feedback at all. */
.progress-wrap:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.2);
}

/* Footer credit line: small, unobtrusive attribution below the copyright bar. */
.footer-credit-line {
    padding: 6px 0;
    background-color: #000000;
}
.footer-credit-line p {
    margin: 0;
    font-size: 11px;
    color: #ffffff;
}
.footer-credit-line a {
    color: #ffffff;
    text-decoration: underline;
}
.footer-credit-line a:hover {
    color: #ffffff;
}