/* =======================================
   Customizer Controls Panel – Dark Theme
   ======================================= */

/* Main sidebar background */
body.wp-customizer #customize-controls .wp-full-overlay-sidebar,
body.wp-customizer #customize-controls .wp-full-overlay-sidebar-content {
  background: #050505 !important;
}

/* Header ("You are customizing") */
body.wp-customizer #customize-controls .customize-info {
  background: #000 !important;
  border-bottom: 1px solid #333 !important;
  color: #fff !important;
}

/* Header title + theme name */
#customize-controls .customize-info .panel-title {
  display: block;
  color: #1a1a1a;
  font-weight: 400;
}

#customize-controls .customize-info .theme-name {
  display: inline;
  color: #fff;
  margin-left: 8px;
  font-weight: 400;
}

/* ================================
   Section rows (Theme Settings, Menus…)
   ================================ */

/* Base state for the whole row */
body.wp-customizer #customize-controls h3.accordion-section-title,
body.wp-customizer #customize-controls h3.accordion-section-title > button.accordion-trigger {
  background: #111 !important;
  color: #f9fafb !important;
  border-color: #222 !important;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Full row hover / focus – use primary colour */
body.wp-customizer #customize-controls li.control-section:hover > h3.accordion-section-title,
body.wp-customizer #customize-controls li.control-section:hover > h3.accordion-section-title > button.accordion-trigger,
body.wp-customizer #customize-controls li.control-section:focus-within > h3.accordion-section-title,
body.wp-customizer #customize-controls li.control-section:focus-within > h3.accordion-section-title > button.accordion-trigger {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border-left-color: var(--color-primary) !important;
}

/* ================================
   Controls (labels + descriptions)
   ================================ */

body.wp-customizer #customize-controls .customize-control-title {
  color: #f9fafb !important;
}

body.wp-customizer #customize-controls .customize-control-description {
  color: #9ca3af !important;
}

/* ================================
   Inputs / fields
   ================================ */

body.wp-customizer #customize-controls .customize-control input,
body.wp-customizer #customize-controls .customize-control select,
body.wp-customizer #customize-controls .customize-control textarea {
  background: #111 !important;
  color: #f9fafb !important;
  border: 1px solid #374151 !important;
}

/* Color picker wrapper */
body.wp-customizer #customize-controls .wp-picker-container {
  background: #000 !important;
  border-radius: 4px;
  padding: 4px 6px;
}


/* Remove blue focus outline + border from Customizer rows */
body.wp-customizer #customize-controls .accordion-section-title:focus,
body.wp-customizer #customize-controls .accordion-section-title:focus-visible,
body.wp-customizer #customize-controls .accordion-section-title > button.accordion-trigger:focus,
body.wp-customizer #customize-controls .accordion-section-title > button.accordion-trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-left-color: transparent !important;
}

/* Make chevron (>) white when row is hovered or focused */
body.wp-customizer #customize-controls li.control-section:hover > h3.accordion-section-title > button.accordion-trigger,
body.wp-customizer #customize-controls li.control-section:focus-within > h3.accordion-section-title > button.accordion-trigger {
  color: #fff !important;
  border-color: #fff !important;
  fill: #fff !important;
}

/* Base chevron (the little > triangle) */
body.wp-customizer #customize-controls h3.accordion-section-title::after {
  border-left-color: #ccc !important; /* default grey */
}

/* Chevron on hover / focus – match text (white) */
body.wp-customizer #customize-controls li.control-section:hover > h3.accordion-section-title::after,
body.wp-customizer #customize-controls li.control-section:focus-within > h3.accordion-section-title::after {
  border-left-color: #fff !important;
}




/* Override Customizer chevron (>) colour */
body.wp-customizer #customize-controls #customize-theme-controls .accordion-section-title::after,
body.wp-customizer #customize-controls #customize-outer-theme-controls .accordion-section-title::after {
  color: #fff !important; /* or var(--color-primary) if you ever want that */
}



/* Hide dummy inputs for custom heading/intro controls */
.customize-control.customize-control-custom input,
.customize-control.customize-control-custom select,
.customize-control.customize-control-custom textarea {
  display: none !important;
}

/* Customizer action buttons (match Need Help buttons) */
body.wp-customizer #customize-controls .button.hayden-spacing-reset,
body.wp-customizer #customize-controls .button.hayden-block-padding-reset,
body.wp-customizer #customize-controls .button.hayden-block-padding-x-reset,
body.wp-customizer #customize-controls .button.hayden-radius-reset {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
}

body.wp-customizer #customize-controls .button.hayden-spacing-reset:hover,
body.wp-customizer #customize-controls .button.hayden-block-padding-reset:hover,
body.wp-customizer #customize-controls .button.hayden-block-padding-x-reset:hover,
body.wp-customizer #customize-controls .button.hayden-radius-reset:hover,
body.wp-customizer #customize-controls .button.hayden-spacing-reset:focus,
body.wp-customizer #customize-controls .button.hayden-block-padding-reset:focus,
body.wp-customizer #customize-controls .button.hayden-block-padding-x-reset:focus,
body.wp-customizer #customize-controls .button.hayden-radius-reset:focus {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}


.hayden-customizer-panel-footer a {
    box-sizing: border-box;
    width: 100%;
    display: block;
}


#customize-theme-controls
  [id^="accordion-panel-hayden_theme_panel"]
  .customize-inside-control-row {
    color: #fff !important;
}


#customize-controls
  [id^="accordion-panel-hayden_theme_panel"]
  .description {
    color: #fafafa !important;
}

/* Theme Colours: compact two-column layout */
#accordion-section-hayden_color_section .accordion-section-content > ul,
#accordion-section-hayden_color_section .customize-section-content > ul,
#sub-accordion-section-hayden_color_section {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#accordion-section-hayden_color_section .customize-control,
#sub-accordion-section-hayden_color_section .customize-control {
  margin: 0;
  list-style: none;
}

#accordion-section-hayden_color_section .customize-control-color,
#sub-accordion-section-hayden_color_section .customize-control-color {
  min-width: 0;
}

/* Keep heading/custom blocks full width for readability */
#accordion-section-hayden_color_section .customize-control-custom,
#sub-accordion-section-hayden_color_section .customize-control-custom {
  grid-column: 1 / -1;
}

