@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@500&family=Barlow+Semi+Condensed:wght@500&family=EB+Garamond&display=swap');

/* ==========================================================
   KUND ANPASSADE STYLE INSTÄLLNINGAR
   Sätt ett värde på variablarna eller använd 0/none, kommentera inte bort variablarna.
   Om du vill använda dig utav hero bild, lägg till bild i images/hero.jpg/jpeg/png
   ========================================================== */

:root {

  /* GENERAL ----------------------------- */
  --primary-color: #002d69; /* Använd denna för en generell användbar färg */
  --secondary-color: #00142e; /* Använd denna för en generell användbar färg */
  --tertiary-color: #e7edf1; /* Använd denna för en generell användbar färg */

  --radius-xs: 0.5rem;
  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.8rem;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 32px rgba(0, 0, 0, 0.10);

  /* GENERAL END ----------------------------- */

  /* Body */
  --body-bg: var(--tertiary-color);
  --body-font: "barlow", serif;

  /* Typography */
  --headline-font: "barlow", serif;
  --headline-font-weight: 700;
  --headline-color: var(--primary-color);

  --text-font: "EB Garamond", serif;   /* Typography paragraphs */
  --text-font-weight: 400;
  --text-color: #061523;
  --text-muted: #426594;

  /* Content, main container - see how it looks with hero img and without */
  --main-padding: 3rem;
  --main-bg: #fff;
  --main-border: 1px solid #fafafa; 
  --main-border-radius: 1rem;

  /* Hero */
  --hero-no-img-height: 180px; /* minumum height utan bild */  
  --hero-no-img-bg: rgba(0, 0, 0, 0);
  --hero-no-img-headline-color: #1c385b; /* Rubriken på varje sida, utan bild*/
  --hero-no-img-lead-font: "barlow", serif;
  --hero-no-img-lead-color: #1c1c1c; /* Texten under rubriken */

  --hero-img-height: 380px; /* minumum height med bild*/
  --hero-img-bg: rgba(0, 0, 0, 0.394); /* Overlay färg på bild */
  --hero-img-headline-color: #d6dde6; /* Rubriken på varje sida, med bild*/
  --hero-img-lead-font: "barlow", serif;
  --hero-img-lead-color: #e1e2eb; /* Texten under rubriken */

  /* Navbar */
  --navbar-height: 70px;
  --navbar-bg: #fff;
  --navbar-shadow: var(--shadow-md); /* Använd shadow sm/md/lg, egen eller ingen */
  --navbar-link-decoration: uppercase;
  --navbar-link: #002d69;
  --navbar-link-hover: #002d69;

  /* Links */
  --link-color: var(--primary-color);
  --link-decoration: none;
  --link-hover-color: var(--secondary-color);
  --link-hover-decoration: underline;
  --link-visited-color: var(--secondary-color);

   /* All btns */
  --btn-font-size: 1rem;
  --btn-font-weight: 500;
  --btn-border-radius: 999px;
  --btn-padding: 8px 16px;

  /* buttons primary */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-color: var(--tertiary-color);
  --btn-primary-border: var(--primary-color);

  --btn-primary-hover-bg: var(--secondary-color);   /* hover and focus */
  --btn-primary-hover-color: var(--tertiary-color); /* hover and focus */
  --btn-primary-hover-border: var(--secondary-color); /* hover and focus */

  /* buttons primary outline */
  --btn-outline-primary-bg: none;
  --btn-outline-primary-color: var(--primary-color);
  --btn-outline-primary-border: var(--secondary-color);

  --btn-outline-primary-hover-bg: var(--secondary-color);   /* hover and focus */
  --btn-outline-primary-hover-color: var(--tertiary-color); /* hover and focus */
  --btn-outline-primary-hover-border: var(--secondary-color); /* hover and focus */

  /* Badge */
  --badge-padding: 0.3rem 0.6rem;
  --badge-font-size: 0.8em;

  /* event Card */
  --evcard-bg: #ffffff00;
  --evcard-border: none;
  --evcard-border-radius: var(--radius-md); /* Använd t.ex. 12px 0px om du har en border eller shadow */
  --evcard-img-border-radius: var(--radius-md);
  --evcard-shadow: none; /* Använd shadow sm/md/lg, egen eller ingen */
  --evcard-color: var(--primary-color);

  --evcard-hover-shadow: var(--shadow-md);
  --evcard-hover-bg: #ffffff00;

  --evcard-title-font: "Barlow Semi Condensed", sans-serif;
  --evcard-title-font-size: 1.25rem;
  --evcard-title-font-weight: 500;
  --evcard-title-font-color: var(--primary-color);

  --evcard-byline-font: sans-serif;
  --evcard-byline-font-size: 1rem;
  --evcard-byline-font-weight: 300;
  --evcard-byline-font-color: var(--primary-color);

  /* Form */
  --form-input-bg: var(--tertiary-color);
  --form-input-border-radius: var(--radius-xs);
  --form-input-border: #cad7df;
  --textarea-border-radius: var(--form-input-border-radius); /* larger text areas */

  /* Tables */
  --table-background: none;
  --table-thead-bg-color: #f8f9fa;

  /* Shopping basket */
  --basket-color: #2a1d6f;

   /* Alert */
  --alert-border: none;   /* Ange inte en färg, det kommer automatiskt. None eller tomt värde */
  --alert-border-radius: 12px;

  /* Modals */
  --modal-bg: rgb(255, 255, 255);
  --modal-border: 1px solid #d1dbe2;
  --modal-border-radius: var(--radius-sm);

  /* Ev Accordion */
  --accordion-radius: var(--radius-sm);
  --accordion-border: 0;
  --accordion-box-shadow: var(--shadow-md);
  --accordion-margin-bottom: 1rem;  /* Space mellan varje accordion */

  --accordion-hover-shadow: var(--shadow-lg);
  --accordion-hover-transform: scale(1.01);  /* scale(1.02 or transform: translateY(-3px)) */

  --accordion-closed-color: var(--primary-color);   /* Only btn row */
  --accordion-closed-bg: linear-gradient( 135deg,#9cb6de, #c7dae5); /* Only btn row */
  --accordion-closed-border: 0; /* Only btn row */
  --accordion-closed-font-weight: 600; /* Only btn row */
  --accordion-closed-font-size: 1.2rem; /* Only btn row */
  --accordion-closed-padding: 1.3rem 1.7rem; /* Only btn row */

  --accordion-open-bg: linear-gradient( 135deg,#c7dae5, #9cb6de); /* color of button */
  --accordion-open-color: var(--primary-color);
  --accordion-open-border: 0;
  --accordion-open-body-bg: rgb(255, 255, 255);

  /* Datepicker */
  --datepicker-border-color: #d1dbe2;   /* Colors */
  --datepicker-border-radius: var(--radius-sm);
  --datepicker-bg: var(--tertiary-color);

  --datepicker-header-bg: #425e88;
  --datepicker-header-text-color: #fff;
  --datepicker-heading-text-color: var(--primary-color);

  --datepicker-date-text-color: #fff;
  --datepicker-date-border-radius: var(--radius-xs);

  --datepicker-default-date-bg: #9cb6de;
  --datepicker-default-date-border-color: #9cb6de;

  --datepicker-active-date-bg: #0c983f;
  --datepicker-active-date-border-color: #0c983f;
  --datepicker-active-date-font-weight: 700;   /* Typography */

  /* Fullcalendar */

  /* Header */
  --fc-title-font-size: 1.25rem;
  --fc-title-color: #0f172a;
  --fc-title-font-weight: 600;
  --fc-title-style: uppercase; /* uppercase | lowercase | capitalize | none */

  --fc-header-padding: 6px;
  --fc-header-color: #0f172a;
  --fc-header-bg: #9cb6de;   /* Day Header */

  --fc-calendar-radius: var(--radius-md);   /* Calendar Container */
  --fc-body-bg: rgb(244, 244, 244);   /* Calendar Body color */

  --fc-grid-border-width: 2px;   /* Grid */
  --fc-grid-border-style: solid;
  --fc-grid-border-color: #ffffff;

  --fc-day-padding: 4px;
  --fc-today-bg: #d4ded3;   /* Today */
  --fc-disabled-day-bg: #e8e8e8;   /* Disabled day */

  --fc-event-text: var(--primary-color);   /* Events */
  --fc-event-padding: 4px 8px;
  --fc-border-radius: var(--radius-xs);
  --fc-event-hover-brightness: 0.95;   /* Event hover */

  /* Footer */
  --footer-bg: #fff;
  --footer-color: var(--primary-color);
  --footer-padding: 2rem 0;
  --footer-line-color: var(--hr-border-color);

  --footer-link-color: var(--primary-color);
  --footer-link-hover-color: var(--secondary-color);

  /* Övrigt (lägg till egna delar här om önskas) */
  --hr-border-color: #c7ccda;

}



/* ==========================================================
   BODY, TEXT
   ========================================================== */

body {
  background-color: var(--body-bg);
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headline-font);
  font-weight: var(--headline-font-weight);
  color: var(--headline-color);
}

p {
  font-family: var(--text-font);
  font-weight: var(--text-font-weight);
  color: var(--text-color);
}

.text-muted {
  color: var(--text-muted);
}

/* ==========================================================
   CONTENT - Main container
   ========================================================== */
#bodyContent header + main > .container{
  padding: var(--main-padding);
  background-color: var(--main-bg);
  border: var(--main-border);
  border-radius: var(--main-border-radius);
  box-shadow: var(--shadow-md);
}

/* ==========================================================
   HERO
   ========================================================== */

.hero-no-image{
  min-height: var(--hero-no-img-height);
  background-color: var(--hero-no-img-bg);
  color: var(--hero-no-img-headline-color);
}

.hero-no-image h2{
  color: var(--hero-no-img-headline-color);
}

.hero-no-image .lead, .lead a , .lead a:hover , .lead a:focus , .lead a:visited {
  font-family: var(--hero-no-img-lead-font);
  color: var(--hero-no-img-lead-color);
}

.hero-with-image {
  min-height: var(--hero-img-height);
}

.hero-with-image::before {
  background-color: var(--hero-img-bg);
}

.hero-with-image h2{
  color: var(--hero-img-headline-color);
}

.hero-with-image .lead, .lead a , .lead a:hover , .lead a:focus , .lead a:visited {
  font-family: var(--hero-img-lead-font);
  color: var(--hero-img-lead-color);
}


/* ==========================================================
   NAVBAR
   ========================================================== */

.navbar {
  min-height: var(--navbar-height);
  background-color: var(--navbar-bg);
  box-shadow: var(--navbar-shadow);
}

.navbar-nav .nav-link {
  color: var(--navbar-link);
  text-transform: var(--navbar-link-decoration);
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary);
}

.dropdown-menu {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

/* ==========================================================
   LINKS
   ========================================================== */

a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  transition: color 0.2s ease;
}

a:hover, a:focus{
  color: var(--link-hover-color);
  text-decoration: var(--link-hover-decoration);
}

a:visited {
  color: var(--link-visited-color);
}


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

.btn {
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: 1px solid var(--btn-primary-border);
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
}

.btn-outline-primary {
  background-color: var(--btn-outline-primary-bg);
  color: var(--btn-outline-primary-color);
  border: 1px solid var(--btn-outline-primary-border);
}

.btn-outline-primary:hover {
  background-color: var(--btn-outline-primary-hover-bg);
  color: var(--btn-outline-primary-hover-color);
  border: 1px solid var(--btn-outline-primary-hover-border);;
}

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

.badge {
  padding: var(--badge-padding);
  font-size: var(--badge-font-size); 
}

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

.evCard .card {
  overflow: hidden;
  background-color: var(--evcard-bg);
  border: 1px solid var(--evcard-border);
  border-radius: var(--evcard-border-radius);
  box-shadow: var(--evcard-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--evcard-color);
}

.card:hover {
  box-shadow: var(--evcard-hover-shadow);
  background-color: var(--evcard-hover-bg);
}

.evCard .card-img-top {
    transition: transform 0.3s ease;
    border-radius: var(--evcard-img-border-radius);
}

.evCard:hover .card-img-top {
    transform: scale(1.05);
}

.card-title{
  font-family: var(--evcard-title-font);
  font-size: var(--evcard-title-font-size);
  font-weight: var(--evcard-title-font-weight);
  color: var(--evcard-title-font-color);
}

.card-byline{
  font-family: var(--evcard-byline-font);
  font-size: var(--evcard-byline-font-size);
  font-weight: var(--evcard-byline-font-weight);
  color: var(--evcard-byline-font-color);
}

/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.form-select {
  background-color: var(--form-input-bg);
  border-radius: var(--form-input-border-radius);
  border-color: var(--form-input-border);
}

.textarea {
  border-radius: var(--textarea-border-radius);
}

/* ==========================================================
   TABLES
   ========================================================== */

.table {
  background: var(--table-background);
}

.table thead {
  background-color: var(--table-thead-bg-color);
}

/* ==========================================================
   SHOPPING BASKET
   ========================================================== */

#basketMenuDiv .fa-shopping-basket {
  color: var(--basket-color);
}

/* ==========================================================
   ALERTS
   ========================================================== */

.alert, .bg-success {
  border: var(--alert-border);
  border-radius: var(--alert-border-radius);
}

#evartContainer .bg-success{
  border-radius: var(--alert-border-radius);
}

/* ==========================================================
   MODALS
   ========================================================== */

.modal-content {
  background-color: var(--modal-bg);
  border-radius: var(--modal-border-radius);
  border: var(--modal-border);
  box-shadow: var(--shadow-md);
}


/* ==========================================================
   ACCORDION
   ========================================================== */


.accordion-item {
  border-radius: var(--accordion-radius);
  overflow: hidden;
}

.evAccordion .accordion-item {
    border: var(--accordion-border);
    border-radius: var(--accordion-radius);
    box-shadow: var(--accordion-box-shadow);
    margin-bottom: var(--accordion-margin-bottom);

    overflow: hidden;
    transition: transform .3s ease,  box-shadow .3s ease;
}

.evAccordion .accordion-item:hover {
    box-shadow: var(--accordion-hover-shadow);
    transform: var(--accordion-hover-transform);
}

.evAccordion .accordion-button {
    overflow: hidden;

    background: var(--accordion-closed-bg);
    color: var(--accordion-closed-color);
    border: var(--accordion-closed-border);
    box-shadow: none !important;

    font-weight: var(--accordion-closed-font-weight);
    font-size: var(--accordion-closed-font-size);
    padding: var(--accordion-closed-padding);
    transition: color .6s ease;
    z-index: 1;
}

.evAccordion .accordion-button::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--accordion-open-bg);

    opacity: 0;
    transition: opacity .6s ease;
    z-index: -1;          /* Put behind text */
    pointer-events: none; /* Prevent click issues */
}

.evAccordion .accordion-button:not(.collapsed) {
    color: var(--accordion-open-color);
}
.evAccordion .accordion-button:not(.collapsed)::before {
    opacity: 1;
}
.accordion-button:not(.collapsed)::before {
    opacity: 1;
}

.evAccordion .accordion-button:not(.collapsed) {
    background: var(--accordion-open-bg);
    color: var(--accordion-open-color);
}

.evAccordion .accordion-button::after {
    transition: transform .35s ease;
}

.evAccordion .accordion-body {
    background: var(--accordion-open-body-bg);
    padding: 0;
}

.accordion-collapse {
    transition: height .45s cubic-bezier(0.4,0,0.2,1);
}


/* ==================================================
   DATE PICKER
   ================================================== */

.ui-widget {
    border-radius: var(--datepicker-border-radius);
    border: 1px solid var(--datepicker-border-color) !important;
    background-color: var(--datepicker-bg);
    box-shadow: var(--shadow-md);
}

.ui-widget-header {
    border-radius: var(--datepicker-border-radius);
    background-color: var(--datepicker-header-bg);
    color: var(--datepicker-header-text-color);
    border: none;
}

.ui-datepicker th {
    color: var(--datepicker-heading-text-color);
}

.red-background .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    background: var(--color-danger);
    color: var(--datepicker-date-text-color);
    text-align: center;
}

.green-background .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    background: var(--color-success);
    color: var(--datepicker-date-text-color);
    text-align: center;
}

.alDate-background .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    background: var(--datepicker-default-date-bg);
    border-color: var(--datepicker-default-date-border-color);
    color: var(--datepicker-date-text-color);
    text-align: center;
}

.ui-datepicker-week-end .ui-state-default,
.ui-datepicker-unselectable .ui-state-default,
.ui-state-disabled .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    text-align: center;
}

.alDate-background a.ui-state-active {
    background-color: var(--datepicker-active-date-bg);
    border: 1px solid var(--datepicker-active-date-border-color);
    font-weight: var(--datepicker-active-date-font-weight);
    text-align: center;
}

/* ==================================================
   FULLCALENDAR
   ================================================== */

/* Header title */
.fc .fc-toolbar-title {
  font-size: var(--fc-header-font-size);
  color: var(--fc-heading-color);
  font-weight: var(--fc-header-font-weight);
  text-transform: var(--fc-header-style);
}

/* Day headers */
.fc .fc-col-header-cell {
  background: var(--fc-header-bg);
  color: var(--fc-heading-color);
  font-weight: var(--fc-header-font-weight);
}

/* Calendar body container */
.fc .fc-view-harness {
  border-radius: var(--fc-calendar-radius);
  overflow: hidden;
  background: var(--fc-body-bg);
}

/* Grid */
.fc th,
.fc td,
.fc .fc-scrollgrid {
  border-width: var(--fc-grid-border-width);
  border-style: var(--fc-grid-border-style);
  border-color: var(--fc-grid-border-color);
}

/* Today */
.fc .fc-daygrid-day.fc-day-today {
  background: var(--fc-today-bg) !important;
}
/* Disabled day */
.fc .fc-day-disabled{
    background: var(--fc-disabled-day-bg) !important;
}

.fc .fc-daygrid-day{
  padding: var(--fc-day-padding);
}

/* Event styling */
.fc .fc-event {
  color: var(--fc-event-text);
  border-radius: var(--fc-border-radius);
  padding: var(--fc-event-padding);
}

/* Event hover */
.fc .fc-event:hover {
  filter: brightness(var(--fc-event-hover-brightness));
}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer {
  background-color: var(--footer-bg)!important;
  padding: var(--footer-padding);
}

.footer hr{
  color: var(--footer-line-color);
}

.footer p{
  color: var(--footer-color);
}

.footer a, .footer a:visited {
  color: var(--footer-link-color);
}

.footer a:hover {
  color: var(--footer-link-hover-color)!important;
}

/* ==========================================================
   ÖVRIGT
   ========================================================== */

hr, hr.border{
  color: var(--hr-border-color);
  border-color: var(--hr-border-color)!important;
}