/*
  Theme Name:   IASRE Japan 2026
  Theme URI:    https://iasre-japan.com
  Description:  Premium dark child theme for IASRE Japan — DIVI 4
  Author:       IASRE Japan
  Author URI:   https://iasre-japan.com
  Template:     Divi
  Version:      1.0.1
  Text Domain:  iasre-japan
*/

/* ============================================
   NOTE ON SCOPING
   ============================================
   Rules prefixed with body:not(.et-fb) apply only
   to the live site — not inside the Divi Visual
   Builder. This prevents the site's dark theme
   and typography overrides from leaking into
   Divi's admin modals, settings panels, and
   editor chrome.

   Class-scoped rules (.dark-card, .et_pb_code_inner,
   etc.) are left unscoped so styled content still
   renders properly while editing.
   ============================================ */


/* ============================================
   1. CSS VARIABLES — Brand Foundation
   ============================================ */
:root {
  /* Brand Colours */
  --red: #e02b20;
  --red-dark: #b81f16;
  --red-glow: rgba(224, 43, 32, 0.25);
  --gold: #e09900;
  --gold-light: #f0b830;
  --gold-glow: rgba(224, 153, 0, 0.2);

  /* Neutrals */
  --black: #0a0a0a;
  --dark: #111111;
  --dark-surface: #1a1a1a;
  --dark-card: #161616;
  --dark-border: rgba(255,255,255,0.06);
  --text-primary: #f5f5f5;
  --text-secondary: rgba(255,255,255,0.55);
  --text-muted: rgba(255,255,255,0.35);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  /* Medal Colours */
  --bronze: #cd7f32;
  --silver: #c0c0c0;
}


/* ============================================
   2. GLOBAL BODY & PAGE OVERRIDES (scoped)
   ============================================ */
body:not(.et-fb),
body:not(.et-fb) #page-container {
  background-color: var(--black) !important;
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Remove DIVI default section padding — live site only */
body:not(.et-fb) .et_pb_section {
  padding: 0 !important;
}

/* Named section backgrounds (class-scoped, safe for VB) */
.et_pb_section.dark-bg {
  background-color: var(--dark) !important;
}

.et_pb_section.black-bg {
  background-color: var(--black) !important;
}

/* Container width — live site only */
body:not(.et-fb) .et_pb_row {
  max-width: 1200px !important;
  padding: 0 clamp(20px, 4vw, 40px) !important;
}


/* ============================================
   3. NAVIGATION OVERRIDES (scoped)
   ============================================ */
body:not(.et-fb) #main-header,
body:not(.et-fb) #main-header.et-fixed-header {
  background-color: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  box-shadow: none !important;
}

/* Logo */
body:not(.et-fb) #logo {
  height: 38px !important;
  width: auto !important;
}

/* Nav links */
body:not(.et-fb) #top-menu li a {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

body:not(.et-fb) #top-menu li a:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body:not(.et-fb) #top-menu li.current-menu-item a {
  color: var(--gold) !important;
}

/* CTA Button in Nav — add class "nav-cta" to the menu item */
body:not(.et-fb) #top-menu li.nav-cta a {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: 8px 22px !important;
}

body:not(.et-fb) #top-menu li.nav-cta a:hover {
  background: var(--red-dark) !important;
  box-shadow: 0 4px 20px var(--red-glow) !important;
}

/* Mobile menu */
body:not(.et-fb) .mobile_nav .mobile_menu_bar::before {
  color: var(--text-primary) !important;
}

body:not(.et-fb) .et_mobile_menu {
  background: var(--dark) !important;
  border: 1px solid var(--dark-border) !important;
}

body:not(.et-fb) .et_mobile_menu li a {
  color: var(--text-secondary) !important;
  border-color: var(--dark-border) !important;
}


/* ============================================
   4. TYPOGRAPHY (scoped — this was a major leak)
   ============================================ */
/* Display Headings — Bebas Neue */
body:not(.et-fb) h1,
body:not(.et-fb) h2,
body:not(.et-fb) h3,
body:not(.et-fb) .et_pb_module_header,
body:not(.et-fb) .et_pb_toggle_title {
  font-family: var(--font-display) !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
}

body:not(.et-fb) h1 { font-size: clamp(3rem, 7vw, 5.5rem) !important; line-height: 0.95 !important; }
body:not(.et-fb) h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important; line-height: 1 !important; }
body:not(.et-fb) h3 { font-size: 1.5rem !important; letter-spacing: 0.06em !important; }
body:not(.et-fb) h4 { font-family: var(--font-display) !important; font-size: 1.15rem !important; letter-spacing: 0.08em !important; color: #fff !important; }

/* Body text */
body:not(.et-fb) p,
body:not(.et-fb) li,
body:not(.et-fb) span,
body:not(.et-fb) .et_pb_text_inner {
  font-family: var(--font-body) !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

/* Gold section labels */
.section-label,
.et_pb_text.section-label .et_pb_text_inner {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

/* Red accent text */
.accent,
.text-red {
  color: var(--red) !important;
}

.text-gold {
  color: var(--gold) !important;
}


/* ============================================
   5. BUTTONS (safe — Divi-class-scoped)
   ============================================ */
.et_pb_button,
.et_pb_button:after {
  font-family: var(--font-body) !important;
}

/* Primary Button */
.et_pb_button.btn-primary,
.et_pb_button {
  background-color: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 24px rgba(224, 43, 32, 0.3) !important;
  transition: all 0.35s ease !important;
}

.et_pb_button:hover,
.et_pb_button.btn-primary:hover {
  background-color: var(--red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(224, 43, 32, 0.4) !important;
}

/* Secondary / Outline Button */
.et_pb_button.btn-secondary {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.et_pb_button.btn-secondary:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 20px var(--gold-glow) !important;
}

/* Remove DIVI default button arrow */
.et_pb_button:after {
  display: none !important;
}


/* ============================================
   6. DARK CARD COMPONENT (safe — class-scoped)
   Use CSS class "dark-card" on any DIVI module
   ============================================ */
.dark-card,
.et_pb_blurb.dark-card,
.et_pb_text.dark-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  padding: 36px 28px !important;
  transition: all 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.dark-card:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-3px) !important;
}

/* Gradient top border on hover */
.dark-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--red), var(--gold)) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.dark-card:hover::before {
  opacity: 1 !important;
}


/* ============================================
   7. BLURB MODULE OVERRIDES (class-scoped)
   ============================================ */
.et_pb_blurb.dark-card .et_pb_blurb_container h4 {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
}

.et_pb_blurb.dark-card .et_pb_blurb_description {
  font-size: 0.88rem !important;
  color: var(--text-secondary) !important;
}

/* Icon styling */
.et_pb_blurb.dark-card .et_pb_main_blurb_image {
  margin-bottom: 18px !important;
}

.et_pb_blurb.dark-card .et-pb-icon {
  font-size: 1.4rem !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(224, 43, 32, 0.08) !important;
  border: 1px solid rgba(224, 43, 32, 0.12) !important;
  color: var(--red) !important;
}


/* ============================================
   8. IMAGE MODULE — Champion/Hotel Cards
   ============================================ */
.et_pb_image.image-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--dark-border) !important;
  transition: all 0.4s ease !important;
}

.et_pb_image.image-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.et_pb_image.image-card img {
  transition: transform 0.6s ease !important;
}

.et_pb_image.image-card:hover img {
  transform: scale(1.05) !important;
}


/* ============================================
   9. CTA BANNER COMPONENT
   ============================================ */
.et_pb_section.cta-banner > .et_pb_row {
  background: linear-gradient(135deg, rgba(224, 43, 32, 0.12) 0%, rgba(224, 153, 0, 0.06) 100%) !important;
  border: 1px solid rgba(224, 43, 32, 0.15) !important;
  border-radius: 24px !important;
  padding: clamp(50px, 7vw, 70px) clamp(30px, 6vw, 70px) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.et_pb_section.cta-banner > .et_pb_row::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}


/* ============================================
   10. CONTACT FORM OVERRIDES (class-scoped)
   ============================================ */
.et_pb_contact_form_container {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 20px !important;
  padding: 40px 36px !important;
  position: relative !important;
  overflow: hidden !important;
}

.et_pb_contact_form_container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--red), var(--gold)) !important;
}

.et_pb_contact_form_container .et_pb_contact_form label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.et_pb_contact_form .input,
.et_pb_contact_form textarea,
.et_pb_contact_form select {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
}

.et_pb_contact_form .input:focus,
.et_pb_contact_form textarea:focus {
  border-color: var(--red) !important;
  background: rgba(224, 43, 32, 0.03) !important;
  box-shadow: 0 0 0 3px rgba(224, 43, 32, 0.08) !important;
  outline: none !important;
}

.et_pb_contact_form .input::placeholder,
.et_pb_contact_form textarea::placeholder {
  color: var(--text-muted) !important;
}


/* ============================================
   11. PAGE HERO (class-scoped)
   Add class "page-hero" to the first section
   ============================================ */
.et_pb_section.page-hero {
  padding: 180px 0 80px !important;
  text-align: center !important;
  background-color: var(--black) !important;
  position: relative !important;
  overflow: hidden !important;
}

.et_pb_section.page-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(224, 43, 32, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 60% 70%, rgba(224, 153, 0, 0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.et_pb_section.page-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, black 20%, transparent 70%) !important;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, black 20%, transparent 70%) !important;
  pointer-events: none !important;
}


/* ============================================
   12. GOOGLE MAP OVERRIDES
   ============================================ */
.et_pb_map_container {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--dark-border) !important;
}

.et_pb_map_container .gm-style {
  filter: brightness(0.8) contrast(1.1) saturate(0.3) !important;
  transition: filter 0.4s ease !important;
}

.et_pb_map_container:hover .gm-style {
  filter: brightness(0.9) contrast(1.05) saturate(0.5) !important;
}


/* ============================================
   13. SPONSOR MARQUEE
   ============================================ */
.iasre-marquee {
  padding: 40px 0;
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
  background: var(--dark);
  overflow: hidden;
}

.iasre-marquee-label {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
  font-family: var(--font-body);
}

.iasre-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.iasre-marquee-wrapper::before,
.iasre-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.iasre-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--dark), transparent);
}

.iasre-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--dark), transparent);
}

.iasre-marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: iasreMarquee 20s linear infinite;
}

.iasre-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes iasreMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.iasre-sponsor-item {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.iasre-sponsor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.4;
  flex-shrink: 0;
}

.iasre-sponsor-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: 0.15em;
  color: var(--text-muted);
  transition: color 0.3s ease;
  cursor: default;
}

.iasre-sponsor-name:hover {
  color: var(--gold);
}


/* ============================================
   14. FOOTER OVERRIDES (scoped)
   ============================================ */
body:not(.et-fb) #main-footer {
  background-color: var(--dark) !important;
  border-top: 1px solid var(--dark-border) !important;
}

body:not(.et-fb) #footer-widgets .footer-widget {
  color: var(--text-secondary) !important;
}

body:not(.et-fb) #footer-widgets h4.widgettitle {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
}

body:not(.et-fb) #footer-widgets .footer-widget li a {
  color: var(--text-secondary) !important;
  transition: color 0.3s ease !important;
}

body:not(.et-fb) #footer-widgets .footer-widget li a:hover {
  color: var(--gold) !important;
}

body:not(.et-fb) #footer-bottom {
  border-top: 1px solid var(--dark-border) !important;
  background: transparent !important;
}

body:not(.et-fb) #footer-info,
body:not(.et-fb) #footer-bottom a {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
}


/* ============================================
   15. AMBIENT GLOW UTILITY
   Add class "glow-red" or "glow-gold" to sections
   ============================================ */
.et_pb_section.glow-red::before {
  content: '' !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(224,43,32,0.06) 0%, transparent 70%) !important;
  top: -200px !important;
  right: -200px !important;
  pointer-events: none !important;
}

.et_pb_section.glow-gold::before {
  content: '' !important;
  position: absolute !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(224,153,0,0.04) 0%, transparent 70%) !important;
  bottom: -150px !important;
  left: -150px !important;
  pointer-events: none !important;
}


/* ============================================
   16. UTILITY CLASSES
   ============================================ */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: 16px !important; }
.mb-md { margin-bottom: 32px !important; }
.mb-lg { margin-bottom: 60px !important; }
.rounded { border-radius: 16px !important; overflow: hidden !important; }

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}


/* ============================================
   17. CODE MODULE HEADING OVERRIDES (class-scoped)
   These stay unscoped so styled code module content
   renders properly while editing in VB.
   ============================================ */
.et_pb_code_inner h1,
.et_pb_code_inner h1[class] {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
}

.et_pb_code_inner h2,
.et_pb_code_inner h2[class] {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
}

.et_pb_code_inner h3,
.et_pb_code_inner h3[class] {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
}

.et_pb_code_inner h4,
.et_pb_code_inner h4[class] {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
}

/* Red accent text inside code modules */
.et_pb_code_inner .accent,
.et_pb_code_inner .red,
.et_pb_code_inner h1 .accent,
.et_pb_code_inner h1 .red,
.et_pb_code_inner h2 .accent,
.et_pb_code_inner h2 .red,
.et_pb_code_inner h1 span.accent,
.et_pb_code_inner h1 span.red,
.et_pb_code_inner h2 span.accent,
.et_pb_code_inner h2 span.red {
  color: #e02b20 !important;
}

/* Body text inside code modules */
.et_pb_code_inner p {
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Links inside code modules */
.et_pb_code_inner a {
  color: inherit;
  text-decoration: none;
}