/* local-fallback.css - Fallback styling untuk mirror internet-tabasco.com
   Memberikan struktur dasar header, menu, layout, warna, dan responsif
   agar tampilan "normal" meski theme CSS asli (kallyas) 404 di server.
*/

:root {
  --brand: #323264;
  --brand-light: #4a4a8a;
  --text: #333;
  --light: #f8f8f8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", "Play", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--brand-light); }

img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }

.container,
.siteheader-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

/* Header & Top bar */
#header.site-header,
.site-header {
  position: relative;
  z-index: 1000;
}

.site-header-top-wrapper {
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  padding: 6px 0;
}

.site-header-top-wrapper .kl-header-toptext {
  color: #fff;
}

.kl-top-header,
.site-header-main-wrapper {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.site-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.fxb-row { display: flex; }
.fxb { display: flex; align-items: center; }
.fxb-start-x { justify-content: flex-start; }
.fxb-center-x { justify-content: center; }
.fxb-end-x { justify-content: flex-end; }
.fxb-center-y { align-items: center; }

#logo-container {
  padding: 10px 0;
}
.site-logo img { max-height: 60px; width: auto; }

/* Mega Menu basic */
.mega-menu-wrap,
#mega-menu-main_navigation {
  width: 100%;
}

.mega-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.mega-menu > li > a {
  display: block;
  padding: 12px 15px;
  color: #222;
  font-weight: 600;
  font-size: 14px;
}

.mega-menu > li > a:hover {
  color: var(--brand);
  background: #f5f5f5;
}

.mega-menu-item-has-children > a:after {
  content: " ▾";
  font-size: 10px;
}

/* Sections & content */
.kl-section,
.section,
.page-section {
  padding: 40px 0;
}

.row { display: flex; flex-wrap: wrap; margin: -10px; }
.col-sm-5, .col-sm-7, [class^="col-"] {
  padding: 10px;
  flex: 1;
}
@media (max-width: 768px) {
  .row { flex-direction: column; }
  .col-sm-5, .col-sm-7 { flex: none; width: 100%; }
}

h1, h2, h3, h4 {
  color: var(--brand);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }

.kl-button,
.btn,
.button {
  display: inline-block;
  background: var(--brand);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s;
}
.kl-button:hover { background: var(--brand-light); text-decoration: none; }

/* Revslider / hero area */
.rev_slider_wrapper,
#rev_slider_1_1_wrapper {
  overflow: hidden;
}

/* Product / grid cards */
.product, .product-item, .item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 15px;
  background: #fff;
}

/* Footer / misc */
footer, .site-footer {
  background: #222;
  color: #ccc;
  padding: 30px 0;
  font-size: 13px;
}

/* Make the huge inline mega menu usable */
#mega-menu-main_navigation.mega-menu-horizontal > li {
  position: relative;
}

@media (max-width: 900px) {
  .mega-menu { flex-direction: column; }
  .site-header-main-wrapper .container { padding-top: 10px; }
}

/* Small utility */
.separator { height: 1px; background: #eee; margin: 8px 0; }
.kl-font-alt { font-family: "Play", sans-serif; }

/* Fix some common kallyas visibility */
.zn-animateInViewport { visibility: visible !important; }
.zn-res-menuwrapper { display: none; } /* hide mobile burger on desktop view */