/* ==========================================================================
   COMPONENTS
   ========================================================================= */

/* ==========================================================================
   BUTTONS
   ========================================================================= */

/* Buttons - bridge to Bootstrap button variables */
.btn-primary{
  --bs-btn-bg: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #004a8c;
  --bs-btn-hover-border-color: #004a8c;
}
.btn-success{
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-color: #fff;
}
.btn-warning{
  --bs-btn-bg: var(--brand-yellow);
  --bs-btn-border-color: var(--brand-yellow);
  --bs-btn-color: #000;
}

/* Reusable button variants matching design system */
.btn-neutral-dark{
  --bs-btn-bg: var(--text);
  --bs-btn-border-color: var(--text);
  --bs-btn-color: var(--bg);
  --bs-btn-hover-bg: var(--text);           /* keep dark on hover */
  --bs-btn-hover-border-color: var(--text); /* keep dark on hover */
  --bs-btn-hover-color: var(--bg);
  /* Typography and sizing */
  font-family: var(--font-sans-1) !important; /* Roboto */
  font-weight: var(--w-medium) !important;   /* 500 */
  letter-spacing: 0 !important;
  --bs-btn-font-size: var(--fs-body1) !important;
  --bs-btn-line-height: 24px !important;
  --bs-btn-padding-y: 10px !important;
  --bs-btn-padding-x: 32px !important;
  --bs-btn-border-radius: 4px !important;
  background-clip: padding-box;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Hover/active gradient overlay (10% white on var(--text)) */
.btn-neutral-dark:hover,
.btn-neutral-dark:active {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
                    linear-gradient(0deg, var(--text), var(--text));
  border-color: var(--text);
  color: var(--bg);
  text-decoration: none;
}

/* Keyboard focus: blue ring + inner white stroke (per spec) */
.btn-neutral-dark:focus-visible {
  outline: 2px solid var(--brand-blue) !important;
  outline-offset: 2px !important;
  background-color: var(--text) !important;
  /*color: #fff;*/
  box-shadow: inset 0 0 0 2px #ffffff !important;
  background-clip: unset !important;
  box-shadow: none !important;
}

/* Remove underline for anchor buttons */
a.btn-neutral-dark,
a.btn-neutral-dark:hover,
a.btn-neutral-dark:focus,
a.btn-neutral-dark:focus-visible {
  text-decoration: none !important;
}

.btn-secondary-light{
  --bs-btn-bg: var(--brand-blue-light);
  --bs-btn-border-color: var(--brand-blue-light);
  --bs-btn-hover-bg: var(--brand-blue-light);
  --bs-btn-hover-border-color: var(--brand-blue-light);
  --bs-btn-active-bg: var(--brand-blue-light);
  --bs-btn-active-border-color: var(--brand-blue-light);
  --bs-btn-color: var(--grey-dark);
  --bs-btn-hover-color: var(--grey-dark);
  --bs-btn-active-color: var(--grey-dark);
  font-family: var(--font-sans-1) !important;
  font-weight: var(--w-medium) !important;
  --bs-btn-font-size: var(--fs-body1) !important;
  --bs-btn-line-height: 24px !important;
  --bs-btn-padding-y: 10px !important;
  --bs-btn-padding-x: 32px !important;
  --bs-btn-border-radius: 4px !important;
  background-clip: padding-box;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Keep text dark and remove underline on hover/focus */
.btn-secondary-light:hover,
.btn-secondary-light:focus,
.btn-secondary-light:focus-visible {
  color: var(--grey-dark) !important;
  text-decoration: none;
}
a.btn-secondary-light,
a.btn-secondary-light:hover,
a.btn-secondary-light:focus,
a.btn-secondary-light:focus-visible { text-decoration: none; }
/* Hover: light blue with 5% black overlay */
.btn-secondary-light:hover {
  background-image: linear-gradient(0deg, #0000000D, #0000000D),
                    linear-gradient(0deg, #D4E3F5, #D4E3F5);
  color: var(--grey-dark);
}
/* Active mirrors hover to avoid flicker */
.btn-secondary-light:active {
  background-image: linear-gradient(0deg, #0000000D, #0000000D),
                    linear-gradient(0deg, #D4E3F5, #D4E3F5);
}
/* Keyboard focus: white stroke */
.btn-secondary-light:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important ;
}

/* Purple rounded button style */
.btn-purple {
  --bs-btn-bg: var(--brand-purple);
  --bs-btn-border-color: var(--comp-4);
  --bs-btn-hover-bg: #5f246a;
  --bs-btn-hover-border-color: var(--comp-4);
  --bs-btn-color: #fff;
  border-width: 1px;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
  .btn-purple {
    --bs-btn-bg: #000000;
    --bs-btn-hover-bg: var(--comp-2);
  }  
}

/* Comp circle button (dark chip with subtle border) */
.btn-comp-circle {
  border: 1px solid var(--comp-3);
  color: #fff;
}
.btn-comp-circle:hover {
  border: 1px solid var(--comp-3) !important;  
}

/* Prefer brand-blue focus ring for buttons on light backgrounds.
   This overrides the global :focus-visible white ring used in dark sections. */
.btn:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--brand-blue) !important;
  outline-offset: 2px !important;
}

/* Core button fallback */
.wp-block-button__link,
button,
input[type="button"],
input[type="submit"] {
  font-family: var(--font-sans-1);
  font-weight: var(--w-bold);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  border-radius: var(--radius-xl);
}

/* ==========================================================================
   FORM AND BUTTON SIZING UTILITIES (Bootstrap-compatible)
   ========================================================================= */

/* Buttons: target Bootstrap CSS vars so this can be combined with .btn, .btn-primary etc. */
.btn-size-44 {
  --bs-btn-font-size: var(--fs-button);
  --bs-btn-line-height: var(--lh-button);
  /* 11px * 2 + 20px line-height + 2px border ≈ 44px total */
  --bs-btn-padding-y: 11px;
  --bs-btn-padding-x: 16px;
}

/* Icon-only square button, 44x */
.btn-icon-44 {
  --bs-btn-border-radius: var(--radius-circle);
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Smaller icon button for 36px circle inside inputs */
.btn-icon-36 {
  border-radius: var(--radius-circle);
  border-top-left-radius: 100px !important;
  border-bottom-left-radius: 100px !important;
  margin-right: 2px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Inputs/selects: fixed heights per design tokens */
.form-control-44,
.form-select-44 {
  height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: var(--radius-xl);
}

.form-control-36,
.form-select-36 {
  height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-xl);
}

/* Harmonize input-group when mixing with sized controls */
.input-group {align-items: center;} 
.input-group > .form-control-44,
.input-group > .form-select-44 { height: 44px; }
.input-group > .form-control-36,
.input-group > .form-select-36 { height: 36px; }

/* Neutral form controls (gray borders and focus, not blue) */
.form-control,
.form-select {
  border-color: var(--grey-light) !important;
  box-shadow: none;
  padding: 13px 16px !important;
  border-radius: 4px;
} 
.form-control:focus,
.form-select:focus {
  border-color: var(--focus-ring-color) !important;
}

/* ==========================================================================
   CARDS
   ========================================================================= */

.vb-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--space-24);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

/* News card */
.vb-news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vb-news-card:hover .vb-news-card__title {
  text-decoration: underline;
}
/* Could use some tidy-up */
.vb-news-card.vb-library-card:hover .vb-news-card__title {
  text-decoration: none;
}
.vb-news-card.vb-library-card .vb-news-card__title a:hover {
  text-decoration: underline !important; 
}
.vb-news-card__image {
  width: 100%;
  aspect-ratio: 4 / 3; /* enforce 4:3 ratio */
  display: block;
  border-radius: 4px; /* requested */
  object-fit: cover; /* crop to fill */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.vb-news-card__date {
  text-transform: uppercase;
  font-family: var(--font-sans-1); /* Roboto */
  font-weight: var(--w-regular);
  font-size: var(--fs-body1);
  line-height: 24px;
  color: var(--grey-dark);
  margin: 20px 0;
}
.vb-news-card__title,
.vb-news-card__title > a {
  font-family: var(--font-sans-2); /* Archivo */
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: 30px;
  letter-spacing: 0;
  color: var(--grey-dark);
  margin-bottom: 12px;
}

/* Event cards: add top margin to title (events have .vb-news-card__content wrapper) */
.vb-news-card__content .vb-news-card__title {
  margin-top: 24px;
}

/* Event cards: dark color for excerpt */
.vb-news-card__content .vb-news-card__excerpt {
  color: var(--text);
}
.vb-news-card__excerpt {
  font-family: var(--font-sans-1); /* Roboto */
  font-weight: var(--w-regular);
  font-size: var(--fs-body2);
  line-height: 28px;
  color: var(--grey-dark);
  margin-bottom: 24px;
}

/* Keyboard focus for entire news card link */
.vb-news-card:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  text-decoration: none;
}

.vb-news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.vb-news-card__link:focus-visible {
  outline: 2px solid var(--focus-ring-color-light);
  outline-offset: 2px;
}

.vb-news-card__image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.vb-news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.vb-news-card__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Event card meta, aligned with news card spacing */
.vb-event-card__meta { 
  margin-top: 0px; 
 
}
.vb-event-card__row {
  margin: 0 0 8px 0;
  color: var(--grey-dark);
  font-family: var(--font-sans-1);
  font-size: var(--fs-body1);
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vb-event-card__row:last-child {
  margin-bottom: 0;
}
.vb-event-card__icon {
  flex-shrink: 0;
  opacity: 0.7;
}
.vb-event-card__label { 
  font-weight: var(--w-medium); 
  color: var(--grey-dark);
  min-width: fit-content;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .vb-event-card__icon,
  .vb-event-meta-item img {
    filter: invert(1) brightness(1.2);
  }
}

/* ==========================================================================
   BADGES
   ========================================================================= */

.vb-badge {
  display: inline-block;
  font-family: inherit;
  font-weight: var(--w-medium);
  border-radius: 999px;
  padding: 6px 16px;
  line-height: 1.43;
  width: max-content;
  align-self: center;
}
.vb-badge--sm { font-size: 0.75rem; padding: 4px 10px; }
.vb-badge--md { font-size: 0.875rem; padding: 6px 16px; }

/* Variants use theme tokens */
.vb-badge--blue   { color: var(--grey-dark); background: var(--brand-blue-light); }
.vb-badge--green  { color: var(--grey-dark); background: var(--brand-green-light); }
.vb-badge--purple { color: #fff; background: var(--brand-purple); }
.vb-badge--yellow { color: var(--grey-dark); background: var(--brand-yellow-light); }
.vb-badge--grey   { color: var(--grey-dark); background: var(--grey-ultralight); }

.vb-evenemang-content .vb-badge {
  margin-right: 8px;
}

a.vb-badge {
  transition: box-shadow 0.2s ease;
}

a.vb-badge:hover {
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.2);
}

/* ==========================================================================
   ICONS
   ========================================================================= */

/* Icon sizing utility (20x20 as per spec) */
.icon-20 { font-size: var(--fs-h3); width: 20px; height: 20px; line-height: 1; }

/* SVG <use> icons default (20px square, 1.5px stroke) */
.svg-icon { width: 20px; height: 20px; display: inline-block; }
.svg-icon svg { width: 100%; height: 100%; }
.stroke-1_5 { stroke-width: 1.5px; }

/* ==========================================================================
   BIBLIOTEK CARDS
   ========================================================================= */

.vb-bibliotek-card__contact {
  margin-bottom: 12px;
}

.vb-bibliotek-card__contact-item {
  margin-bottom: 4px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--grey-dark);
}

.vb-bibliotek-card__contact-item strong {
  font-weight: normal;
  font-size: var(--fs-body1);
}

.vb-bibliotek-card__contact-item a {
  color: inherit;
  text-decoration: underline !important;
}

.vb-bibliotek-card__hours {
  margin-bottom: 12px;
}

.vb-bibliotek-card__hours-item {
  margin-bottom: 4px;
  font-size: var(--fs-body1);
  line-height: 1.4;
  color: var(--grey-dark);
}

.vb-bibliotek-card__hours-item strong {
  font-weight: normal;
}

.vb-bibliotek-card__fritext {
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--brand-purple);
}
@media (prefers-color-scheme: dark) {
  .vb-bibliotek-card__fritext {
    border-left: 2px solid #3C3C3C;
  }  
}

.vb-bibliotek-card__fritext-text {
  margin: 0;
  font-size: var(--fs-body1);
  line-height: 24px;
  color: var(--grey-dark);
}

.vb-bibliotek-card__more {
  margin-top: auto;
}

.vb-bibliotek-card__more a {
  color: var(--grey-dark);
  text-decoration: underline !important;
  font-weight: var(--w-medium);
  font-size: var(--fs-body1);
  line-height: 24px;
}

#vb-open-main-menu:hover {
  background-image: none !important;
}


/* ==========================================================================
   TABLE HEADERS IN TABLEPRESS
   ========================================================================= */

.tablepress>:where(thead,tfoot)>tr>* {
  background-color: var(--brand-blue-light) !important;
  color: var(--grey-dark) !important;
  transition: box-shadow 0.2s ease;
}   

.tablepress thead .dt-orderable-asc:hover, .tablepress thead .dt-orderable-desc:hover, .tablepress thead .dt-ordering-asc, .tablepress thead .dt-ordering-desc {
  background-color: var(--brand-blue-light) !important;
  color: var(--grey-dark) !important;
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.2);
}