/* ============================================================================
   Gutenberg Block Styles - KAL School Manager
   Brand Colors: Primary #800080 (Purple) | Secondary #008000 (Green)
   ============================================================================ */

/* ============================================================================
   CARD STYLES (core/group)
   ============================================================================ */

.wp-block-group.is-style-kal-card-primary {
  border: 1px solid #800080;
  border-radius: 8px;
  padding: 24px;
  background: linear-gradient(135deg, #f9f5fb 0%, #ffffff 100%);
  box-shadow: 0 4px 6px rgba(128, 0, 128, 0.1), 0 1px 3px rgba(128, 0, 128, 0.08);
  transition: all 0.3s ease;
}

.wp-block-group.is-style-kal-card-primary:hover {
  box-shadow: 0 12px 16px rgba(128, 0, 128, 0.15), 0 3px 6px rgba(128, 0, 128, 0.1);
  transform: translateY(-2px);
}

.wp-block-group.is-style-kal-card-secondary {
  border: 1px solid #008000;
  border-radius: 8px;
  padding: 24px;
  background: linear-gradient(135deg, #f1f9f1 0%, #ffffff 100%);
  box-shadow: 0 4px 6px rgba(0, 128, 0, 0.1), 0 1px 3px rgba(0, 128, 0, 0.08);
  transition: all 0.3s ease;
}

.wp-block-group.is-style-kal-card-secondary:hover {
  box-shadow: 0 12px 16px rgba(0, 128, 0, 0.15), 0 3px 6px rgba(0, 128, 0, 0.1);
  transform: translateY(-2px);
}

.wp-block-group.is-style-kal-card-outline-primary {
  border: 2px solid #800080;
  border-radius: 8px;
  padding: 24px;
  background: transparent;
  transition: all 0.3s ease;
}

.wp-block-group.is-style-kal-card-outline-primary:hover {
  background: rgba(128, 0, 128, 0.02);
  border-color: #620055;
}

.wp-block-group.is-style-kal-card-outline-secondary {
  border: 2px solid #008000;
  border-radius: 8px;
  padding: 24px;
  background: transparent;
  transition: all 0.3s ease;
}

.wp-block-group.is-style-kal-card-outline-secondary:hover {
  background: rgba(0, 128, 0, 0.02);
  border-color: #004e05;
}

/* ============================================================================
   LIST STYLES (core/list)
   ============================================================================ */

.wp-block-list.is-style-kal-list-primary {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-kal-list-primary li {
  padding-left: 28px;
  margin-bottom: 12px;
  position: relative;
}

.wp-block-list.is-style-kal-list-primary li:before {
  content: '●';
  color: #800080;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
  font-weight: bold;
}

.wp-block-list.is-style-kal-list-secondary {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-kal-list-secondary li {
  padding-left: 28px;
  margin-bottom: 12px;
  position: relative;
}

.wp-block-list.is-style-kal-list-secondary li:before {
  content: '●';
  color: #008000;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
  font-weight: bold;
}

.wp-block-list.is-style-kal-list-checkmark-primary {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-kal-list-checkmark-primary li {
  padding-left: 32px;
  margin-bottom: 12px;
  position: relative;
}

.wp-block-list.is-style-kal-list-checkmark-primary li:before {
  content: '✓';
  color: #800080;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.wp-block-list.is-style-kal-list-checkmark-secondary {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-kal-list-checkmark-secondary li {
  padding-left: 32px;
  margin-bottom: 12px;
  position: relative;
}

.wp-block-list.is-style-kal-list-checkmark-secondary li:before {
  content: '✓';
  color: #008000;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

/* ============================================================================
   TABLE STYLES (core/table)
   ============================================================================ */

.wp-block-table.is-style-kal-table-striped-primary {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(128, 0, 128, 0.1);
}

.wp-block-table.is-style-kal-table-striped-primary table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table.is-style-kal-table-striped-primary th {
  background-color: #800080;
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

.wp-block-table.is-style-kal-table-striped-primary tbody tr:nth-child(even) {
  background-color: #f9f5fb;
}

.wp-block-table.is-style-kal-table-striped-primary td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8e3f0;
}

.wp-block-table.is-style-kal-table-striped-secondary {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 128, 0, 0.1);
}

.wp-block-table.is-style-kal-table-striped-secondary table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table.is-style-kal-table-striped-secondary th {
  background-color: #008000;
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

.wp-block-table.is-style-kal-table-striped-secondary tbody tr:nth-child(even) {
  background-color: #f1f9f1;
}

.wp-block-table.is-style-kal-table-striped-secondary td {
  padding: 12px 16px;
  border-bottom: 1px solid #dce8dc;
}

.wp-block-table.is-style-kal-table-header-primary {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table.is-style-kal-table-header-primary th {
  background: linear-gradient(135deg, #800080 0%, #620055 100%);
  color: white;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  border-bottom: 3px solid #800080;
}

.wp-block-table.is-style-kal-table-header-primary td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8e3f0;
}

.wp-block-table.is-style-kal-table-header-secondary {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table.is-style-kal-table-header-secondary th {
  background: linear-gradient(135deg, #008000 0%, #004e05 100%);
  color: white;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  border-bottom: 3px solid #008000;
}

.wp-block-table.is-style-kal-table-header-secondary td {
  padding: 12px 16px;
  border-bottom: 1px solid #dce8dc;
}

/* ============================================================================
   ACCORDION STYLES (core/details)
   ============================================================================ */

.wp-block-details.is-style-kal-accordion-primary {
  border: 1px solid #800080;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.wp-block-details.is-style-kal-accordion-primary > summary {
  background: linear-gradient(135deg, #800080 0%, #9a1998 100%);
  color: white;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s ease;
}

.wp-block-details.is-style-kal-accordion-primary > summary:hover {
  background: linear-gradient(135deg, #9a1998 0%, #b3219a 100%);
}

.wp-block-details.is-style-kal-accordion-primary > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details.is-style-kal-accordion-primary > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 12px;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.wp-block-details.is-style-kal-accordion-primary[open] > summary::before {
  transform: rotate(90deg);
}

.wp-block-details.is-style-kal-accordion-primary > *:not(summary) {
  padding: 16px;
  background-color: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.wp-block-details.is-style-kal-accordion-secondary {
  border: 1px solid #008000;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.wp-block-details.is-style-kal-accordion-secondary > summary {
  background: linear-gradient(135deg, #008000 0%, #00a010 100%);
  color: white;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s ease;
}

.wp-block-details.is-style-kal-accordion-secondary > summary:hover {
  background: linear-gradient(135deg, #00a010 0%, #00c412 100%);
}

.wp-block-details.is-style-kal-accordion-secondary > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details.is-style-kal-accordion-secondary > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 12px;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.wp-block-details.is-style-kal-accordion-secondary[open] > summary::before {
  transform: rotate(90deg);
}

.wp-block-details.is-style-kal-accordion-secondary > *:not(summary) {
  padding: 16px;
  background-color: #fafafa;
  border-top: 1px solid #f0f0f0;
}

/* ============================================================================
   TABS STYLES (core/tabs) - For future use if tabs block becomes available
   ============================================================================ */

.wp-block-tabs.is-style-kal-tabs-primary .wp-block-tabs__tabs-list {
  border-bottom: 2px solid #800080;
  display: flex;
  gap: 0;
}

.wp-block-tabs.is-style-kal-tabs-primary .wp-block-tabs__tab-button {
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #666;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.wp-block-tabs.is-style-kal-tabs-primary .wp-block-tabs__tab-button.active {
  color: #800080;
  border-bottom-color: #800080;
  background: rgba(128, 0, 128, 0.04);
}

.wp-block-tabs.is-style-kal-tabs-primary .wp-block-tabs__tab-button:hover {
  color: #800080;
}

.wp-block-tabs.is-style-kal-tabs-primary .wp-block-tabs__tab-content {
  padding: 20px;
  background-color: #f9f5fb;
}

.wp-block-tabs.is-style-kal-tabs-secondary .wp-block-tabs__tabs-list {
  border-bottom: 2px solid #008000;
  display: flex;
  gap: 0;
}

.wp-block-tabs.is-style-kal-tabs-secondary .wp-block-tabs__tab-button {
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #666;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.wp-block-tabs.is-style-kal-tabs-secondary .wp-block-tabs__tab-button.active {
  color: #008000;
  border-bottom-color: #008000;
  background: rgba(0, 128, 0, 0.04);
}

.wp-block-tabs.is-style-kal-tabs-secondary .wp-block-tabs__tab-button:hover {
  color: #008000;
}

.wp-block-tabs.is-style-kal-tabs-secondary .wp-block-tabs__tab-content {
  padding: 20px;
  background-color: #f1f9f1;
}

/* ============================================================================
   QUOTE STYLES (core/quote)
   ============================================================================ */

.wp-block-quote.is-style-kal-quote-primary {
  border-left: 5px solid #800080;
  padding-left: 20px;
  margin-left: 0;
  font-style: italic;
  color: #333;
  font-size: 1.1em;
  line-height: 1.6;
}

.wp-block-quote.is-style-kal-quote-primary p {
  margin: 8px 0;
}

.wp-block-quote.is-style-kal-quote-primary cite {
  font-style: normal;
  color: #800080;
  font-weight: 600;
  margin-top: 12px;
  display: block;
}

.wp-block-quote.is-style-kal-quote-secondary {
  border-left: 5px solid #008000;
  padding-left: 20px;
  margin-left: 0;
  font-style: italic;
  color: #333;
  font-size: 1.1em;
  line-height: 1.6;
}

.wp-block-quote.is-style-kal-quote-secondary p {
  margin: 8px 0;
}

.wp-block-quote.is-style-kal-quote-secondary cite {
  font-style: normal;
  color: #008000;
  font-weight: 600;
  margin-top: 12px;
  display: block;
}

.wp-block-quote.is-style-kal-quote-primary-bg {
  background: linear-gradient(135deg, #f9f5fb 0%, #ede8f3 100%);
  border-left: 5px solid #800080;
  padding: 20px;
  border-radius: 6px;
  font-style: italic;
  color: #333;
  font-size: 1.1em;
  line-height: 1.6;
  margin-left: 0;
}

.wp-block-quote.is-style-kal-quote-primary-bg p {
  margin: 8px 0;
}

.wp-block-quote.is-style-kal-quote-primary-bg cite {
  font-style: normal;
  color: #800080;
  font-weight: 600;
  margin-top: 12px;
  display: block;
}

.wp-block-quote.is-style-kal-quote-secondary-bg {
  background: linear-gradient(135deg, #f1f9f1 0%, #e8f0e8 100%);
  border-left: 5px solid #008000;
  padding: 20px;
  border-radius: 6px;
  font-style: italic;
  color: #333;
  font-size: 1.1em;
  line-height: 1.6;
  margin-left: 0;
}

.wp-block-quote.is-style-kal-quote-secondary-bg p {
  margin: 8px 0;
}

.wp-block-quote.is-style-kal-quote-secondary-bg cite {
  font-style: normal;
  color: #008000;
  font-weight: 600;
  margin-top: 12px;
  display: block;
}