/* ==========================================================================
   Blocksy Child Theme — Custom Styles (Palette, Utilities, and Responsiveness)
   ========================================================================== */

/* ==========================================================================
   1. COLOR PALETTE & UTILITY VARIABLES
   ========================================================================== */

/* 
  Define global variables for spacing, durations, and theme colors.
  - Light-theme variables go in :root 
  - Dark-theme overrides go in [data-theme="dark"]
*/

:root {
  /* Non-color utility variables */
  --s-radius-card: 0.75rem;        /* Border radius for cards and popups */
  --s-dur-fast: 0.3s;              /* Transition duration for interactive elements */

  /* Light-theme surface override (Blocksy picks default palette) */
  --theme-palette-bg-card-light: #e1e2e3;

  /* -- Share box (light theme) -- */
  --share-bg: var(--theme-palette-color-1);
  --share-bg-hover: var(--theme-palette-color-2);
  --share-text: #fff;
}

[data-theme="dark"] {
  /* Dark-theme primary colors */
  --theme-palette-color-1: #b09361;    /* Primary accent */
  --theme-palette-color-2: #f3c95a;    /* Secondary accent */
  --theme-palette-color-3: #f0e8bd;    /* Tertiary accent */
  --theme-palette-color-4: #f8e7be;    /* Quaternary accent */
  --theme-palette-color-5: rgba(176, 147, 97, 0.2);
  --theme-palette-color-6: #a67400;
  --theme-palette-color-7: #85765c;
  --theme-palette-color-8: #081322;

  /* Dark-theme surface override for entry cards */
  --theme-palette-bg-card-dark: #132038;

  /* Button text initial color (dark) */
  --theme-button-text-initial-color: #081322;

  /* -- Share box (dark theme) -- */
  --share-bg: var(--theme-palette-color-1);
  --share-bg-hover: var(--theme-palette-color-2);
  --share-text: var(--theme-palette-color-8);
}

/* ==========================================================================
   2. TEXT SELECTION STYLES
   ========================================================================== */

/* 
  Customize text selection appearance in dark mode to ensure readability.
  Applies to both ::selection and ::-moz-selection pseudo-elements.
*/

[data-theme="dark"] ::selection,
[data-theme="dark"] ::-moz-selection {
  color: #000;
  background: var(--theme-palette-color-1);
}

/* ==========================================================================
   3. UNIFORM TRANSITION FOR INTERACTIVE ELEMENTS
   ========================================================================== */

/*
  Apply smooth transitions for color, background-color, and transform
  on common interactive elements: links, buttons, inputs, selects, and textareas.
*/

:where(a, button, input, select, textarea) {
  transition: 
    color var(--s-dur-fast),
    background-color var(--s-dur-fast),
    transform var(--s-dur-fast);
}

/* ==========================================================================
   4. SIDEBAR NAVIGATION & ACCORDION BEHAVIOR
   ========================================================================== */

/* Typography for menu headings */
.menu-h2 h2 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
}
.menu-h3 h3 {
  font-size: 1rem;
  margin: 0.5rem 0;
}

/* Remove underline on hover for menu links */
.widget_nav_menu li > a:hover {
  text-decoration: none;
}

/* Change cursor to pointer on clickable submenu parents */
.menu-item-has-children > .ct-sub-menu-parent {
  cursor: pointer;
}

/* 
  Accordion submenu: initially hidden, revealed when parent has .is-open or
  if it's a manual h2/h3 heading with a sibling submenu.
*/
.widget_nav_menu .menu-item-has-children > .sub-menu {
  display: none;
  padding-left: 12px;
  transition: max-height var(--s-dur-fast);
}

.widget_nav_menu .menu-item-has-children.is-open > .sub-menu,
.widget_nav_menu li > h2 + .sub-menu,
.widget_nav_menu li > h3 + .sub-menu {
  display: block !important;
}

/* Chevron icon styling and rotation when submenu is open */
.widget_nav_menu .toggle-icon-1 {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  inline-size: 15px;
  block-size: 15px;
  transition: transform var(--s-dur-fast);
  fill: currentColor;
}

/* Rotate chevron when the parent <li> has .is-open */
.widget_nav_menu .menu-item-has-children.is-open > a .toggle-icon-1 {
  transform: rotate(180deg);
}

/* Hide chevron for pure heading elements (h2/h3) */
.widget_nav_menu li > h2 > a .toggle-icon-1,
.widget_nav_menu li > h3 > a .toggle-icon-1 {
  display: none !important;
}

/* Highlight current menu items (links or headers) */
.widget_nav_menu li[class*="current-"] > a,
.widget_nav_menu li[class*="current-"] > h2,
.widget_nav_menu li[class*="current-"] > h3,
.widget_nav_menu li[class*="current-"] > .apocalypse-accordion-title {
  color: var(--theme-palette-color-2);
  font-weight: bold;
}

/* 
  Specific rule for custom accordion title: hide its submenu initially,
  and rotate its chevron when .is-open is applied.
*/
.widget_nav_menu li > .apocalypse-accordion-title + .sub-menu {
  display: none !important;
}
.widget_nav_menu li.is-open > .apocalypse-accordion-title .toggle-icon-1 {
  transform: rotate(180deg);
}

/* ==========================================================================
   4b. SIDEBAR NAVIGATION — GRID LAYOUT FOR CHAPTER LISTS (grid-4x)
   ========================================================================== */

/* Reset padding and margin for any <ul class="grid-4x"> */
.widget_nav_menu .grid-4x,
.mobile-menu .grid-4x {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

/* Enable CSS Grid in both desktop and mobile accordions */
.widget_nav_menu .menu-item-has-children.is-open > .grid-4x,
.mobile-menu .menu-item-has-children.dropdown-active > .grid-4x {
  display: grid !important;              /* override default block display */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;                  /* let rows size automatically */
  gap: 0.25rem 0.35rem;                   /* row-gap | column-gap */
}

/* Style each grid cell and its link */
.grid-4x > li {
  margin: 0;
}
.grid-4x > li > a {
  display: block;
  padding: 0;
  text-decoration: none;
}


/* ==========================================================================
   5. THEME TOGGLE BUTTON STYLES
   ========================================================================== */

/*
  Style theme toggle buttons uniformly.
  - Remove default background, border, margin.
  - Keep font size consistent and allow icon to inherit color.
*/
.theme-toggle-btn,
#toggle-theme {
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: inherit;
  border: none;
  margin: 0 !important;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ==========================================================================
   6. ENTRY CARD HOVER EFFECT
   ========================================================================== */
/* Make entire entry card clickable */
.entry-card {
  position: relative; /*Set card positioning */
  cursor: pointer; /*Change cursor to pointer */
}
/*
  On hover, entry cards scale down slightly and change background color
  based on theme. Transition uses --s-dur-fast for consistency.
*/
.entry-card:hover {
  transform: scale(0.95);
  transition: transform var(--s-dur-fast) ease, background-color var(--s-dur-fast);
  background-color: var(--theme-palette-bg-card-light);
}

[data-theme="dark"] .entry-card:hover {
  background-color: var(--theme-palette-bg-card-dark);
}

.entry-card::before {
  content: ""; /*Pseudo-element to cover the card */
  position: absolute; /*Absolute positioning to cover card */
  inset: 0; /*Fully cover the card area */
  z-index: 1; /*Place above card content but below links */
}

.entry-card .entry-title a {
  position: relative; /*Ensure links remain clickable */
  z-index: 2; /*Links appear above pseudo-element */
}

/* ==========================================================================
   7. PAGINATION STYLES
   ========================================================================== */

/* Make current page number readable in dark mode */
[data-theme="dark"] .page-numbers.current {
  color: var(--theme-palette-color-8) !important;
}

/* ==========================================================================
   8. SHARE BOX COLORS (Unify Posts & Pages)
   ========================================================================== */

/*
  Force blog post share-box to use our theme icon colors.
  Targets elements with data-prefix="single_blog_post" and share-box type 2.
*/
[data-prefix="single_blog_post"] .ct-share-box[data-type="type-2"] {
  --theme-icon-color: var(--theme-palette-color-8);
  --theme-icon-hover-color: var(--theme-palette-color-4);
}

/* ==========================================================================
   9. HIGHLIGHT-AND-SHARE POPUP STYLES (Custom Theme)
   ========================================================================== */

/* Popup wrapper background and box-shadow */
.highlight-and-share-wrapper.theme-off {
  background: var(--share-wrap);
  border-radius: var(--s-radius-card);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
}

/* Style for share buttons inside the popup */
.highlight-and-share-wrapper.theme-off div a {
  background: var(--share-bg);
  color: var(--share-text);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* Button hover/focus states */
.highlight-and-share-wrapper.theme-off div a:hover,
.highlight-and-share-wrapper.theme-off div a:focus {
  background: var(--share-bg-hover);
  color: var(--share-text-hover);
  text-decoration: none;
}

/* Rounded edges for first and last buttons */
.highlight-and-share-wrapper.theme-off div:first-of-type a {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.highlight-and-share-wrapper.theme-off div:last-of-type a {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* Tooltip styling adjustments */
.highlight-and-share-wrapper > div.has-tooltip:hover:after {
  padding: 0.25rem !important;
}
.highlight-and-share-wrapper.theme-off .has-tooltip:hover:after {
  background: var(--share-bg-hover) !important;
  color: var(--share-text) !important;
}
[data-theme="dark"] .highlight-and-share-wrapper.theme-off .has-tooltip:hover:after {
  background: var(--share-bg-hover) !important;
  color: var(--share-text) !important;
}

/* ==========================================================================
   10. SHARE BOX TOOLTIP & ICON COLORS (Dark Theme)
   ========================================================================== */

/*
  Customize tooltip and icon colors for share-box in dark mode.
  Ensures contrast and hover feedback.
*/
.ct-share-box .ct-tooltip {
  background: var(--theme-palette-color-2);
}

[data-theme="dark"] .ct-back-to-top {
  --theme-icon-color: var(--theme-palette-color-1);
  --theme-icon-hover-color: var(--theme-palette-color-1);
}

[data-theme="dark"] .ct-share-box .ct-tooltip {
  background: var(--theme-palette-color-2);
  color: var(--theme-palette-color-8);
}

[data-theme="dark"] .ct-share-box a:hover,
[data-theme="dark"] .ct-share-box a:focus {
  color: var(--theme-palette-color-4);
}

[data-theme="dark"] .ct-share-box a:hover .ct-icon-container svg,
[data-theme="dark"] .ct-share-box a:focus .ct-icon-container svg,
[data-theme="dark"] .ct-share-box a:hover .ct-icon-container svg path,
[data-theme="dark"] .ct-share-box a:focus .ct-icon-container svg path {
  fill: var(--theme-palette-color-4);
  stroke: var(--theme-palette-color-4);
}

/* ==========================================================================
   11. HEADER & LOGO RESPONSIVENESS
   ========================================================================== */

/*
  Adjust logo font-size, logo max-height, and menu item font-size
  at various breakpoints for a responsive header.
*/
@media (max-width: 1340px) {
  [data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
    --theme-font-size: 1.5rem;
  }
  [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
    --logo-max-height: 90px;
  }
  [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
    --theme-font-size: 0.75rem;
  }
}

@media (max-width: 1020px) {
  [data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
    --theme-font-size: 1.25rem;
  }
}

@media (max-width: 550px) {
  [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
    --logo-max-height: 70px;
  }
}

@media (max-width: 420px) {
  [data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
    --theme-font-size: 1rem;
  }
  [data-logo="left"] .site-title-container {
    margin-inline-start: 0 !important;
  }
}

/* Adjust menu spacing at smaller widths */
@media (max-width: 1130px) {
  [data-header*="type-1"] .ct-header [data-id="menu"] {
    --menu-items-spacing: 25px;
  }
}

/* Smooth transitions for header elements */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a,
[data-header*="type-1"] .ct-header [data-id="logo"] .site-title,
[data-header*="type-1"] .ct-header [data-id="logo"] .site-title > a {
  transition: font-size 0.5s;
}
[data-header*="type-1"] .ct-header [data-id="menu"] {
  transition: gap 0.5s, --menu-items-spacing 0.5s;
}
[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
  transition: max-height 0.5s;
}

/* ==========================================================================
   12. OFF-CANVAS HEADER (MOBILE)
   ========================================================================== */

/*
  Style off-canvas mobile header background with blur effect.
  Rotate chevron icon when a submenu is active.
*/
[data-header*="type-1"] #offcanvas.ct-header {
  background-color: rgba(24, 30, 38, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Transition for toggle icons in mobile menu */
.ct-toggle-dropdown-mobile svg,
.toggle-icon-1 {
  transition: transform var(--s-dur-fast) ease-in-out;
}

/* Rotate chevron when dropdown is active in mobile */
.mobile-menu .menu-item-has-children.dropdown-active
  > .ct-sub-menu-parent
  > .ct-toggle-dropdown-mobile svg {
  transform: rotate(180deg);
}