/*
Theme Name: Kyere Offline Store
Theme URI:  https://example.com/
Author:     Automated Assistant
Description: Minimal WooCommerce-compatible theme used to temporarily disable purchasing and cart UI while site is under construction.
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: kyere-offline-store
Tags: ecommerce, woocommerce, minimal
*/

/* Basic reset so the theme is usable immediately */
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#222;background:#fff;}
a{color:#0073aa;text-decoration:none;}
header,footer{padding:20px;background:#f7f7f7;}
.site-content{padding:20px;}

/* Header layout: left menu, centered logo, right icons */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #eee;
}
.site-header .header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
}
.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
}
.header-left { flex:1; }
/* Central block width as percentage; adjust as needed (30% here) */
.header-center { flex: 0 0 18% !important; max-width: 18% !important; justify-content:center; }
.header-right { flex:1; justify-content:flex-end; gap:18px; }

/* Primary menu */
.primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 15px;
}
.primary-menu li { display:inline-block; }
.primary-menu li a { color:#222; text-decoration:none; display:inline-block; padding:6px 0; }
.primary-menu li a:hover { color:#0073aa; }

/* Branding */
.site-branding a { font-family: 'Poppins', Arial, Helvetica, sans-serif; font-weight:600; font-size:20px; color:#111; text-decoration:none; display:block; text-align:center; }

/* Header icons (non-clickable) */
.header-icon {
  display:flex;
  align-items:center;
  gap:8px;
  color:#444;
  opacity:0.95;
}
.header-icon svg { width:20px;height:20px;fill:currentColor; display:block; }
.header-icon .icon-label { font-size:13px; color:#666; display:none; }

/* Ensure icons do not scale unexpectedly (override theme/global rules) */
.header-right .header-icon {
  flex: 0 0 auto;
  width: auto;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-right .header-icon svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 32px;
  max-height: 32px;
  display: block;
}
.header-right .header-icon svg * {
  vector-effect: non-scaling-stroke;
}
/* Ensure fallback menus (wp_page_menu) are also styled */
.main-navigation ul,
.main-navigation .menu,
.main-navigation .primary-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 24px !important;
  align-items: center !important;
}
.main-navigation ul li,
.main-navigation .menu li,
.main-navigation .primary-menu li {
  display: inline-block !important;
}
.main-navigation ul li a,
.main-navigation .menu li a,
.main-navigation .primary-menu li a {
  color: #222 !important;
  text-decoration: none !important;
  padding: 6px 0 !important;
  display: inline-block !important;
  font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
}
.main-navigation ul li a:hover,
.main-navigation .menu li a:hover,
.main-navigation .primary-menu li a:hover {
  color: #0073aa !important;
}

/* Defensive: some themes set svg {width:100%} globally — override it inside header */
.site-header svg {
  width: auto !important;
  height: auto !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

/* Ensure left navigation displays inline and items have small gaps */
.header-left .main-navigation { display: block !important; }
.header-left .main-navigation ul,
.header-left .main-navigation .menu,
.header-left .main-navigation .primary-menu {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.header-left .main-navigation li {
  display: inline-block !important;
  margin: 0 !important;
}
.header-left .main-navigation a {
  padding: 6px 8px !important;
  white-space: nowrap;
  font-size: 15px !important;
}

/* Center branding */
.header-center { text-align: center; }
.site-branding { display: inline-block; }
/* Logo image sizing */
.site-branding img {
  /* Make logo scale to center block */
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  max-height: 60px; /* keep reasonable cap */
}

/* Slightly smaller logo on small screens */
@media (max-width:800px) {
  .site-branding img {
    max-height: 40px;
  }
  .site-header .header-center { width: 160px; }
}

/* Banner slider styles */
.kyere-banner-slider {
  /* Full-bleed banner: stretch to viewport width and remove surrounding gaps */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw + 0px);
  margin-right: calc(-50vw + 0px);
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
.kyere-banner-slides { position: relative; display:block; }
.kyere-banner-slide { display: none; width:100%; }
.kyere-banner-slide.active { display:block; }
.kyere-banner-slide img { width:100%; height:auto; display:block; }
.kyere-banner-prev, .kyere-banner-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color:#fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 20;
}
.kyere-banner-prev { left: 12px; }
.kyere-banner-next { right: 12px; }
.kyere-banner-dots { position: absolute; left:50%; transform:translateX(-50%); bottom:12px; z-index:20; display:flex; gap:8px; }
.kyere-banner-dot { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.6); border:none; cursor:pointer; }
.kyere-banner-dot.active { background: #fff; box-shadow:0 0 0 3px rgba(0,0,0,0.08); }

@media (max-width:800px) {
  .kyere-banner-prev, .kyere-banner-next { padding:6px 10px; }
  .kyere-banner-dots { bottom:8px; }
}

/* Remove default padding around main content for banner area */
.content-area { padding: 0; }

/* Remove gap between header and banner */
.site-header { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.site-content, main.site-content, .content-area { padding-top: 0 !important; margin-top: 0 !important; }
.kyere-banner-slider { margin-top: 0 !important; }

/* Responsive */
@media (max-width:800px) {
  .header-container { padding:10px; }
  .primary-menu { gap:12px; font-size:14px; }
  .header-center { width: 140px; }
  .header-icon .icon-label { display:none; }
}