/*
Theme Name:  HH Evolution Theme
Theme URI:   https://hhe.com.my
Author:      H H Evolution Sdn Bhd
Author URI:  https://hhe.com.my
Description: WordPress theme for H H Evolution Sdn Bhd – Plant Technology Specialist in Water Engineering & Industrial Products. Built with ACF Pro & WordPress Customizer.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hhe-theme
Tags:        business, custom-menu, custom-logo, featured-images, full-width-template, theme-options
*/

/* ============================================================
   TABLE OF CONTENTS
   1. Reset
   2. Typography
   3. Layout
   4. Header
   5. Navigation
   6. Hero / Slider
   7. Content Areas
   8. Sidebar
   9. Products
   10. Footer
   11. Forms
   12. Utilities
   13. Responsive
   ============================================================ */

/* ---- 1. Reset -------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #333;
    background: #fff;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
    display: block;
}

:focus { outline: 0; }
iframe { overflow: hidden; }

/* ---- 2. Typography --------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3;
    margin-bottom: 10px;
}

p { margin-bottom: 12px; }

a {
    color: #0a4595;
    text-decoration: none;
}

a:hover { color: #063070; }

.link {
    color: #6633cc;
    text-decoration: none;
    font-weight: bold;
}

.link:hover { color: #6600cc; }

.ptitle {
    font-size: 30px;
    line-height: 35px;
    color: #778cb8;
}

.subtitle {
    font-size: 20px;
    line-height: 25px;
    font-weight: bold;
}

.prosubtitle {
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    color: #463385;
    text-transform: uppercase;
}

.prodesc {
    font-size: 13px;
    line-height: 20px;
    color: #666;
}

.hpthumbtitle {
    text-transform: uppercase;
    font-weight: bolder;
    line-height: 36px;
    margin-top: 10px;
    font-size: 35px;
}

.itemtitle {
    color: #778cb8;
    font-weight: bold;
    text-transform: uppercase;
}

/* ---- 3. Layout ------------------------------------------ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.site-wrapper {
    width: 100%;
    overflow: hidden;
}

.content-area {
    padding: 30px 0;
}

.page-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.row-spacer { height: 20px; }
.row-spacer-lg { height: 50px; }

/* ---- 4. Header ------------------------------------------ */
.site-header {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 100;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.header-logo img {
    max-width: 450px;
    width: 100%;
    height: auto;
}

.header-tagbar {
    height: 34px;
    background-color: #0a4595;
    color: #fff;
    padding-left: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15px;
}

.header-tagbar .tagline {
    font-size: 16px;
    line-height: 30px;
}

.header-tagbar .hunting-line {
    font-size: 14px;
    color: #fff;
}

.header-subbar {
    height: 34px;
    background-color: #cedaea;
    padding-left: 25px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.header-shadow {
    height: 9px;
    background-image: url(imgs/nav-shadow.png);
    background-repeat: repeat-x;
}

/* ---- 5. Navigation -------------------------------------- */
.nav {
    width: 100%;
    height: 40px;
    background: transparent;
    position: relative;
    top: 5px;
    left: 0;
    font-size: 14px;
    z-index: 9999;
}

.nav ul {
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
}

.nav ul li {
    position: relative;
    float: left;
}

.nav ul a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    color: #0a4595;
}

.nav ul ul a:hover {
    color: #fff !important;
    background-color: #000 !important;
}

.nav ul ul { display: none; }

.nav ul li ul {
    position: absolute;
    top: 40px;
    left: 0;
}

.nav ul li li { float: none; }

.nav ul li li a {
    background-color: #6666cc;
    color: #fff;
    width: 280px;
    font-size: 12px;
}

.nav ul li li a:hover {
    background-color: #000;
    color: #fff;
}

.nav ul li:hover ul { display: block; }

/* WordPress nav menu compatibility */
.nav .menu { margin: 0; padding: 0; list-style: none; float: right; }
.nav .menu li { position: relative; float: left; }
.nav .menu > li > a { display: block; height: 40px; line-height: 40px; padding: 0 20px; color: #0a4595; }
.nav .menu li ul { display: none; position: absolute; top: 40px; left: 0; z-index: 9999; min-width: 280px; }
.nav .menu li ul li { float: none; }
.nav .menu li ul li a { display: block; background-color: #6666cc; color: #fff; padding: 0 15px; height: 40px; line-height: 40px; font-size: 12px; white-space: nowrap; }
.nav .menu li ul li a:hover { background-color: #000; color: #fff; }
.nav .menu li:hover > ul { display: block; }
.nav .menu li ul ul { top: 0; left: 100%; }
.nav .current-menu-item > a { color: #063070; font-weight: bold; }

/* Mobile Navigation */
.slicknav_menu { display: none; }

@media (max-width: 768px) {
    .nav { display: none; }
    .slicknav_menu { display: block; width: 100%; background-color: #000; z-index: 999; }
    .slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; line-height: 50px; cursor: pointer; text-decoration: none; }
    .slicknav_menu .slicknav_menutxt { display: block; line-height: 50px; float: left; color: #fff; padding-top: 2px; }
    .slicknav_menu .slicknav_icon { float: left; }
    .slicknav_menu .slicknav_icon-bar { display: block; width: 20px; height: 3px; margin: 16px 20px 0 10px; background-color: #fff; }
    .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em; }
    .slicknav_nav { clear: both; color: #fff; font-size: 1em; }
    .slicknav_nav,
    .slicknav_nav ul { list-style: none; overflow: hidden; background: #333; }
    .slicknav_nav ul { background: #333; }
    .slicknav_nav ul ul { background: #444; }
    .slicknav_nav ul li li { text-indent: 20px; }
    .slicknav_nav .slicknav_item { display: block; cursor: pointer; padding: 5px 10px; }
    .slicknav_nav a { display: block; padding: 10px; text-decoration: none; color: white; }
    .slicknav_nav li:hover { color: #0a4595; background-color: #666; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .nav { z-index: 202; }
}

/* ---- 6. Hero / Slider ----------------------------------- */
.hero-slider-wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Jssor bullet navigator skin 05 */
.jssorb05 div,
.jssorb05 div:hover,
.jssorb05 .av {
    background: url(slidem/img/b05.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

/* Jssor arrow navigator skin 12 */
.jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
    position: absolute;
    cursor: pointer;
    display: block;
    background: url(slidem/img/a12.png) no-repeat;
    overflow: hidden;
}
.jssora12l { background-position: -16px -37px; }
.jssora12r { background-position: -75px -37px; }
.jssora12l:hover { background-position: -136px -37px; }
.jssora12r:hover { background-position: -195px -37px; }
.jssora12ldn { background-position: -256px -37px; }
.jssora12rdn { background-position: -315px -37px; }

/* ---- 7. Content Areas ----------------------------------- */
.page-content { padding: 20px 0; }

.page-content table { width: 100%; border-collapse: collapse; }
.page-content td { padding: 5px 8px; vertical-align: top; }

.subbar-breadcrumb {
    font-size: 12px;
    color: #555;
    line-height: 34px;
}

.subbar-breadcrumb a { color: #0a4595; }
.subbar-breadcrumb a:hover { text-decoration: underline; }

/* ---- 8. Sidebar ----------------------------------------- */
.sidebar-nav {
    width: 100%;
    padding: 10px 0;
}

.sub {
    font-size: 14px;
    line-height: 35px;
    border-bottom: 1px #ccc solid;
    padding-left: 10px;
    display: block;
    height: 35px;
    width: 280px;
    text-decoration: none;
    color: #333;
}

.sub:hover { color: #3300cc; }

.subdown {
    font-size: 14px;
    line-height: 35px;
    border-bottom: 1px #ccc solid;
    padding-left: 10px;
    display: block;
    height: 35px;
    width: 280px;
    text-decoration: none;
    color: #fff;
    background-color: #0a4595;
}

.subsub {
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
    display: block;
    padding: 4px;
    color: #333;
}

.subsub:hover { color: #000; }

.projsublink {
    font-size: 14px;
    line-height: 35px;
    border-bottom: 1px #ccc solid;
    display: block;
    height: 35px;
    width: 250px;
    text-decoration: none;
    color: #333;
}

.projsublink:hover {
    color: #3300cc;
    padding-left: 10px;
    background-color: #f5f5f5;
}

/* ---- 9. Products ---------------------------------------- */
.product-section { margin-bottom: 40px; }

.product-title {
    font-size: 20px;
    font-weight: bold;
    color: #0a4595;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.product-card {
    flex: 1 1 220px;
    border: 1px solid #ddd;
    padding: 15px;
    background: #fafafa;
}

.product-card img { margin-bottom: 10px; }

.pdf-download {
    display: inline-block;
    background: #0a4595;
    color: #fff;
    padding: 6px 14px;
    font-size: 12px;
    margin-top: 8px;
    border-radius: 2px;
}

.pdf-download:hover { background: #063070; color: #fff; }

/* Product sub-nav links */
.product-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.product-subnav a {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    background: #eee;
    color: #333;
    border: 1px solid #ccc;
}

.product-subnav a:hover,
.product-subnav a.active {
    background: #0a4595;
    color: #fff;
    border-color: #0a4595;
}

/* ---- 10. Footer ----------------------------------------- */
.site-footer {
    background: #f5f5f5;
    padding: 20px 0 10px;
    margin-top: 40px;
    border-top: 1px solid #ddd;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-copy {
    font-size: 11px;
    color: #666;
}

.footer-credit {
    font-size: 11px;
    color: #666;
}

.footer-credit a {
    text-decoration: none;
    color: #f00;
}

/* ---- 11. Forms ------------------------------------------ */
.contact-form-wrap { max-width: 700px; margin: 0 auto; }

input, textarea, select {
    background: #eee;
    margin-bottom: 10px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 8px 10px;
    color: #111;
    border: 1px solid #ccc;
    border-radius: 2px;
}

label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: bold;
    color: #444;
}

button[type="submit"],
input[type="submit"] {
    background: #0a4595;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    font-size: 14px;
    border-radius: 2px;
    width: auto;
}

button[type="submit"]:hover,
input[type="submit"]:hover { background: #063070; }

label.error {
    font-size: 10px !important;
    color: #c8707b !important;
    line-height: 1;
    margin-bottom: 5px;
}

input.error, textarea.error, select.error { background: #feddd9; }

/* Contact info box */
.contact-info-box {
    background: #f0f5fb;
    border-left: 4px solid #0a4595;
    padding: 20px;
    margin-bottom: 20px;
}

.contact-info-box h3 {
    color: #0a4595;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.contact-info-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}

.contact-info-row .label-col {
    width: 130px;
    flex-shrink: 0;
    font-weight: bold;
    color: #555;
}

/* ---- 12. Utilities -------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-upper  { text-transform: uppercase; }
.color-blue  { color: #0a4595; }
.color-purple { color: #463385; }
.color-light-blue { color: #778cb8; }
.mt-10  { margin-top: 10px; }
.mt-20  { margin-top: 20px; }
.mt-30  { margin-top: 30px; }
.mb-10  { margin-bottom: 10px; }
.mb-20  { margin-bottom: 20px; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Under construction notice */
.under-construction {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 22px;
}

/* Project image gallery */
.project-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.project-gallery img {
    width: calc(25% - 8px);
    min-width: 150px;
    border: 1px solid #ddd;
}

/* ---- 13. Responsive ------------------------------------- */
@media (max-width: 1024px) {
    .header-logo img { max-width: 300px; }
}

@media (max-width: 768px) {
    .header-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .header-logo img { max-width: 250px; }

    .nav { display: none; }

    .page-inner { padding: 15px; }

    .project-gallery img { width: calc(50% - 5px); }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-info-row { flex-direction: column; gap: 2px; }
    .contact-info-row .label-col { width: auto; }
}

@media (max-width: 480px) {
    .hpthumbtitle { font-size: 22px; }
    .ptitle { font-size: 20px; }
    .project-gallery img { width: 100%; }
}