/* ==========================================================================
   CHHV Valve - Industrial Theme (Bootstrap 5 companion stylesheet)
   Brand palette + utility classes that Bootstrap does not provide.
   ========================================================================== */

:root {
    --industrial-yellow: #FACC15;
    --industrial-dark: #1a1a1a;
    --industrial-gray: #333333;
    --industrial-light: #f3f4f6;
    --industrial-red: #ec0b0f;
    --font-sans: "Noto Sans SC", sans-serif;
}

body {
    font-family: "Noto Sans SC", sans-serif;
}

/* ------------------------------------------------------------------
   Base resets (Tailwind preflight parity)
   ------------------------------------------------------------------ */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Buttons: kill native UA border/background (Tailwind preflight parity)
   and the black focus outline/ring left after click.
   Class-based borders (.border / .border-l-3 ...) still win on specificity. */
button {
    font-family: inherit;
    border: 0;
    background-color: transparent;
    background-image: none;
}
button:focus,
button:focus-visible,
button:active {
    outline: 0;
    box-shadow: none;
}

.smooth-scroll { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #FACC15; border-radius: 4px; }

/* Fixed navbar anchor (Bootstrap position-fixed helper) */
#navbar { top: 0; left: 0; right: 0; }

/* ------------------------------------------------------------------
   Shared components
   ------------------------------------------------------------------ */

/* Dropdown menu (hover) - override Bootstrap's display:none on .dropdown-menu */
.dropdown { position: relative; }
.dropdown > .dropdown-menu { display: block; }
.dropdown-menu-custom {
    position: absolute;
    top: 150%;
    left: 0;
    min-width: 290px;
    background: #1a1a1a;
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1060;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.dropdown:hover .dropdown-menu-custom,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Bridge the gap between trigger (top:150%) and panel so the menu
   does not close while the pointer travels across the dead zone. */
.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    height: 22px;
}
.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #d1d5db;
    transition: all 0.2s ease;
}
.dropdown-menu a:hover {
    background: rgba(250, 204, 21, 0.1);
    color: #FACC15;
    padding-left: 1.5rem;
}

/* Mobile collapsible submenu */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.mobile-submenu.open { max-height: 500px; }
.mobile-submenu a { padding-left: 1.5rem !important; font-size: 0.9rem; }

/* Language switch dropdown fade-in */
#langDropdown {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#langDropdown:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
}

/* Search box expand animation */
#searchBox {
    width: 0;
    opacity: 0;
    padding: 0;
    border: 0;
    transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
#searchBox.active {
    width: 200px;
    opacity: 1;
    padding: 0.5rem 1rem;
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------------
   Brand color utilities
   ------------------------------------------------------------------ */
.text-industrial-yellow { color: var(--industrial-yellow) !important; }
.text-industrial-dark   { color: var(--industrial-dark) !important; }
.text-industrial-gray   { color: var(--industrial-gray) !important; }
.text-industrial-red    { color: var(--industrial-red) !important; }
.bg-industrial-yellow   { background-color: var(--industrial-yellow) !important; }
.bg-industrial-dark     { background-color: var(--industrial-dark) !important; }
.bg-industrial-gray     { background-color: var(--industrial-gray) !important; }
.border-industrial-yellow { border-color: var(--industrial-yellow) !important; }
.border-industrial-dark   { border-color: var(--industrial-dark) !important; }

/* Brand color / opacity variants */
.bg-industrial-dark-95   { background-color: rgba(26, 26, 26, .95) !important; }
.bg-industrial-dark-80   { background-color: rgba(26, 26, 26, .80) !important; }
.bg-industrial-yellow-05 { background-color: rgba(250, 204, 21, .05) !important; }
.bg-industrial-yellow-10 { background-color: rgba(250, 204, 21, .10) !important; }
.bg-industrial-yellow-15 { background-color: rgba(250, 204, 21, .15) !important; }
.bg-industrial-yellow-20 { background-color: rgba(250, 204, 21, .20) !important; }
.border-industrial-yellow-20 { border-color: rgba(250, 204, 21, .20) !important; }
.border-industrial-yellow-30 { border-color: rgba(250, 204, 21, .30) !important; }
.border-industrial-yellow-40 { border-color: rgba(250, 204, 21, .40) !important; }

/* White / black opacity variants */
.bg-white-05  { background-color: rgba(255, 255, 255, .05) !important; }
.bg-white-10  { background-color: rgba(255, 255, 255, .10) !important; }
.bg-white-03  { background-color: rgba(255, 255, 255, .03) !important; }
.bg-white-06  { background-color: rgba(255, 255, 255, .06) !important; }
.border-white-10 { border-color: rgba(255, 255, 255, .10) !important; }
.text-white-05 { color: rgba(255, 255, 255, .05) !important; }
.bg-black-50  { background-color: rgba(0, 0, 0, .50) !important; }

/* Gray scale (Tailwind gray parity) */
.text-gray-300 { color: #d1d5db !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }
.bg-gray-50   { background-color: #f9fafb !important; }
.bg-gray-100  { background-color: #f3f4f6 !important; }
.bg-gray-200  { background-color: #e5e7eb !important; }
.bg-gray-800  { background-color: #1f2937 !important; }
.border-gray-100 { border-color: #f3f4f6 !important; }
.border-gray-200 { border-color: #e5e7eb !important; }
.border-gray-300 { border-color: #d1d5db !important; }
.border-gray-600 { border-color: #4b5563 !important; }
.border-gray-700 { border-color: #374151 !important; }
.border-gray-800 { border-color: #1f2937 !important; }
.border-transparent { border-color: transparent !important; }

/* ------------------------------------------------------------------
   Hover utilities
   ------------------------------------------------------------------ */
.hover-text-yellow:hover { color: var(--industrial-yellow) !important; }
.hover-text-dark:hover   { color: var(--industrial-dark) !important; }
.hover-text-white:hover  { color: #fff !important; }
.hover-bg-yellow:hover   { background-color: var(--industrial-yellow) !important; }
.hover-bg-dark:hover     { background-color: var(--industrial-dark) !important; }
.hover-bg-yellow-10:hover { background-color: rgba(250, 204, 21, .10) !important; }
.hover-bg-white-06:hover  { background-color: rgba(255, 255, 255, .06) !important; }
.hover-border-yellow:hover    { border-color: var(--industrial-yellow) !important; }
.hover-border-yellow-40:hover { border-color: rgba(250, 204, 21, .40) !important; }
.hover-underline:hover { text-decoration: underline !important; }
.hover-scale-110:hover { transform: scale(1.1); }
.hover-shadow-lg:hover { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18) !important; }
.hover-shadow-xl:hover { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25) !important; }
.shadow-xl { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18) !important; }

/* Form focus ring */
.focus-ring-yellow:focus {
    outline: 0;
    border-color: var(--industrial-yellow);
    box-shadow: 0 0 0 .2rem rgba(250, 204, 21, .25);
}
.focus-border-yellow:focus { border-color: var(--industrial-yellow); }
.outline-none { outline: none !important; }

/* ------------------------------------------------------------------
   Group hover utilities (parent marker: .group)
   ------------------------------------------------------------------ */
.group {}
.group:hover .gh-scale-110     { transform: scale(1.1); }
.group:hover .gh-scale-105     { transform: scale(1.05); }
.group:hover .gh-rotate-12     { transform: rotate(12deg); }
.group:hover .gh-scale-y-100   { transform: scaleY(1); }
.group:hover .gh-text-yellow    { color: var(--industrial-yellow) !important; }
.group:hover .gh-text-dark      { color: var(--industrial-dark) !important; }
.group:hover .gh-text-yellow-20 { color: rgba(250, 204, 21, .20) !important; }
.group:hover .gh-opacity-100    { opacity: 1; }
.group:hover .gh-bg-yellow      { background-color: var(--industrial-yellow) !important; }
.group:hover .gh-bg-yellow-80   { background-color: rgba(250, 204, 21, .80) !important; }
.group:hover .gh-bg-yellow-15   { background-color: rgba(250, 204, 21, .15) !important; }

/* ------------------------------------------------------------------
   Transitions / transforms / effects
   ------------------------------------------------------------------ */
.transition-all       { transition: all .3s ease; }
.transition-colors    { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.transition-transform { transition: transform .3s ease; }
.transition-opacity   { transition: opacity .3s ease; }
.duration-300 { transition-duration: .3s; }
.duration-500 { transition-duration: .5s; }
.origin-top  { transform-origin: top; }
.scale-y-0   { transform: scaleY(0); }
.rotate-180  { transform: rotate(180deg); }

@keyframes industrial-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
.animate-pulse { animation: industrial-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

.opacity-07 { opacity: .07; }
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur    { backdrop-filter: blur(8px); }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }

/* Gradients */
.grad-yellow {
    background-image: linear-gradient(135deg, rgba(250, 204, 21, .20), rgba(250, 204, 21, .05));
}
.grad-dark-fade {
    background-image: linear-gradient(to top, rgba(26, 26, 26, .90) 0%, rgba(26, 26, 26, .20) 45%, rgba(26, 26, 26, 0) 100%);
}

/* Borders / radius */
.border-2 { border-width: 2px; }
.border-l-3 { border-left-width: 3px; border-left-style: solid; }
.rounded-full { border-radius: 9999px !important; }
.rounded-75 { border-radius: .75rem !important; }
.rounded-l { border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; }
.rounded-r { border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }

/* Text helpers */
.fw-medium { font-weight: 500 !important; }
.fw-black  { font-weight: 900 !important; }
.text-xs  { font-size: .75rem; }
.text-sm  { font-size: .875rem;  }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.tracking-wide    { letter-spacing: .025em; }
.tracking-wider   { letter-spacing: .05em; }
.tracking-widest  { letter-spacing: .1em; }
.leading-none     { line-height: 1; }
.leading-tight    { line-height: 1.25; }
.leading-relaxed  { line-height: 1.625; }
.text-nowrap      { white-space: nowrap; }
.text-break       { word-break: break-word; }

/* Line clamp */
.line-clamp-2, .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Article typography */
.prose { line-height: 1.75; color: #374151; }
.prose p { margin-bottom: 1rem; }
.prose h2, .prose h3, .prose h4 { margin: 1.5rem 0 .75rem; font-weight: 700; color: #1a1a1a; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1rem 0; }
.max-w-none { max-width: none; }

/* ------------------------------------------------------------------
   Spacing utilities beyond Bootstrap's 0-5 scale (Tailwind parity)
   ------------------------------------------------------------------ */
/* 2rem grid gutter (Tailwind gap-8 parity; Bootstrap only ships g-0..g-5).
   .row > * consumes --bs-gutter-x/y for padding/margin, so vars alone suffice. */
.g-8 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }

.p-7  { padding: 1.75rem !important; }
.p-8  { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }
.px-8  { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.pt-8  { padding-top: 2rem !important; }
.pt-28 { padding-top: 7rem !important; }
.pt-32 { padding-top: 8rem !important; }
.pt-40 { padding-top: 10rem !important; }
.pt-50 { padding-top: 15rem !important; }

.pb-16 { padding-bottom: 4rem !important; }
.pb-20 { padding-bottom: 5rem !important; }
.pb-24 { padding-bottom: 6rem !important; }
.pb-50 { padding-top: 15rem !important; }



.mt-8  { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-16 { margin-top: 4rem !important; }
.mt-20 { margin-top: 5rem !important; }
.mb-8  { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.mt-n10 { margin-top: -2.5rem !important; }
.me-n10 { margin-right: -2.5rem !important; }

/* Gap utilities beyond Bootstrap scale */
.gap-8  { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }
.gap-14 { gap: 3.5rem !important; }

/* Vertical/horizontal rhythm (lobotomized owl) */
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-10 > * + * { margin-left: 2.5rem; }

/* ------------------------------------------------------------------
   Sizing utilities (Tailwind parity, Bootstrap only ships 25/50/75/100)
   ------------------------------------------------------------------ */
.w-px { width: 1px; }
.w-1  { width: .25rem; }  .h-1  { height: .25rem; }
.w-2  { width: .5rem; }   .h-2  { height: .5rem; }
.h-3  { height: .75rem; }
.w-8  { width: 2rem; }    .h-8  { height: 2rem; }
.w-9  { width: 2.25rem; } .h-9  { height: 2.25rem; }
.w-10 { width: 2.5rem; }  .h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }    .h-12 { height: 3rem; }
.w-14 { width: 3.5rem; }  .h-14 { height: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-28 { width: 7rem; }    .h-28 { height: 7rem; }
.w-32 { width: 8rem; }    .h-32 { height: 8rem; }
.w-96 { width: 24rem; }   .h-96 { height: 24rem; }
.h-20 { height: 5rem; }
.h-44 { height: 11rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.h-68 { height: 17rem; }
.h-72 { height: 18rem; }

.min-w-120 { min-width: 120px; }
.max-w-2xl { max-width: 42rem; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Position offsets (Bootstrap ships 0/50/100 only) */
.top-100 { top: 100%; }
.top-3   { top: .75rem; }  .start-3 { left: .75rem; }  .end-3 { right: .75rem; }
.top-4   { top: 1rem; }    .start-4 { left: 1rem; }    .end-4 { right: 1rem; }
.bottom-1 { bottom: .25rem; }
.bottom-4 { bottom: 1rem; }
.bottom-6 { bottom: 1.5rem; } .end-6 { right: 1.5rem; }
.top-n4  { top: -1rem; }   .start-n4 { left: -1rem; }
.top-n10 { top: -2.5rem; } .end-n10 { right: -2.5rem; }
.end-n6  { right: -1.5rem; } .bottom-n6 { bottom: -1.5rem; }
.top-n32    { top: -8rem; }    .end-n32 { right: -8rem; }
.bottom-n32 { bottom: -8rem; } .start-n32 { left: -8rem; }

/* z-index */
.z-10 { z-index: 10; }
.z-50 { z-index: 1050; }
.z-60 { z-index: 1060; }

/* Sticky helpers */
.top-24 { top: 6rem; }
@media (min-width: 992px) {
    .sticky-lg { position: sticky !important; }
    .top-lg-28 { top: 7rem; }
    .h-lg-480 { height: 480px; }
    .w-lg-64 { width: 16rem; }
    .w-lg-50  { width: 50%; }
    .w-lg-2-5 { width: 40%; }
    .w-lg-3-5 { width: 60%; }
    .w-lg-5-12 { width: 41.6667%; }
    .w-lg-7-12 { width: 58.3333%; }
    /* footer brand column spans 2/5 inside row-cols-md-5 */
    .row-cols-md-5 > .col-span-md-2 { flex: 0 0 auto; width: 40%; }

.hero-slider {
    position: relative;
    height: 30vh;
    overflow: hidden;
}


}
@media (min-width: 768px) {
    .p-md-10 { padding: 2.5rem !important; }
    .me-md-20 { margin-right: 5rem !important; }
    .w-md-auto { width: auto !important; }
    .text-md-xl  { font-size: 1.25rem; }
    .text-md-4xl { font-size: 2.25rem; }
    .text-md-5xl { font-size: 3rem; }
    .text-md-6xl { font-size: 3.75rem; }

    .hero-slider {
    position: relative;
    height: 30vh;
    overflow: hidden;
}
}
@media (min-width: 576px) {
    .w-sm-64 { width: 16rem; }

    .hero-slider {
    position: relative;
    height: 30vh;
    overflow: hidden;
}
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 90rem;
    }

    .hero-slider {
    position: relative;
    height: 80vh;
    overflow: hidden;
}
}