@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Nanum+Myeongjo&display=swap');

/* =========================================== */
/* FONT SETUP - LIBRE BASKERVILLE FOR TITLES, NANUM MYEONGJO FOR BODY */
/* =========================================== */

/* BODY TEXT - Nanum Myeongjo */
html body {
  font-family: "Nanum Myeongjo", serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  
  --font-text-theme: "Nanum Myeongjo", serif !important;
  --font-text-size: 20px !important; /* Slightly larger for Nanum Myeongjo */
  font-size: 20px !important; /* MOBILE DEFAULT */
  line-height: 1.7 !important; /* Increased for better readability */
  letter-spacing: 0.01em !important; /* Slight letter spacing for clarity */

  /* Add custom property for bold weight */
  --bold-weight: 800 !important;
}

/* =========================================== */
/* SITE TITLE - Quality Piano Lessons - FIXED */
/* =========================================== */

/* Target ONLY the site title link */
.site-header-text,
a.site-header-text,
.site-header a.site-header-text {
  font-family: "Libre Baskerville", serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 1.3em !important; /* ← Increased to compensate for small caps */
  text-decoration: none !important;
  
  /* IMPROVED SMALL CAPS */
  font-variant: small-caps !important;
  font-feature-settings: "smcp" !important; /* More reliable small caps */
  letter-spacing: 0.02em !important; /* Slightly tighter */
  
  /* FIX VERTICAL ALIGNMENT */
  line-height: 1.1 !important; /* Tighter line-height */
  display: inline-block !important;
  vertical-align: bottom !important;
  position: relative !important;
  top: 0.1em !important; /* Adjust vertical position */
  
  /* TEXT SHADOW */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  
  /* COLOR VARIATION */
  color: var(--text-accent) !important;
  
  /* HOVER EFFECT */
  transition: all 0.3s ease !important;
}

/* Hover effect */
.site-header-text:hover,
a.site-header-text:hover {
  color: var(--interactive-accent) !important;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Desktop size - Compensate for small caps */
@media (min-width: 768px) {
  .site-header-text,
  a.site-header-text {
    font-size: 3.0em !important; /* ← Increased to appear same size as h1 */
    top: 0.05em !important; /* Less adjustment on desktop */
  }
}

/* =========================================== */
/* DESKTOP OVERRIDE - WITH ADJUSTED HEADINGS */
/* =========================================== */

@media (min-width: 768px) {
  html body {
    --font-text-size: 22px !important;
    font-size: 22px !important;
    line-height: 1.8 !important;
  }
  
  /* PAGE HEADINGS - 5% SMALLER than original */
  h1 { 
    font-size: 1.80em !important; /* ← 5% smaller than original 2.5em */
    line-height: 1.15 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
  }
  h2 { 
    font-size: 1.7em !important; /* ← 5% smaller than original 2em */
    line-height: 1.2 !important;
    margin-top: 1.3em !important;
    margin-bottom: 0.4em !important;
  }
  h3 { 
    font-size: 1.6em !important; /* ← 5% smaller than original 1.75em */
    line-height: 1.3 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.3em !important;
  }
  
  /* Blockquotes */
  blockquote {
    font-size: 1em !important;
    padding-left: 1.5rem !important;
    margin: 1.5em 0 !important;
  }
}

/* =========================================== */
/* DESKTOP OVERRIDE - Only if screen ≥768px   */
/* =========================================== */
@media (min-width: 768px) {
  html body {
    --font-text-size: 28px !important; /* DESKTOP */
    font-size: 28px !important; /* DESKTOP */
  }
}


/* =========================================== */
/* PUBLISHED CONTAINER SETTINGS               */
/* =========================================== */

.published-container {
  --page-width: 700px;
  --page-padding: 40px;
  --sidebar-left-width: 350px;
  --sidebar-right-width: 350px;
  --sidebar-left-border-width: 1px;
  --sidebar-right-border-width: 1px;
}

/* =========================================== */
/* SHARED BASE STYLES FOR ALL CUSTOM CALLOUTS */
/* =========================================== */
.published-container .callout[data-callout^="custom-"] {
  --callout-icon: none !important;
  
  /* Hide the entire title section */
  & > .callout-title {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Hide title elements */
  .callout-icon,
  .callout-title-inner {
    display: none !important;
  }
  
  /* Style the content */
  .callout-content {
    color: var(--text-normal) !important;
    font-style: normal !important;
    font-weight: 500 !important; /* Regular weight for callout text */
    padding: 8px 20px !important;
    margin: 0 !important;
    line-height: 1.5;
  }

  /* Bold text inside callouts */
  .callout-content strong,
  .callout-content b {
    font-weight: var(--bold-weight, 800) !important;
  }
  
  /* Border and spacing */
  border-left: 4px solid !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  border: 1px solid transparent !important;
}

/* Size variations */
.published-container .callout[data-callout="custom-dark-smaller"] .callout-content {
  font-size: 0.85em !important; /* 15% smaller */
}

.published-container .callout[data-callout="custom-dark-tiny"] .callout-content {
  font-size: 0.7em !important; /* 30% smaller */
}

/* =========================================== */
/* INDIVIDUAL CALLOUT COLOR VARIANTS          */
/* =========================================== */

.published-container .callout[data-callout="custom-blue"] {
  --callout-color: 59, 130, 246 !important;
  
  .callout-content {
    background-color: rgba(59, 130, 246, 0.08) !important;
  }
  
  border-left-color: rgba(59, 130, 246, 0.4) !important;
  border-color: rgba(59, 130, 246, 0.1) !important;
}

.published-container .callout[data-callout="custom-green"] {
  --callout-color: 34, 197, 94 !important;
  
  .callout-content {
    background-color: rgba(34, 197, 94, 0.08) !important;
  }
  
  border-left-color: rgba(34, 197, 94, 0.4) !important;
  border-color: rgba(34, 197, 94, 0.1) !important;
}

.published-container .callout[data-callout="custom-grey"] {
  --callout-color: 128, 128, 128 !important;
  
  .callout-content {
    background-color: rgba(128, 128, 128, 0.06) !important;
  }
  
  border-left-color: rgba(128, 128, 128, 0.3) !important;
  border-color: rgba(128, 128, 128, 0.08) !important;
}

/* Dark theme variants */
.published-container .callout[data-callout="custom-dark-regular"],
.published-container .callout[data-callout="custom-dark-smaller"],
.published-container .callout[data-callout="custom-dark-tiny"] {
  --callout-color: var(--interactive-accent) !important;
  
  .callout-content {
    background-color: var(--background-secondary) !important;
    color: var(--text-normal) !important;
  }
  
  border-left-color: var(--interactive-accent) !important;
  border-color: var(--background-modifier-border) !important;
}


/* FAQ question styling */
.published-container .callout[data-callout="custom-grey"] .faq-question {
  margin: 12px 0 !important;
  padding-left: 16px !important;
  border-left: 2px solid rgba(128, 128, 128, 0.2) !important;
}

.published-container .callout[data-callout="custom-grey"] .faq-question summary {
  cursor: pointer;
  font-weight: var(--bold-weight, 800) !important;
  margin-bottom: 8px !important;
  color: var(--text-normal) !important;
}

.published-container .callout[data-callout="custom-grey"] .faq-question summary:hover {
  color: var(--text-accent) !important;
}

.published-container .callout[data-callout="custom-grey"] .faq-question[open] summary {
  margin-bottom: 12px !important;
}

/* =========================================== */
/* TESTIMONIAL CALLOUT (Minimal Padding)      */
/* =========================================== */
.published-container .callout[data-callout="testimonial"] {
  --callout-icon: none !important;
  border-left: 3px solid rgba(59, 130, 246, 0.4) !important; /* Thinner border */
  background-color: rgba(59, 130, 246, 0.05) !important;
  font-size: 0.85em !important;
  margin: 7px 0 !important; /* Reduced outer margin */
}

.published-container .callout[data-callout="testimonial"] .callout-title {
  display: none !important;
}

.published-container .callout[data-callout="testimonial"] .callout-content {
  padding: 5px 5px 5px 5px !important; /* top, right, bottom, left */
  font-style: italic !important;
  line-height: 1.6 !important;
  font-size: inherit !important;
}

.published-container .callout[data-callout="testimonial"] .callout-content > p:first-of-type {
  position: relative;
  padding-left: 10px !important;
  margin-bottom: 10px !important;
  font-size: inherit !important;
  margin-right: 30px !important; /* Just enough for image */
}

.published-container .callout[data-callout="testimonial"] .image-and-name {
  float: left !important;
  margin: 5px 12px 5px 0 !important; /* Very tight margins */
  text-align: center !important;
}

.published-container .callout[data-callout="testimonial"] .image-and-name img {
  width: 80px !important; /* Compact image */
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-bottom: 2px !important;
}

.published-container .callout[data-callout="testimonial"] .image-and-name .testimonial-name {
  font-size: 0.8em !important;
  font-weight: var(--bold-weight, 800) !important;
  white-space: nowrap !important;
}


/* =========================================== */
/* MENU CALLOUT - MATCHING SMALLER FONT SIZE  */
/* =========================================== */

.published-container .callout[data-callout="custom-menu"] {
  max-width: 235px !important;
  margin: 20px auto !important;
  padding: 0 !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: 6px !important;
  background: var(--background-secondary) !important;
  overflow: hidden;
  
  --callout-content-padding: 0 !important;
  --callout-title-padding: 0 !important;
  
  .callout-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    margin: 0 !important;
    background: var(--background-secondary) !important;
    border-radius: 6px 6px 0 0 !important;
    min-height: auto !important;
    height: auto !important;
    border-bottom: 1px solid transparent !important;
    user-select: none !important;
  }
  
  .callout-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
  }
  
  .callout-icon svg,
  .callout-icon::before,
  .callout-icon::after {
    display: none !important;
    content: "" !important;
  }
  
  .callout-title-inner {
    display: block !important;
    font-family: "Libre Baskerville", serif !important; /* ← CHANGED to Libre Baskerville */
    font-optical-sizing: auto !important; /* ← ADD THIS */
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 700 !important; /* ← Bold for menu title */
    color: var(--text-normal) !important;
    font-size: 0.80em !important; 
    letter-spacing: -0.01em !important; /* ← Slight tightening */
  }
  
  .callout-title-inner::before,
  .callout-title-inner::after {
    display: none !important;
    content: "" !important;
  }
  
  .callout-fold {
    display: none !important;
  }
  
  .callout-content {
    padding: 8px 1px !important;
    border-top: 1px solid var(--background-modifier-border) !important;
    font-family: "Nanum Myeongjo", serif !important; /* ← CHANGED to Nanum Myeongjo */
    font-style: normal !important;
    font-size: 0.75em !important;
    display: block !important;
    text-align: center !important;
    max-height: 0 !important;
    overflow: hidden !important;
    font-weight: 400 !important; /* ← ADD THIS */
    line-height: 1.6 !important; /* ← Added line-height */
    letter-spacing: 0.02em !important; /* ← Slight spacing for clarity */
  }
  
  /* EXPANDED STATE */
  &:not(.is-collapsed) .callout-content {
    max-height: 500px !important;
    transition: max-height 0.3s ease !important;
  }
  
  /* COLLAPSED STATE */
  &.is-collapsed .callout-content {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: none !important;
    overflow: hidden !important;
    transition: max-height 0.25s ease !important;
  }
  
  /* ONLY menu links are blocks */
  .callout-content a {
    display: block !important;
    padding: 1px 2px !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: var(--text-normal) !important;
    border-radius: 3px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    font-size: inherit !important;
  }
  
  /* SINGLE SPACE FIX */
  .callout-content br {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .callout-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .callout-content ul,
  .callout-content ol {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  .callout-content li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  .callout-content a:hover {
    color: var(--interactive-accent) !important;
    background: var(--background-modifier-hover) !important;
  }
}

@media (max-width: 767px) {
  .published-container .callout[data-callout="custom-menu"] {
    max-width: 170px !important;
    margin: 5px auto !important;
    
    .callout-title {
      padding: 1px 1px !important;
    }
    
    .callout-title-inner {
      font-size: 0.80em !important;
    }
    
    .callout-content {
      padding: 4px 1px !important;
      font-size: 0.70em !important;
    }
    
    /* MOBILE EXPANDED STATE */
    &:not(.is-collapsed) .callout-content {
      max-height: 300px !important;
      transition: max-height 0.3s ease !important;
    }
    
    /* MOBILE COLLAPSED STATE */
    &.is-collapsed .callout-content {
      max-height: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-top: none !important;
      overflow: hidden !important;
      transition: max-height 0.25s ease !important;
    }
    
    .callout-content a {
      padding: 1px 1px !important;
      margin: 0 !important;
      white-space: nowrap !important;
      word-break: break-word !important;
      width: auto !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      float: none !important;
      font-size: inherit !important;
    }
  }
}

/* =========================================== */
/* DESKTOP: PREVENT MENU TEXT WRAP             */
/* =========================================== */

@media (min-width: 768px) {
  .published-container .callout[data-callout="custom-menu"] .callout-content a {
    white-space: nowrap !important; /* ← Add this line */
    /* Ensure full width on desktop */
    width: 100% !important;
  }
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS                      */
/* =========================================== */

@media (max-width: 767px) {
  /* MOBILE: Body font = 19px */
  
  /* Regular dark callout (0% smaller = 19px) */
  .published-container .callout[data-callout="custom-dark-regular"] .callout-content {
    font-size: 19px !important; /* 0% smaller = same as body */
    padding: 6px 16px !important;
  }
  
  /* Other colored callouts (15% smaller = 16px) */
  .published-container .callout[data-callout="custom-grey"] .callout-content,
  .published-container .callout[data-callout="custom-blue"] .callout-content,
  .published-container .callout[data-callout="custom-green"] .callout-content {
    font-size: 16px !important; /* 15% smaller than 19px */
    padding: 6px 16px !important;
  }
  
  /* Dark-smaller callout (15% smaller = 16px) */
  .published-container .callout[data-callout="custom-dark-smaller"] .callout-content {
    font-size: 16px !important; /* 15% smaller than 19px */
    padding: 6px 16px !important;
  }
  
  /* Dark-tiny callout (25% smaller = 14px) */
  .published-container .callout[data-callout="custom-dark-tiny"] .callout-content {
    font-size: 14px !important; /* 25% smaller than 19px (was 10px = 45%) */
    padding: 6px 16px !important;
  }
}

@media (min-width: 768px) {
  /* DESKTOP: Body font = 28px */
  
  /* Regular dark callout (0% smaller = 28px) */
  .published-container .callout[data-callout="custom-dark-regular"] .callout-content {
    font-size: 28px !important; /* 0% smaller = same as body */
    padding: 10px 24px !important;
  }
  
  /* Other colored callouts (15% smaller = 24px) */
  .published-container .callout[data-callout="custom-grey"] .callout-content,
  .published-container .callout[data-callout="custom-blue"] .callout-content,
  .published-container .callout[data-callout="custom-green"] .callout-content {
    font-size: 24px !important; /* 15% smaller than 28px */
    padding: 10px 24px !important;
  }
  
  /* Dark-smaller callout (15% smaller = 24px) */
  .published-container .callout[data-callout="custom-dark-smaller"] .callout-content {
    font-size: 24px !important; /* 15% smaller than 28px */
    padding: 10px 24px !important;
  }
  
  /* Dark-tiny callout (25% smaller = 21px) */
  .published-container .callout[data-callout="custom-dark-tiny"] .callout-content {
    font-size: 21px !important; /* 25% smaller than 28px (was 15px = 45%) */
    padding: 10px 24px !important;
  }
}

/* OVERRIDE ANY flex/inline on menu links */
.published-container .callout[data-callout="custom-menu"] .callout-content a {
  display: block !important;
  width: auto !important; /* ← Change to "auto" for centering */
  max-width: 100% !important; /* Still prevent overflow */
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  margin: 0 1px !important; /* ← Add this back */
  text-align: center !important; /* ← Add this back */
}

/* Also force the content container */
.published-container .callout[data-callout="custom-menu"] .callout-content {
  display: block !important;
}

/* Force all direct children to be blocks */
.published-container .callout[data-callout="custom-menu"] .callout-content > * {
  display: block !important;
  width: auto !important; /* ← Change from 100% to auto */
  max-width: 100% !important;
}


/* =========================================== */
/* DESKTOP: ENSURE PROPER FONT SIZES          */
/* =========================================== */

@media (min-width: 768px) {
  .published-container .callout[data-callout="custom-menu"] .callout-content {
    font-size: 0.70em !important; /* 28px × 0.70 = 19.6px */
  }
  
  .published-container .callout[data-callout="custom-menu"] .callout-content a {
    font-size: inherit !important; /* Use parent size */
  }
  
  .published-container .callout[data-callout="custom-menu"] .callout-title-inner {
    font-size: 0.80em !important; /* 28px × 0.80 = 22.4px */
  }
}

/* =========================================== */
/* CSS GRID METHOD - LAYOUT OPTIMIZATION */
/* =========================================== */

.published-container .callout[data-callout="custom-menu"] {
  display: grid !important;
  grid-template-rows: auto 0fr !important;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Force layout calculation */
  contain: layout style !important;
  position: relative !important;
  
  /* CRITICAL: Pre-calculate the expanded state */
  &::before {
    content: '' !important;
    display: block !important;
    grid-row: 2 !important;
    height: 0 !important;
    visibility: hidden !important;
  }
}

.published-container .callout[data-callout="custom-menu"]:not(.is-collapsed) {
  grid-template-rows: auto 1fr !important;
}

/* OPTIMIZE TITLE RENDERING */
.published-container .callout[data-callout="custom-menu"] .callout-title {
  position: relative !important;
  z-index: 2 !important;
  /* GPU acceleration with 3D transform */
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: auto !important; /* Try DEFAULT rendering */
  
  /* Re-add border but with optimization */
  border-bottom: 1px solid var(--background-modifier-border) !important;
  /* Ensure border is on its own layer */
  border-image: linear-gradient(to right, 
    var(--background-modifier-border), 
    var(--background-modifier-border)
  ) 1 !important;
}

/* Animate border separately with opacity */
.published-container .callout[data-callout="custom-menu"]:not(.is-collapsed) .callout-title {
  border-bottom-color: var(--background-modifier-border) !important;
  transition: border-bottom-color 0.15s ease 0.1s !important; /* Delayed */
}

.published-container .callout[data-callout="custom-menu"].is-collapsed .callout-title {
  border-bottom-color: transparent !important;
  transition: border-bottom-color 0.05s ease !important; /* Faster removal */
}

/* CONTENT OPTIMIZATION */
.published-container .callout[data-callout="custom-menu"] .callout-content {
  overflow: hidden !important;
  min-height: 0 !important;
  
  /* Pre-calculate content height */
  &::before {
    content: '' !important;
    display: block !important;
    height: 0 !important;
    visibility: hidden !important;
  }
}

/* SMOOTH CONTENT FADE */
.published-container .callout[data-callout="custom-menu"]:not(.is-collapsed) .callout-content {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.15s ease 0.05s !important; /* Slight delay */
}

.published-container .callout[data-callout="custom-menu"].is-collapsed .callout-content {
  border-top: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.1s ease, visibility 0s linear 0.1s !important;
}

/* Mobile */
@media (max-width: 767px) {
  .published-container .callout[data-callout="custom-menu"] {
    transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}