/**
 * @file
 * Custom ST theme styles for Gin admin theme.
 * Preserves important customizations from st_theme.
 */

/* ==========================================================================
   Brand Colors
   ========================================================================== */

:root {
  --st-color-primary: #E5007C;
  --st-color-secondary: #c00;
  --st-color-accent: #e5007c;
  --st-color-white: #fff;
  --st-color-grey: #6a6a6a;
  --st-color-dark-grey: #484848;
  --st-color-black: #0f0f0f;
}

/* ==========================================================================
   Layout Builder Block Titles for Editors
   ========================================================================== */

/* Make block titles visible in layout builder */
.layout-builder__section .block::before {
  content: attr(data-block-type);
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--st-color-primary);
  background-color: rgba(24, 24, 92, 0.08);
  padding: 10px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--st-color-primary);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* All block titles use consistent styling for better readability */

/* ==========================================================================
   Layout Builder Add Block Box Styling
   ========================================================================== */

/* Style the add block selection box */
.layout-builder__add-block {
  background-color: #f8f9fa !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Style individual block buttons in the add block box */
.layout-builder__add-block .layout-builder-block-categories__item,
.layout-builder__add-block .layout-builder-block-categories__item a {
  background-color: rgba(24, 24, 92, 0.08) !important;
  color: var(--st-color-primary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  margin: 4px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.layout-builder__add-block .layout-builder-block-categories__item:hover,
.layout-builder__add-block .layout-builder-block-categories__item a:hover {
  background-color: rgba(24, 24, 92, 0.15) !important;
  border-color: var(--st-color-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   Dark Mode Contrast Fixes
   ========================================================================== */

/* Dark mode styling for Layout Builder content area */
.gin--dark-mode .layout-builder__section {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gin--dark-mode .layout-builder__section .field__item {
  color: #ffffff !important;
}

.gin--dark-mode .layout-builder__section .field__label {
  color: #b3b3b3 !important;
  font-weight: 500;
}

/* Target Layout Builder block content areas */
.gin--dark-mode .layout-builder__section .block {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gin--dark-mode .layout-builder__section .block .field {
  background-color: transparent !important;
  color: #ffffff !important;
}

.gin--dark-mode .layout-builder__section .block .field__item {
  background-color: transparent !important;
  color: #ffffff !important;
}

.gin--dark-mode .layout-builder__section .block .field__label {
  background-color: transparent !important;
  color: #b3b3b3 !important;
  font-weight: 500;
}

/* Target Layout Builder regions and components */
.gin--dark-mode .layout-builder__region {
  background-color: transparent !important;
  color: #ffffff !important;
}

.gin--dark-mode .layout-builder__component {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Target specific Layout Builder content containers */
.gin--dark-mode .layout-builder__section .layout-builder__region .block {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

.gin--dark-mode .layout-builder__section .layout-builder__region .block .field {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Dark mode styling for block titles */
.gin--dark-mode .layout-builder__section .block::before {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--st-color-white) !important;
  border-left-color: var(--st-color-primary) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

/* All block titles use consistent styling in dark mode for better readability */

/* Dark mode styling for add block box */
.gin--dark-mode .layout-builder__add-block {
  background-color: #2a2a2a !important;
  border-color: var(--st-color-accent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.gin--dark-mode .layout-builder__add-block .layout-builder-block-categories__item,
.gin--dark-mode .layout-builder__add-block .layout-builder-block-categories__item a {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.gin--dark-mode .layout-builder__add-block .layout-builder-block-categories__item:hover,
.gin--dark-mode .layout-builder__add-block .layout-builder-block-categories__item a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--st-color-accent) !important;
}

/* Ensure proper spacing in Gin's admin forms */
.gin-layout-builder-wrapper .call-to-action {
  margin: 1rem 0;
}

/* ==========================================================================
   Layout Builder Heading Styles
   ========================================================================== */

/* Override heading font weights in layout builder to ensure consistency */
.layout-builder__section .block h1,
.layout-builder__section .block h2,
.layout-builder__section .block h3,
.layout-builder__section .block h4,
.layout-builder__section .block h5,
.layout-builder__section .block h6 {
  font-weight: 400 !important; /* Use regular weight instead of bold */
}

/* Also target headings in dark mode */
.gin--dark-mode .layout-builder__section .block h1,
.gin--dark-mode .layout-builder__section .block h2,
.gin--dark-mode .layout-builder__section .block h3,
.gin--dark-mode .layout-builder__section .block h4,
.gin--dark-mode .layout-builder__section .block h5,
.gin--dark-mode .layout-builder__section .block h6 {
  font-weight: 400 !important; /* Use regular weight instead of bold */
}