/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://example.com/
 Description:  Child theme för Hello Elementor
 Author:       Mattias / Smode
 Author URI:   https://example.com/
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* Lägg dina egna CSS-regler här */

@media (max-width: 768px) {
	.elementor-widget-button a {
		display: block!important;
			width: 100% !important;
			text-align: center;
	}
}


.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-toggle[aria-expanded=true]+.e-n-menu-wrapper {
    width: 300px;
    /* float: right; */
    right: 0px;
    left: -278px;
    top: 41px;
}

html body #dropdownmeny  li a {
	padding: 10px;
	text-align: left!important;
	padding-left: 26px;}

.e-n-menu-heading li:hover{
	color: black!important;}

html body .e-n-menu-title-container span:hover{
	color:black!important;
}

html body .elementor-button:hover {
	transform: scale(1.03); /* Ändra 1.03 till det värde du vill */
}

.header-overlay {  
  backdrop-filter: blur(3px);   /* blurrar det som ligger bakom */
  -webkit-backdrop-filter: blur(3px); /* för Safari */
}

html body .puff-bild, html body .puff-bild img {width: auto!important; height: 300px;
	
}

html body .sbi_header_text {
    color: rgb(26,44,75)!important;
}

@media only screen and (min-width: 1024px) and (max-width: 1234px){
    html body.page-id-66 h1 {
     font-size: 3.9rem!important;
     line-height: 4.5rem!important;
    }
}

a {
    color: #497FC1;
}

/* Färger */
:root{
  --smode-navy:#1a2c4b;
  --smode-yellow:#fcca03;
  --smode-border:#e5e7ef;
  --smode-head:#f1f4fa;
  --smode-today:#fff7cc;
}

/* Toolbar, knappar */
.smode-cal{--gap:.4rem}
.smode-cal__toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 .8rem}
.smode-cal__title{margin:0;color:var(--smode-yellow)}
.smode-cal__controls{display:flex;gap:.4rem;align-items:center}
.smode-cal__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.35rem .6rem;border-radius:.4rem;text-decoration:none;
  background:var(--smode-navy);color:var(--smode-yellow);border:1px solid var(--smode-navy);
}
.smode-cal__btn:hover{color:white;}
.smode-cal__picker select{padding:.3rem .5rem;border:1px solid var(--smode-border);border-radius:.35rem}

/* Rutnät */
.smode-cal__grid{display:grid;row-gap:var(--gap)}
.smode-cal__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap)}
.smode-cal__cell{border:1px solid var(--smode-border);min-height:7rem;background:#fff;padding:.45rem}
.smode-cal__cell--head{
  background:var(--smode-navy);color:var(--smode-yellow);text-align:center;font-weight:700;border-color:var(--smode-navy)
}
.smode-cal__cell--blank{background:transparent;border:none}
.smode-cal__cell--today{box-shadow:inset 0 0 0 2px var(--smode-yellow)}
.smode-cal__num{font-weight:700;color:var(--smode-navy);margin-bottom:.35rem}

/* Lista + klickbara chips */
.smode-cal__list{list-style:none;margin:0;padding:0}
.smode-cal__item{margin:0 0 .3rem}
.smode-cal__chip{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--smode-navy);color:var(--smode-yellow);
  text-decoration:none;border-radius:.42rem;padding:.35rem .5rem;border:1px solid var(--smode-navy);
}
.smode-cal__chip:hover{transform:translateY(-1px)}
.smode-cal__chip-title{font-weight:700;line-height:1.2}
.smode-cal__chip-badge{
  background:var(--smode-yellow);color:var(--smode-navy);
  border-radius:.32rem;padding:.05rem .4rem;font-size:.78rem;font-weight:700;white-space:nowrap
}

@media (max-width:768px){
  .smode-cal__cell{min-height:5.5rem}
}

/* ====== MOBILANPASSNING (≤ 820px) ====== */
@media (max-width: 820px){
  /* Tighter toolbar */
  .smode-cal__toolbar{gap:.5rem; flex-wrap:wrap}
  .smode-cal__title{font-size:1.05rem}
  .smode-cal__controls{gap:.35rem}
  .smode-cal__btn{padding:.25rem .45rem; font-size:.9rem; border-radius:.35rem}
  .smode-cal__picker select{padding:.25rem .4rem; font-size:.9rem}

  /* Gör kalendern skrollbar i sidled om den blir för smal */
  .smode-cal__grid{overflow-x:auto; -webkit-overflow-scrolling:touch}
  /* Varje vecka får en minsta bredd så 7 kolumner blir läsbara */
  .smode-cal__week{min-width: 700px} /* ≈ 7×100px + gap */

  /* Kompaktare celler */
  .smode-cal__cell{min-height:6rem; padding:.35rem}
  .smode-cal__cell--head{padding:.4rem .2rem; font-size:.9rem}

  /* Datum-numret mindre */
  .smode-cal__num{font-size:.95rem; margin-bottom:.3rem}

  /* Eventchip fyller cellen bättre */
  .smode-cal__list{gap:.25rem}
  .smode-cal__item{margin:0}
  .smode-cal__chip{
    width:100%;
    padding:.4rem .45rem;
    border-radius:.4rem;
    gap:.3rem;
  }
  .smode-cal__chip-title{font-size:.92rem; line-height:1.2}
  .smode-cal__chip-badge{font-size:.72rem; padding:.06rem .38rem; border-radius:.28rem}
}

/* ====== EXTRA KOMPAKT (≤ 480px) ====== */
@media (max-width: 480px){
  /* Gör veckoraden ännu smalare – resten scrollas horisontellt */
  .smode-cal__week{min-width: 630px} /* ≈ 7×85px */

  .smode-cal__title{font-size:1rem}
  .smode-cal__btn{font-size:.85rem; padding:.22rem .4rem}
  .smode-cal__picker select{font-size:.85rem; padding:.2rem .35rem}

  .smode-cal__cell{min-height:5.2rem; padding:.3rem}
  .smode-cal__cell--head{font-size:.85rem}
  .smode-cal__num{font-size:.9rem}

  .smode-cal__chip{padding:.35rem .4rem}
  .smode-cal__chip-title{font-size:.9rem}
  .smode-cal__chip-badge{font-size:.7rem}
}

/* ====== Färger och länk-tillstånd (ingen lila) ====== */
.smode-cal__chip,
.smode-cal__chip:link,
.smode-cal__chip:visited{ color:#fcca03 }     /* gul text */
.smode-cal__chip:hover,
.smode-cal__chip:active,
.smode-cal__chip:focus{ color:#fff }          /* vit vid hover/fokus */
.smode-cal__chip:hover .smode-cal__chip-title,
.smode-cal__chip:active .smode-cal__chip-title,
.smode-cal__chip:focus .smode-cal__chip-title{ color:#fff }
.smode-cal__chip:hover{ background:#1f3358 }  /* lätt ljusare navy */

/* Badge under rubriken (behåll från tidigare) */
.smode-cal__chip{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.35rem; background:#1a2c4b; border:1px solid #1a2c4b;
}
.smode-cal__chip-badge{
  align-self:flex-start; background:#fcca03; color:#1a2c4b;
  font-weight:700; line-height:1; padding:.08rem .45rem; border-radius:.32rem;
}

.smode-cal__chip-badge::before {
    content: "#";
}

/* Gör alla chips lika breda som cellen */
.smode-cal__chip{
  width:100%;
  box-sizing:border-box;
  display:flex;                 /* du använder flex i båda varianterna */
  flex-direction:column;        /* behåll din layout */
  align-items:flex-start;
  gap:.35rem;
  background:#1a2c4b;
  border:1px solid #1a2c4b;
}

/* Se till att text kan krympa inuti grid/flex */
.smode-cal__cell,
.smode-cal__item,
.smode-cal__chip,
.smode-cal__chip-title { min-width:0; }

/* Chipsen fyller cellen men spränger den inte */
.smode-cal__chip{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
}

/* Tillåt radbryt och avstavning i rubrik + badge */
.smode-cal__chip-title,
.smode-cal__chip-badge{
  min-width:0;
  max-width:100%;
  white-space: normal;          /* override ev. tidigare nowrap */
  overflow-wrap: anywhere;      /* bryt långa ord/strängar */
  word-break: break-word;       /* extra skydd – URLs, ids, etc */
  hyphens: auto;                /* infoga bindestreck där det går */
  -webkit-hyphens: auto;        /* Safari */
}

/* Om badgen ibland är lång kan du låta den radbrytas över flera rader */
.smode-cal__chip-badge{ align-self:auto; }