/* ============================================================
   Refinements layer - loaded last, after style_v5.css.
   Deliberately conservative: this polishes the existing design
   rather than changing it. No colours, fonts or layout are
   redefined; everything here is spacing, state, motion and
   mobile behaviour that the original theme never specified.
   Brand red throughout is #bf2034, taken from the existing CSS.
   ============================================================ */

:root {
    --gt-red: #bf2034;
    --gt-red-dark: #4a050e;
    --gt-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Accessibility: visible focus ----------
   The theme defined no :focus styles at all, so keyboard and
   screen-reader users had no idea where they were on the page. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--gt-red);
    outline-offset: 2px;
    border-radius: 3px;
}
/* Don't show the ring on plain mouse clicks. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ---------- Motion ----------
   Honour the OS "reduce motion" setting. The theme animates
   heavily via WOW.js and Owl Carousel. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Typography rhythm ----------
   Slightly tighter headings and a more comfortable body measure.
   Sizes are untouched - only tracking and leading. */
h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    letter-spacing: -0.015em;
    line-height: 1.18;
    text-wrap: balance;
}
p {
    line-height: 1.7;
}
p, li {
    text-wrap: pretty;
}

/* ---------- Links ---------- */
a {
    transition: color .2s var(--gt-ease);
}

/* ---------- Buttons ----------
   Consistent lift and shadow. The theme had transitions on some
   buttons and not others. */
.btn {
    transition: transform .2s var(--gt-ease),
                box-shadow .2s var(--gt-ease),
                background-color .2s var(--gt-ease),
                border-color .2s var(--gt-ease);
}
.btn:hover {
    transform: translateY(-2px);
}
.btn:active {
    transform: translateY(0);
}

/* ---------- Buttons: one shape ----------
   The homepage alone shipped 33 buttons in 11 different visual styles: radii
   of 0, 20 and 35px, padding from nothing to 16px/48px, and font sizes of 16,
   17, 19.2 and 20px. Colours are left alone, only geometry is unified. */
.btn {
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
}
/* Only supply padding where the theme set none, so deliberately roomy
   hero buttons keep their proportions. */
.btn:not([class*="px-"]):not([class*="py-"]):not([class*="p-"]) {
    padding: .625rem 1.25rem;
}
.btn-sm { border-radius: 6px; font-size: .9rem; }
.btn-lg { border-radius: 10px; font-size: 1.0625rem; }
/* Pill buttons stay pills. */
.btn.rounded-pill, .rounded-pill.btn { border-radius: 50rem; }

/* ---------- Cards ----------
   Unify the several hand-rolled card hovers across pages. */
.card,
.service-card,
.stat-card,
.product-card {
    transition: transform .3s var(--gt-ease), box-shadow .3s var(--gt-ease);
}

/* Equal-height cards in a grid. Scoped with :has() so it only applies to rows
   that actually contain cards, leaving text-beside-image rows alone. Browsers
   without :has() simply keep today's behaviour. */
.row:has(> [class*="col-"] > .card) > [class*="col-"],
.row:has(> [class*="col-"] > .service-card) > [class*="col-"],
.row:has(> [class*="col-"] > .stat-card) > [class*="col-"] {
    display: flex;
}
.row > [class*="col-"] > .card,
.row > [class*="col-"] > .service-card,
.row > [class*="col-"] > .stat-card {
    width: 100%;
}

/* ---------- Images ----------
   Stops stretched product shots and keeps everything fluid. */
img {
    max-width: 100%;
    height: auto;
}
img[width][height] {
    height: auto;
}

/* ---------- Mobile ----------------------------------------- */

/* Nothing should ever cause a sideways scroll.
   `clip` rather than `hidden` on purpose: `hidden` makes the element a
   scroll container, which silently kills `position: sticky` on the navbar
   (.nav-bar.sticky-top). `clip` suppresses the overflow without that
   side effect. Browsers too old to know `clip` just ignore the rule. */
html, body {
    overflow-x: clip;
    max-width: 100%;
}

/* Wide content scrolls inside itself rather than pushing the page. */
.table-responsive,
table {
    max-width: 100%;
}
pre, code {
    overflow-x: auto;
    max-width: 100%;
}

@media (max-width: 991.98px) {
    /* Give the collapsed nav room to breathe. */
    .navbar-collapse {
        padding-bottom: .75rem;
    }
    .navbar-nav .nav-link {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }
}

@media (max-width: 767.98px) {
    /* Touch targets: WCAG 2.5.8 asks for 24px minimum, Apple and
       Google both recommend 44px. Links inside prose are exempt. */
    .btn,
    .navbar-nav .nav-link,
    .navbar-toggler,
    .pagination .page-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Oversized display headings overflow small screens. */
    .display-1 { font-size: clamp(2.2rem, 9vw, 3.5rem); }
    .display-2 { font-size: clamp(2.0rem, 8.5vw, 3.2rem); }
    .display-3 { font-size: clamp(1.9rem, 8vw, 2.9rem); }
    .display-4 { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }
    .display-5 { font-size: clamp(1.6rem, 7vw, 2.3rem); }
    .display-6 { font-size: clamp(1.4rem, 6vw, 2.0rem); }

    /* Section padding is generous on desktop and wasteful on phones. */
    .mysection {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* 16px minimum stops iOS Safari zooming the page on focus. */
    input, select, textarea, .form-control {
        font-size: 16px;
    }

    /* The floating WhatsApp widget sat on top of page buttons. Shrink it and
       tuck it lower so it stops covering calls to action. */
    .whatsapp-float, .float-whatsapp, [class*="whatsapp"] {
        transform: scale(.85);
        transform-origin: bottom right;
    }

    /* Header logo at 100px ate a third of the viewport height on phones. */
    .navbar-brand img {
        width: 68px !important;
        height: 68px !important;
    }
}

/* ---------- Header ----------------------------------------
   The angled two-tone bar is kept - it is part of the identity - but the
   original stops were 35%/35%/35%, which is a hard seam with no blend. */
.navbar.navbar-light.menu-bg,
.nav-bar .navbar {
    background-image: linear-gradient(112deg,
        #ffffff 0%,
        #ffffff 34%,
        #fcfcfc 46%,
        #f7f7f8 100%) !important;
    border-radius: 12px;
    /* Was 0 0 20px rgba(0,0,0,.3): a heavy glow in every direction, which is
       what made the bar look like it was floating on a drop shadow from 2012.
       Directional and much lighter. */
    box-shadow: 0 2px 16px rgba(16, 24, 40, .08),
                0 1px 3px  rgba(16, 24, 40, .06) !important;
}

/* Only "About Us" and "Contact Us" wrapped onto two lines, because the theme
   set white-space: nowrap on some items and not others. */
.navbar-nav .nav-link,
.navbar .btn,
.navbar-brand {
    white-space: nowrap;
}

/* Brand-coloured hover, so hovering a nav item gives some feedback.
   Deliberately just a colour change: an animated underline was tried and
   removed. Bootstrap draws the dropdown caret with .dropdown-toggle::after,
   so a pseudo-element underline deletes the arrows, and a transform-based one
   fights the theme's rotateX menu animation. Not worth the fragility. */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        transition: color .2s var(--gt-ease);
    }
    .navbar-nav .nav-link:hover {
        color: var(--gt-red);
    }
}

/* ---------- Dropdowns ----------
   Were square-cornered flat grey panels with a hard 1px border and 24px of
   padding. Same content, current presentation. */
.navbar .dropdown-menu {
    background-color: #fff !important;
    border: 1px solid rgba(16, 24, 40, .06) !important;
    border-radius: 14px !important;
    padding: .5rem !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .12),
                0 2px 8px  rgba(16, 24, 40, .06) !important;
    /* No margin-top here. The theme opens these on hover via
       `.navbar .nav-item:hover .dropdown-menu` and relies on margin-top: 0 to
       keep the pointer over the menu on the way down. Adding a gap made the
       menu unreachable without clicking. */
}
.navbar .dropdown-item {
    border-radius: 8px;
    padding: .55rem .85rem !important;
    font-size: 1rem !important;
    transition: background-color .18s var(--gt-ease), color .18s var(--gt-ease);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: rgba(191, 32, 52, .07) !important;
    color: var(--gt-red) !important;
}

/* The mega-menu links are marked .text-secondary, and the theme redefines
   --bs-secondary to #FF6922. That orange belongs on the logo arrow and on
   accents, not on a column of link text, where it reads as unfinished and
   fails contrast on white (2.6:1). Neutral by default, brand red on hover. */
.megamenu a.text-secondary,
.megamenu .text-secondary {
    color: #3d4450 !important;
    transition: color .18s var(--gt-ease);
}
.megamenu a.text-secondary:hover,
.megamenu a.text-secondary:focus {
    color: var(--gt-red) !important;
}
.megamenu h6 {
    color: #0e2e50;
    letter-spacing: .04em;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    transition: border-color .2s var(--gt-ease), box-shadow .2s var(--gt-ease);
}

/* ---------- Print ---------- */
@media print {
    .navbar, .nav-bar, footer, .btn, .owl-carousel { display: none !important; }
    body { color: #000; background: #fff; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}