/*
 Theme Name: Astra Child
 Template: astra
 Version: 1.0.0
 Description: Hootuo child theme — red #D92B2B + navy #1a2744
*/

/* === Global CSS Variables === */
:root {
  --color-red:        #D92B2B;
  --color-navy:       #1a2744;
  --color-white:      #ffffff;
  --color-gray-light: #f5f7fa;
  --color-gray-border:#e5e5e5;
  --color-text-muted: #888888;
  --color-text-body:  #333333;
  --font-main:        'Inter', sans-serif;
}

/* === Base Overrides === */
body {
  font-family: var(--font-main);
  color: var(--color-text-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--color-navy);
  font-weight: 700;
}

a { color: var(--color-navy); }
a:hover { color: var(--color-red); }

/* === Navigation === */
.main-header-bar {
  border-bottom: 2px solid var(--color-red);
}

.site-logo .custom-logo {
  max-height: 40px;
}

/* === CTA Button === */
.btn-cta {
  background: var(--color-red);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}
.btn-cta:hover {
  background: var(--color-navy);
  color: #fff !important;
}

.btn-outline {
  border: 2px solid var(--color-navy);
  color: var(--color-navy) !important;
  padding: 8px 22px;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover {
  background: var(--color-navy);
  color: #fff !important;
}

/* === Section Label === */
.section-label {
  font-size: 0.75em;
  font-weight: 700;
  color: var(--color-red);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

/* === Hero (navy background) === */
.hero-navy {
  background: var(--color-navy);
  color: #fff;
  padding: 80px 24px;
  text-align: center;
}
.hero-navy h1, .hero-navy h2 {
  color: #fff;
}
.hero-navy p {
  color: #aab4cc;
  max-width: 600px;
  margin: 0 auto 24px;
}

/* === Product Card === */
.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-top: 3px solid var(--color-red);
  border-radius: 6px;
  padding: 24px;
}
.product-card h3 { margin-top: 0; }
.product-card .card-category {
  font-size: 0.75em;
  color: var(--color-red);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* === Hootuo Cloud Banner === */
.cloud-banner {
  background: var(--color-red);
  color: #fff;
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cloud-banner h3 { color: #fff; margin: 0 0 4px; }
.cloud-banner p { margin: 0; opacity: 0.9; }
.btn-cloud {
  background: #fff;
  color: var(--color-red) !important;
  padding: 10px 20px;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* === Footer === */
.site-footer {
  background: var(--color-navy) !important;
  color: #aab4cc;
}
.site-footer a { color: #aab4cc; }
.site-footer a:hover { color: #fff; }

/* === Language Toggle === */
.lang-toggle {
  font-size: 0.85em;
  border: 1px solid var(--color-gray-border);
  padding: 3px 10px;
  border-radius: 3px;
  color: var(--color-navy);
  text-decoration: none;
}

/* === Responsive === */
@media (max-width: 768px) {
  .hero-navy { padding: 48px 16px; }
  .cloud-banner { flex-direction: column; text-align: center; }
}

/* === Hide page title on front page === */
.home .entry-header,
.home .ast-page-header-wrap,
.page-id-9 .entry-header,
.page-id-9 .ast-page-header-wrap {
  display: none !important;
}

/* === Hide title on static front page === */
.home .entry-title,
.home h1.entry-title {
  display: none !important;
}