/* ===== Adobe Fonts Import ===== */
@import url("https://use.typekit.net/oig5rfx.css");

/* ===== Base Typography ===== */
body, p, h1, h2, h3, h4, h5, h6, h1.page-header, h3.publish-article-heading, .callout-title-inner {
  font-family: 'adobe-caslon-pro', serif;
}

body, p {
  line-height: 1.3;
  font-size: 32px;
  letter-spacing: -0.5px;
}

.markdown-rendered p {
  margin-bottom: 2em;
}


/* ===== Navigation Settings ===== */
.tree-item-inner, 
.nav-view-outer .tree-item-self a {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
}

/* ===== Make the Active Note Blue in the Nav ===== */
.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self.mod-active, .nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self.mod-active:hover {
  color: #9ec8f5;
  font-weight: 700;
}
.metadata-property-value .internal-link, .markdown-rendered .internal-link,
.metadata-property-value .internal-link, .markdown-rendered .internal-link:visited,
.nav-view-outer .tree-item-self a {
  color: #9ec8f5;
}


/* Hover state */
.nav-view-outer .tree-item-self a:hover {
  color: #9ec8f5;
}

/* ===== Chorus Callout Title ===== */
.callout-title-inner {
  color: #9ec8f5;
  font-size: 32px;
  font-weight: 400;
}

/* ===== Headings (8px grid system) ===== */
.published-container .markdown-rendered h1.page-header {
  font-family: 'adobe-caslon-pro', serif;
  font-size: 48px;
  line-height: 1.2;
  color: rgb(229, 181, 103);
}

.markdown-preview-view h1,
.markdown-rendered h1 {
  font-size: 48px;
  line-height: 1.2;
}

.markdown-preview-view h2,
.markdown-rendered h2 {
  font-size: 40px;
  line-height: 1.2;
}

.markdown-preview-view h3,
.markdown-rendered h3 {
  font-size: 32px;
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: rgb(229, 181, 103);
}

.markdown-preview-view h4,
.markdown-rendered h4 {
  font-size: 24px;
  line-height: 1.2;
}

.markdown-preview-view h5,
.markdown-rendered h5 {
  font-size: 16px;
  line-height: 1.2;
}

.markdown-preview-view h6,
.markdown-rendered h6 {
  font-size: 8px;
  line-height: 1.2;
}

/* ===== Chorus Callout Boxes ===== */
.callout[data-callout="chorus"],
.callout[data-callout="Chorus"] {
  background-color: #26373e;
  border-left: 4px solid #26373e;
  padding: 1em;
  margin: 1.5em 0;
  line-height: 0.9;
}

/* ===== Song Callout Boxes ===== */
/* Cool blue tint matching nav link color */
.callout[data-callout="song"],
.callout[data-callout="Song"] {
  background-color: rgba(158, 200, 245, 0.10) !important;
  border-left: 4px solid rgba(158, 200, 245, 0.25) !important;
}

/* Dark mode for song callouts */
body.theme-dark .callout[data-callout="song"],
body.theme-dark .callout[data-callout="Song"] {
  background-color: rgba(158, 200, 245, 0.10) !important;
  border-left: 4px solid rgba(158, 200, 245, 0.25) !important;
}

/* Dark mode for chorus callouts */
body.theme-dark .callout[data-callout="chorus"],
body.theme-dark .callout[data-callout="Chorus"] {
  background-color: #502A00;
  border-left: 4px solid #502A00;
}

/* Dark mode for Scripture callouts — match page background for seamless look */
body.theme-dark .callout[data-callout="scripture"],
body.theme-dark .callout[data-callout="Scripture"] {
  background-color: var(--background-primary) !important;
  border-left: 4px solid var(--background-primary) !important;
}

/* Dark mode for Bridge sections */
body.theme-dark .callout[data-callout="bridge"],
body.theme-dark .callout[data-callout="Bridge"] {
  background-color: #4f4f4f;
  border-left: 4px solid #4f4f4f;
}

/* Callout content styling */
.callout[data-callout="chorus"] .callout-content,
.callout[data-callout="Chorus"] .callout-content {
  font-size: 32px;
  line-height: 0.9;
}


/* ===== Collapsible Callout Fold Chevrons — Gold & Bold ===== */
.callout[data-callout="song"] .callout-fold,
.callout[data-callout="Song"] .callout-fold,
.callout[data-callout="scripture"] .callout-fold,
.callout[data-callout="Scripture"] .callout-fold {
  color: rgb(229, 181, 103) !important;
  opacity: 1 !important;
  font-weight: bold !important;
}

.callout[data-callout="song"] .callout-fold svg,
.callout[data-callout="Song"] .callout-fold svg,
.callout[data-callout="scripture"] .callout-fold svg,
.callout[data-callout="Scripture"] .callout-fold svg {
  stroke: rgb(229, 181, 103) !important;
  stroke-width: 3px !important;
}

/* ===== Hide Callout and Embed Icons ===== */
.callout-icon {
  display: none;
}

.markdown-embed-link, .file-embed-link {
  display: none;
}

/* ===== Remove Embed Border ===== */
.markdown-embed {
  border-left: none !important;
}

/* Optional: Also remove any border-radius or padding if needed */
.markdown-embed, .nav-view-outer .tree-item-self.mod-active {
  border-left: none !important;
  border: none !important;
}

/* ===== Remove Embed Note Title ===== */
.markdown-embed-title {
  display: none;
}



/* ===== Font Size Controls ===== */
:root {
  --custom-font-size: 32px; /* Default size */
}

/* Apply custom font size to paragraphs and body text */
body p,
.markdown-rendered p,
.callout[data-callout="chorus"] .callout-content,
.callout[data-callout="Chorus"] .callout-content {
  font-size: var(--custom-font-size) !important;
}

/* Font size control buttons container */
.font-size-controls {
  display: flex;
  gap: 8px;
  padding: 16px 0 0 0;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 0; /* Explicitly set to 0 */
}

/* Individual control buttons */
.font-control-btn {
  background-color: #26373e;
  color: rgb(229, 181, 103);
  border: 1px solid rgb(229, 181, 103);
  padding: 12px 20px;
  font-family: 'adobe-caslon-pro', serif;
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 60px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0; /* Remove any default button margins */
}

.font-control-btn:hover:not(:disabled) {
  background-color: rgb(229, 181, 103);
  color: #26373e;
  transform: translateY(-1px);
}

.font-control-btn:active:not(:disabled) {
  transform: translateY(0);
}

.font-control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Middle button (reset) styling */
.font-control-btn:nth-child(2) {
  font-weight: bold;
}

/* Target the h1 that comes after the controls to remove its top margin */
.font-size-controls + h1.page-header,
.font-size-controls + h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .font-size-controls {
    gap: 12px;
    padding: 20px 0 0 0;
    margin-bottom: 0;
  }
  
  .font-control-btn {
    padding: 14px 24px;
    font-size: 22px;
    min-width: 70px;
  }
}

/* Make the side menu activate at 960px Screen Size */
@media screen and (max-width: 960px) {
    .published-container.has-navigation .site-body-left-column {
        display: flex;
        position: fixed;
        top: 0;
        transition: transform 200ms ease-in-out;
        z-index: var(--layer-modal);
        left: 0;
        width: 100vw;
        background-color: var(--background-primary);
        transform: translateX(-100%);
        top: var(--header-height);
        border-right: 0px;
    }
}

@media screen and (max-width: 960px) {
    .published-container.has-navigation .site-header {
        display: flex;
        z-index: 90;
        background-color: var(--header-background);
        height: var(--header-height);
        padding: 0px 8px;
    }
}

@media screen and (max-width: 960px) {
    .published-container.has-navigation .site-header .clickable-icon {
        display: flex;
        align-items: center;
        color: var(--site-menu-icon-color);
        cursor: pointer;
        padding: 6px;
        margin-right: 6px;
    }
}

@media screen and (max-width: 960px) {
    .published-container.has-navigation .site-body-left-column .site-body-left-column-inner {
        width: 100%;
    }
}

@media screen and (max-width: 960px) {
    .site-body-left-column .site-body-left-column-inner {
        padding-top: 16px;
    }
}

@media screen and (max-width: 960px) {
    .published-container {
        --site-name-size: 18px;
        --header-height: 50px;
        --header-background: var(--background-primary);
        --page-title-size: 2em;
        --page-side-padding: 24px;
        --footer-display
none
: none;
        --list-spacing: 0.15em;
    }
}

@media screen and (max-width: 960px) {
    .published-container.has-navigation .nav-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-modifier-cover);
        opacity: 0;
        transition: opacity 200ms ease-in-out;
        z-index: -1;
    }
}

@media screen and (max-width: 960px) {
    .published-container.has-navigation.is-left-column-open .nav-backdrop {
        opacity: 1;
        z-index: 1;
    }
}

@media screen and (max-width: 960px) {
    .published-container.has-navigation.is-left-column-open .site-body-left-column {
        transform: translateX(0);
    }
}