/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

:root {
  --lol-gold: #C8AA6E;
  --lol-gold-light: #F0E6D2;
  --lol-gold-hover: #D3BB8B;
  --lol-navy: #0A1428;
  --lol-navy-light: #161F32;
  --lol-blue: #0AC8B9;
  --lol-white: #FFFFFF;
  --lol-gray: #A09B8C;
  --font-heading: "Cinzel", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--lol-white);
  background-color: var(--lol-navy);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--lol-gold);
  letter-spacing: 0.5px;
}

a {
  color: var(--lol-blue);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--lol-gold);
}

.elementor-button {
  background-color: var(--lol-gold) !important;
  color: var(--lol-navy) !important;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.elementor-button:hover {
  background-color: var(--lol-gold-hover) !important;
  transform: translateY(-2px);
}

/* Card Styling */
.lol-card {
  background: var(--lol-navy-light);
  border: 1px solid rgba(200, 170, 110, 0.2);
  border-radius: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.lol-card:hover {
  transform: translateY(-4px);
  border-color: var(--lol-gold);
}

/* Author Credibility Box */
.author-credibility-box {
  background: linear-gradient(135deg, var(--lol-navy-light), var(--lol-navy));
  border: 1px solid rgba(200, 170, 110, 0.4);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
}

.author-avatar {
  border: 2px solid var(--lol-gold);
  border-radius: 50%;
}

/* Table of Contents */
.toc-container {
  background: var(--lol-navy-light);
  border-left: 3px solid var(--lol-gold);
  padding: 20px;
}

.toc-container a {
  color: var(--lol-gray);
}

.toc-container a:hover {
  color: var(--lol-gold);
}

/* Header Styling */
header.site-header,
.elementor-location-header {
  background-color: var(--lol-navy) !important;
  border-bottom: 1px solid var(--lol-gold);
}

.elementor-nav-menu .elementor-item {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--lol-gold-light) !important;
  transition: color 0.2s ease;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--lol-gold) !important;
}

/* Blog Post Styling */
.elementor-post__title,
.entry-title {
  font-family: var(--font-heading);
  color: var(--lol-gold);
}

.elementor-post__excerpt,
.entry-content {
  color: var(--lol-white);
}

.elementor-post__meta-data {
  color: var(--lol-gray);
}

/* Related Posts Grid */
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* ===========================================
   AFFILIATE PRODUCT CARDS - Shortcode Styles
   =========================================== */
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 0 0;
}

@media (max-width: 768px) {
  .affiliate-grid {
    grid-template-columns: 1fr;
  }
}

.affiliate-card-link {
  background: linear-gradient(180deg, #1a2740 0%, #0f1a2a 100%);
  border: 1px solid rgba(200, 170, 110, 0.2);
  border-radius: 10px;
  padding: 20px 16px;
  text-decoration: none !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  min-height: 140px;
  justify-content: center;
}

.affiliate-card-link:hover {
  border-color: var(--lol-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.affiliate-card-img {
  max-width: 80px;
  margin-bottom: 12px;
}

.affiliate-card-title {
  color: #F0E6D2;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

.affiliate-card-desc {
  color: #8a857f;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.3;
}

.affiliate-card-btn {
  background: linear-gradient(135deg, #0AC8B9 0%, #089a8f 100%);
  color: #0A1428 !important;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  margin-top: auto;
  transition: all 0.2s ease;
}

.affiliate-card-link:hover .affiliate-card-btn {
  background: linear-gradient(135deg, #C8AA6E 0%, #a8905a 100%);
}

/* ===========================================
   HIDE AUTHOR BOX - All Posts
   =========================================== */
/* Hide author boxes with Gravatar images */
.entry-content > div:has(img[src*="gravatar.com"]),
.elementor-widget-theme-post-content > div:has(img[src*="gravatar.com"]),
div:has(> img[src*="gravatar.com"][alt*="Brendon"]) {
  display: none !important;
}

/* Hide author boxes injected by Make.com */
div[style*="display: flex"][style*="align-items"]:has(img[style*="border-radius: 50%"]):has(p) {
  display: none !important;
}

/* Target author bio boxes by content pattern */
.author-bio,
.post-author-box,
.elementor-author-box,
.wp-block-post-author {
  display: none !important;
}

/* Footer Styling */
footer.site-footer,
.elementor-location-footer {
  background-color: var(--lol-navy) !important;
  border-top: 1px solid rgba(200, 170, 110, 0.3);
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .author-credibility-box {
    padding: 16px;
  }

  .toc-container {
    position: static !important;
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--lol-navy) 0%, var(--lol-navy-light) 100%);
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="rgba(200,170,110,0.03)" points="50,0 100,25 100,75 50,100 0,75 0,25"/></svg>');
  background-size: 60px;
  opacity: 0.5;
}

.hero-headline {
  font-family: var(--font-heading);
  color: var(--lol-gold);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-subheadline {
  color: var(--lol-gray);
  font-size: 1.25rem;
  margin-bottom: 32px;
}

/* ===========================================
   HIDE AUTHOR CONTAINER - Remove from posts
   =========================================== */
.author-container,
.author-box-container,
.entry-content > div[style*="border-radius"][style*="padding"]:has(img[style*="border-radius: 50%"]),
.entry-content > div:has(> div > img[style*="border-radius: 50%"]):last-of-type {
  display: none !important;
}

/* Target the specific author box pattern from Make.com */
.entry-content > div[style*="background"]:has(img[alt*="Brendon"]) {
  display: none !important;
}

/* ===========================================
   IMPROVED AFFILIATE CARDS STYLING
   =========================================== */
/* Target the affiliate grid container */
.entry-content h2[style*="font-family"] + p + div[style*="display: grid"],
.entry-content div[style*="display: grid"][style*="gap: 16px"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  margin: 24px 0 !important;
}

/* Improved affiliate card styling */
.entry-content div[style*="display: grid"] > a[style*="background"] {
  background: linear-gradient(135deg, #161F32 0%, #0A1428 100%) !important;
  border: 1px solid rgba(200, 170, 110, 0.3) !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.entry-content div[style*="display: grid"] > a[style*="background"]:hover {
  border-color: #C8AA6E !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(200, 170, 110, 0.15) !important;
}

/* Product title in cards */
.entry-content div[style*="display: grid"] > a div[style*="color: #C8AA6E"],
.entry-content div[style*="display: grid"] > a div[style*="color: rgb(200, 170, 110)"] {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

/* Product description */
.entry-content div[style*="display: grid"] > a div[style*="color: #A09B8C"],
.entry-content div[style*="display: grid"] > a div[style*="color: rgb(160, 155, 140)"] {
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

/* Check Price button styling */
.entry-content div[style*="display: grid"] > a div[style*="color: #0AC8B9"],
.entry-content div[style*="display: grid"] > a div[style*="color: rgb(10, 200, 185)"] {
  background: linear-gradient(135deg, #0AC8B9 0%, #0397a7 100%) !important;
  color: #0A1428 !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-top: auto !important;
  transition: all 0.2s ease !important;
}

.entry-content div[style*="display: grid"] > a:hover div[style*="color: #0AC8B9"],
.entry-content div[style*="display: grid"] > a:hover div[style*="color: rgb(10, 200, 185)"] {
  background: linear-gradient(135deg, #C8AA6E 0%, #a8905a 100%) !important;
}

/* Affiliate section heading */
.entry-content h2:has(+ p + div[style*="display: grid"]) {
  font-family: "Cinzel", Georgia, serif !important;
  color: #C8AA6E !important;
  font-size: 1.5rem !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

/* Affiliate section intro text */
.entry-content h2 + p:has(+ div[style*="display: grid"]) {
  text-align: center !important;
  color: #A09B8C !important;
  margin-bottom: 24px !important;
}