/*
Theme Name: Astra Child - Hilman Sport
Theme URI: https://hilmansport.com/
Description: Child theme for Hilman Sport - Oswald + Sora readable headings, no Spectra, core blocks only. Includes top bar fix for Astra Free, sticky header, logo variants, WhatsApp icons. Patterns included.
Author: Hilman Sport Team
Template: astra
Version: 1.0.0
Text Domain: astra-child-hilman
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Sora:wght@400;500;600&display=swap');

/* Base fonts */
body, .font-sora { font-family: 'Sora', sans-serif !important; }

/* --- MAIN CUSTOM CSS --- */
/* Hilman Sport - Custom CSS - Astra + Core Blocks Only - No Spectra
   Add this to: Appearance > Customize > Additional CSS 
   OR to your child theme style.css
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Sora:wght@400;500;600&display=swap');

/* Base fonts */
body, .font-sora { font-family: 'Sora', sans-serif !important; }
.font-heading, h1.font-heading, h2.font-heading, h3.font-heading, h4.font-heading,
.wp-block-heading.is-style-oswald {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Skew effect for buttons and logo bars */
.skew { transform: skewX(-12deg); }
.skew-inner { transform: skewX(12deg); display: inline-block; }

/* Slider - fallback if you use my old HTML slider instead of Smart Slider 3 */
#tkd-astra-slider .tkd-viewport{position:relative;height:520px;overflow:hidden;background:#111;border-left:8px solid #E31E24;border-right:8px solid #0B3D91}
#tkd-astra-slider .tkd-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;pointer-events:none}
#tkd-astra-slider .tkd-slide.active{opacity:1;pointer-events:auto;z-index:2}
#tkd-astra-slider .tkd-slide img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
#tkd-astra-slider .tkd-caption{position:absolute;left:4.5%;bottom:13%;z-index:3;color:#fff;max-width:620px}
#tkd-astra-slider .tkd-badge{display:inline-block;background:#E31E24;color:#fff;padding:6px 14px;font-size:11px;letter-spacing:1.8px;font-weight:700;transform:skew(-10deg);font-family:'Sora',sans-serif}
#tkd-astra-slider .tkd-badge b{display:inline-block;transform:skew(10deg)}
#tkd-astra-slider .tkd-caption h2{font-family:'Oswald',sans-serif!important;font-weight:700!important;font-size:52px!important;line-height:0.95!important;text-transform:uppercase}
#tkd-astra-slider .tkd-dots{position:absolute;right:20px;bottom:20px;z-index:5;display:flex;gap:9px}
#tkd-astra-slider .tkd-dot{width:32px;height:6px;background:rgba(255,255,255,.35);border:0;transform:skew(-20deg);cursor:pointer;transition:.3s}
#tkd-astra-slider .tkd-dot.active{background:#E31E24;width:44px}

/* Category cards - fixes your DOBOK screenshot */
.wp-block-columns .wp-block-column.has-border-color {
  border: 1px solid rgba(0,0,0,0.1) !important;
  padding: 22px !important;
  background: #fff;
  transition: all 0.2s ease;
}
.wp-block-columns .wp-block-column.has-border-color:hover {
  border-color: #E31E24 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.wp-block-columns .wp-block-column h3 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
  margin-top: 12px !important;
  text-transform: uppercase;
  font-size: 18px !important;
}
/* This fixes the tight letter spacing you reported */
.wp-block-columns .wp-block-column p.has-contrast-2-color {
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  font-weight: 500;
}

/* Why section - fixes invisible dark blue on black */
.wp-block-group.has-black-background-color h4 {
  color: #FFFFFF !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  font-size: 14px !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
}
.wp-block-group.has-black-background-color p {
  color: rgba(255,255,255,0.78) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.015em !important;
}

/* CTA - fixes HUBUNGI WHATSAPP line-height crash */
.wp-block-group.has-black-background-color h2 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase;
}

/* Skew buttons - your LIHAT PRODUK */
.wp-block-button .wp-block-button__link {
  transform: skewX(-12deg);
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.wp-block-button .wp-block-button__link:hover {
  background-color: #E31E24 !important;
  color: #fff !important;
}

/* Fix inner text un-skew */
.wp-block-button__link {
  display: inline-block;
}
.wp-block-button__link::before {
  content: '';
}

/* Astra Menu Styling - for your menu question */
.main-header-menu .menu-link, .main-header-menu a {
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
.main-header-menu .current-menu-item > a {
  color: #111 !important;
  border-bottom: 2px solid #E31E24 !important;
}

/* Top bar - if you use Astra Above Header */
.ast-above-header {
  background: #111 !important;
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Mobile */
@media(max-width:768px){
  #tkd-astra-slider .tkd-viewport{height:380px!important}
  #tkd-astra-slider .tkd-caption h2{font-size:32px!important}
}


/* --- EXTRA ICONS + LOGO --- */
/* Hilman Sport - Extra CSS for Icons + Logo variants + Top Bar
   Add to Appearance > Customize > Additional CSS after main hilman-sport-custom.css
*/

/* Logo variants - client uses black on white OR white on dark */
.logo-black-on-white {
  filter: none;
}
.logo-white-on-dark {
  filter: brightness(0) invert(1);
}
.logo-single-color-blue {
  filter: brightness(0) saturate(100%) invert(21%) sepia(98%) saturate(2340%) hue-rotate(203deg) brightness(95%) contrast(101%);
}

/* WhatsApp icon - pure CSS, no extra plugin */
.has-whatsapp-icon::before {
  content: "💬";
  margin-right: 6px;
  font-style: normal;
}

/* Font icons using Dashicons (already in WordPress) */
.hilman-icon {
  font-family: dashicons;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Top bar with icon - copy-paste version for Astra HTML element */
.hilman-top-bar {
  background: #111;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hilman-top-bar a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hilman-top-bar svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* WhatsApp floating button - optional nice to have */
.hilman-wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 999;
  text-decoration: none;
  font-size: 28px;
}
.hilman-wa-float:hover {
  background: #128C7E;
  transform: scale(1.05);
}


.hilman-top-bar-free {
  background:#111; color:#fff; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:8px;
  padding:8px 16px; font-family:'Sora',sans-serif; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; width:100%;
}
.hilman-top-bar-free a { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }

/* Sticky menu WITHOUT Astra Pro */
header.site-header, #masthead, .ast-primary-header-bar {
  position: sticky !important;
  top: 0; z-index: 999;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}