/*
Theme Name: Gerrards Theme
Theme URI: https://gerrardsbullion.com
Description: Custom theme for Gerrards Bullion - hardcoded layouts
Author: GDLife Media
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: gerrards-theme
*/

/* === CSS Variables === */
:root {
  --gb-navy: #16284f;
  --gb-gold: #c9a962;
  --gb-text: #191919;
  --gb-gray: #f0f0f0;
  --gb-white: #ffffff;
  --gb-font-body: 'Montserrat', sans-serif;
  --gb-font-heading: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--gb-font-body);
  font-weight: 500;
  color: var(--gb-text);
  background: var(--gb-white);
}

/* === Live Prices Bar === */
.gb-prices-bar {
  background: var(--gb-navy);
  color: var(--gb-white);
  padding: 8px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.gb-prices-bar span {
  margin: 0 15px;
}

.gb-prices-bar .price {
  color: var(--gb-gold);
}

/* === Main Header === */
.gb-header-main {
  background: var(--gb-white);
  padding: 15px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.gb-logo-section {
  display: flex;
  flex-direction: column;
}

.gb-logo {
  font-family: var(--gb-font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--gb-text);
  text-decoration: none;
}

.gb-contact-info {
  font-size: 14px;
  color: var(--gb-text);
  margin-top: 5px;
}

.gb-contact-info a {
  color: var(--gb-text);
  text-decoration: none;
}

.gb-contact-info a:hover {
  text-decoration: underline;
}

/* === Search Box === */
.gb-search-box {
  flex: 1;
  max-width: 400px;
  margin: 0 40px;
}

.gb-search-box input {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: var(--gb-font-body);
}

.gb-search-box input:focus {
  outline: none;
  border-color: var(--gb-navy);
}

/* === Header Links === */
.gb-header-links {
  display: flex;
  align-items: center;
  gap: 25px;
}

.gb-header-links a {
  color: var(--gb-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.gb-header-links a:hover {
  text-decoration: underline;
}

/* === Navigation === */
.gb-nav {
  background: var(--gb-white);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 0 40px;
}

.gb-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.gb-nav li {
  position: relative;
}

.gb-nav a {
  display: block;
  padding: 15px 0;
  color: var(--gb-text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.gb-nav a:hover {
  color: var(--gb-navy);
}

.gb-nav .has-submenu > a::after {
  content: ' ▾';
  font-size: 12px;
}

/* Dropdown */
.gb-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--gb-white);
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
}

.gb-nav li:hover .submenu {
  display: block;
}

.gb-nav .submenu a {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.gb-nav .submenu a:hover {
  background: var(--gb-gray);
}

/* === Trust Bar === */
.gb-trust-bar {
  background: var(--gb-gray);
  padding: 15px 40px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.gb-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.gb-trust-item strong {
  display: block;
  font-size: 14px;
}

.gb-trust-item span {
  color: #666;
}

/* === Hero Section === */
.gb-hero {
  background: linear-gradient(135deg, #b8956c 0%, #8b7355 100%);
  color: var(--gb-white);
  text-align: center;
  padding: 60px 40px;
}

.gb-hero h1 {
  font-family: var(--gb-font-heading);
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 8px;
  margin: 0 0 15px;
}

.gb-hero p {
  font-size: 20px;
  margin: 0;
}

/* === Product Grid === */
.gb-products {
  background: linear-gradient(135deg, #b8956c 0%, #8b7355 100%);
  padding: 0 40px 60px;
}

.gb-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.gb-product-card {
  background: var(--gb-white);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
}

.gb-product-card img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.gb-product-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--gb-text);
}

.gb-product-card .price {
  font-size: 20px;
  color: #666;
  font-style: italic;
  margin-bottom: 15px;
}

.gb-product-card .price span {
  font-weight: 600;
}

.gb-btn {
  display: inline-block;
  background: var(--gb-navy);
  color: var(--gb-white);
  padding: 12px 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
}

.gb-btn:hover {
  background: #1e3a6e;
}

/* === Footer === */
.gb-footer {
  background: var(--gb-navy);
  color: var(--gb-white);
  padding: 40px;
  text-align: center;
}

/* === Responsive === */
@media (max-width: 768px) {
  .gb-header-main {
    flex-direction: column;
    text-align: center;
  }
  
  .gb-search-box {
    margin: 0;
    max-width: 100%;
  }
  
  .gb-nav ul {
    flex-direction: column;
    gap: 0;
  }
  
  .gb-nav a {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
  }
  
  .gb-trust-bar {
    flex-direction: column;
    align-items: center;
  }
  
  .gb-hero h1 {
    font-size: 32px;
    letter-spacing: 4px;
  }
}