/* Animation keyframes */
@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
} 
 
 body {
/* Animated gradient background, animerade bakgrunden som ändrar färg */
  margin: 0;
  padding: 0;
  /*padding-top: 90px; /*behövs för meny överst*/
  /*font-family: "Times New Roman", Times, serif; /*Hela hemsidans font*/
  font-family: 'Inter', sans-serif;
  color: rgb(11, 8, 8); /*Färg på font/
  /*text-align: center;*/ /*Gör att allt text centreras överallt */

  /* Gradient inställning */
  background: linear-gradient(-45deg, #f6f1ee, #bca5b0, #b0c4c8, #d2c5e0); /*Färgerna som skiftar*/
  background-size: 400% 400%; /* gör att den kan animera över stor yta */
  animation: gradientBG 15s ease infinite; /* 15 sekunder loopar oändligt */
  /*BODY STÄNGD*/
}

/*Startsidans inställningar*/

main h1 { /*ALLA rubriker h1 i main*/
  color: rgb(0, 0, 0);
  text-align: center;
}

.content {
  margin-left: 150px; /* 👈 matchar sidebar + lite luft */
}

.hero { /*BANNER PÅ SIDAN*/
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: url("images/stenhagen.jpg") center/cover no-repeat;

  border-radius: 12px;
  margin: 20px;
  overflow: hidden;
}

.hero::before { /*BANNER på sidan*/
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero-text h1 { /*endast rubriken på start - BRF Kantstenen*/
  color: white;
  font-size: 60px;
  font-style: oblique;
  text-shadow: 1px 1px 2px black, 0 0 25px rgb(236, 150, 20), 0 0 5px rgb(206, 131, 131);
}

.main-content {
  width: 95%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px; /*gap mellan karta och textrutan*/
  margin: 20px;
}

.card {
  width: 100%;
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.card:hover { /*Rörlighet när man står vid kartan eller textrutan på start*/
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.card img {
  width: 100%;
  max-width: none;
  border-radius: 8px;
}

/* Sidebar navigation */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 160px; 
  height: 100vh; 
  overflow: auto; /*Denna är viktig för sidebaren ska skrollas, men separat skrollning*/
  
  background-color: rgba(248, 239, 200, 0.75); /* 👈 genomskinlig */
  backdrop-filter: blur(8px); /* 👈 ger modern glass-effekt */
  padding: 15px; /*Ju lägre padding, desto större strl på meny-boxarna "hem", "nyheter" osv*/
  box-sizing: border-box;
} 

.sidebar a {
  display: block;
  color: rgb(0, 0, 0);
  text-decoration: none;
  padding: 6px; /*minskade från 8->6 för mindre sidomeny*/
  margin: 8px 0;
  /*padding: 10px 14px; 
  margin: 0 5px;*/
 
  background-color: #f0bd8a;   /* ruta-färg */
  border: 2px solid #000000;   /* ramen */
  border-radius: 8px;

  font-size: 14px; /*För att få plats med sidomenyn minsskade jag strl på text*/
  text-align: center;
  font-weight: bold;
  cursor: pointer; /*denna gör menyknapparna markerbar*/
}

.sidebar a:hover { /*knapp sidebar när man trycker, ändrar färg*/
  background-color: #ff9f43;
  color: white;
}

.sidebar h2 {
  font-size: 2rem;
  color: rgb(0, 0, 0); /*Textfärg "Meny"*/
  text-align: center;
  margin: 0 0 10px 0; /*Mindre space under "meny"*/
}

/* === RUBRIK-STIL (Sofia) === */

/* Alla rubriker h1 o h2 på sidorna. Ersätts om annan regel anges efter denna */
h1, h2 {
  font-family: "Sofia", cursive;
  font-weight: normal;
}

/* "Meny" i sidbaren */
.sidebar h2 { /*Vi har definierat alla h2 ovan men denna överskriver regeln för just menyn i sidobaren, måste komma efter regeln över för att den ska gälla, vilket den gör nu*/
  font-family: "Fantasy", Papyrus;
  font-weight: bold;
  text-shadow: 1px 1px 1px #b67f12;
}

/*Kontakt-formulär sidan*/
.contact-page {
  width: 100%;
  display: flex;
  flex-direction: column; /*blir en kolumn vid mobilanpassning?*/
  align-items: center; /*centrerar rubrik och text*/
  text-align: center;
}

textarea { /*meddelande rutan*/
  width: 450px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-family: inherit;
  font-size: 16px;
  resize: vertical;   /* användaren kan dra större */
  box-sizing: border-box;
  text-align: left;
}

/*Inställningar för Skicka knappen*/
button {
  padding: 5px 10px;     /* gör knappen större */
  font-size: 10px;        /* större text */
  border-radius: 8px;     /* mjuka hörn */
  cursor: pointer;
}


/*VIKTIGA DATUM sidan, kalender design*/

.dates-content {
  max-width: 900px;
/*  margin: auto; sålänge*/ 
  margin: 20px auto;
margin-left: 180px;
  padding: 20px;
  text-align: left;
}

.dates-content h1 {
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.dates-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.date-row {
  display: flex;
  align-items: flex-start;
  background: rgba(255,255,255,0.85);
  padding: 15px 20px;
  border-radius: 6px;
}

.date-left {
  width: 90px;
  text-align: center;
  border-right: 2px solid #ccc;
  margin-right: 20px;
}

.date-day {
  font-size: 28px;
  font-weight: bold;
  display: block;
}

.date-month {
  font-size: 13px;
  text-transform: uppercase;
  color: #555;
}

.date-year {
  font-size: 13px;
  color: #555;
}

.date-right h3 {
  margin: 0;
  font-size: 18px;
}

.date-right p {
  margin: 5px 0 0;
  color: #333;
}

/*Slut på kalender sidan "Viktiga datum"*/


/*Nyheter-sidan*/

.news-paper {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  text-align: left;
}

.news-paper h2 {
  font-size: 28px;
  border-bottom: 3px solid #111;
  padding-bottom: 10px;
  margin-bottom: 40px;
}

.news-article {
  margin-bottom: 40px;
}

.news-meta {
  font-size: 13px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.news-article h3 {
  font-size: 22px;
  margin: 5px 0 10px;
}

.news-ingress {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.news-article p {
  line-height: 1.6;
  margin: 0 0 10px;
}

/*Slut nyheter sidan*/

/* === VANLIGA FRÅGOR SIDAN === */

h4 { /*Texten "Alla frågor" i Vanliga frågor sidan och överallt*/
  font-size: 22px;
  text-align: center;
}

h5 {
  font-size: 14px;
  text-align: center;
  font-family:'Inter', sans-serif;
}

.question-form {
  max-width: 500px;
  margin: 20px auto;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(3, 3, 3, 0.15);
}

.question-form label {
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.question-form input,
.question-form textarea {
  width: 95%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
}

.question-form button {
  background: #edb100;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.question-form button:hover {
  background: #2980b9;
}

#questionsList {
  max-width: 600px;
  margin: 20px auto;
}

  #questionsList div {
  background: rgba(255,255,255,0.9);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}


.question-item {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.question-item strong {
  color: #3498db;
}

/*POPUP delen i question sidan*/
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #333;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-family: 'Inter', sans-serif;
  z-index: 1000;
}

.toast.show {
  opacity: 1;
}

/*SLUT PÅ VANLIGA FRÅGOR*/

/* === PARKERING / GARAGE / FÖRRÅD === */

.parking-page {
  max-width: 1000px;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 200px;
  margin-right: auto;
  padding-right: 20px;

  /*max-width: 900px;
  margin: 40px auto;
  margin-left: 200px;
  padding: 20px;*/
  text-align: left;
}

.parking-page h1 {
  margin-bottom: 20px;
}

/* En rad */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Ikon */
.info-icon {
  font-size: 36px;
  line-height: 1;
  margin-top: 5px;
}

/* Text */
.info-text h2 {
  margin: 0 0 8px;
}

.info-text p {
  margin: 0;
  line-height: 1.6;
}

/* === FELANMÄLAN & SERVICE === */

.service-page {
  max-width: 1000px;

  margin-top: 40px;
  margin-bottom: 40px;

  margin-left: 200px;     /* plats för sidebar */
  margin-right: auto;     /* trycker in innehållet snyggt */

  padding-right: 20px;    /* luft på höger sida */
}
  /* ERSÄTTE NEDAN MED OVAN
  max-width: 1000px;
  margin: 40px auto;
  margin-left: 180px;
  text-align: left;
  */


.service-page h1 {
  font-family: "Sofia", sans-serif;
  font-size: 32px;
  margin-bottom: 10px;
}

.service-intro { /*Tagit bort denna på html*/
  font-size: 16px;
  margin-bottom: 30px;
  color: #333;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.service-card {
  background: rgba(255,255,255,0.9);
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.service-card h2 {
  font-family: "Sofia", sans-serif;
  margin-top: 0;
  margin-bottom: 10px;
}

.service-card p {
  margin-bottom: 15px;
}

.service-card ul {
  list-style: none;
  padding: 0;
}

.service-card li {
  margin-bottom: 8px;
}

.service-card a {
  color: #2c3e50;
  font-weight: bold;
  text-decoration: none;
}

.service-card a:hover {
  text-decoration: underline;
}


.footer {
  margin-top: 100px; /*Avstånd från toppen dvs ju högre värde desto längre ned är fotnoten*/
  margin-left: 20px;
  width: calc(100% - 50px);
  padding: 10px 10px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: auto;
  gap: 40px;
}

.footer-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.footer-section p {
  margin: 3px 0;
  font-size: 14px;
  color: #444;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: #777;
}

/* Wrapper för hela sidan */
.pdf-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 15px;

    width: 100%;
    max-width: 100%;

    /*margin: 0 auto;*/

    margin-bottom: 50px; /*space mellan pdf:en*/
}

/* Download-knappen */
.download-btn {
    display: inline-block;
    margin-bottom: 1px; /*Avstånd till pdfen från knappen*/
    padding: 12px 24px; /*Ladda ned knappens storlek*/
    background-color: #ff6600; /* Ladda ned knapp - färg */
    color: rgb(0, 0, 0); /*textfärg*/
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    transition: 0.3s ease;
}

/* Hover effekt */
.download-btn:hover {
    background-color: #e65c00;
}

/* PDF container */

.pdf-container {
    width: 100%;
    max-width: 750px; /* lite smalare = mer dokumentkänsla */

    aspect-ratio: 1 / 1.414; /* exakt A4 proportion */

    margin: 1px auto 0 auto; /* <-- viktigt, mindre avstånd uppåt */
    
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

/* Själva PDF:en */
.pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.maklare-page h3 {
  text-align: center;
}

.medlemsinfo h4 {
  text-align: center;
  font-weight: normal;
  font-size: 18px;
}

/*COOKIES DELEN HÄMTAD FRÅN AI*/

#cookie-banner {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 650px);
    z-index: 99999;

    background: rgba(35, 35, 35, 0.92);
    backdrop-filter: blur(12px);

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 12px 40px rgba(0,0,0,.45);

    animation: cookieFade .35s ease;
}

.cookie-content{

    padding:28px;

    color:white;

    font-family:Inter,sans-serif;

}

.cookie-content h2{

    margin-top:0;

    margin-bottom:15px;

    font-size:28px;

}

.cookie-content p{

    line-height:1.7;

    font-size:16px;

    color:#e6e6e6;

}

.cookie-content a{

    color:#FFD54F;

    text-decoration:none;

    font-weight:600;

}

.cookie-content a:hover{

    text-decoration:underline;

}

.cookie-buttons{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:28px;

    flex-wrap:wrap;

}

.cookie-buttons button{

    border:none;

    padding:13px 24px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.cookie-decline{

    background:#4b4b4b;

    color:white;

}

.cookie-decline:hover{

    background:#5d5d5d;

}

.cookie-accept{

    background:#FFD54F;

    color:#222;

}

.cookie-accept:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(255,213,79,.35);

}

@keyframes cookieFade{

    from{

        opacity:0;

        transform:translate(-50%,35px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}

@media(max-width:700px){

.cookie-content{

padding:22px;

}

.cookie-buttons{

flex-direction:column;

}

.cookie-buttons button{

width:100%;

}

.cookie-content h2{

font-size:24px;

}

}



/* ==========================
   RESPONSIV DESIGN SKA VARA LÄNGST NED. För små skärmar upp till 768px (ändrade till 900)
   ========================== */

@media (max-width: 780px) {

  .main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .main-content .card:first-child img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .content { /*till bannern*/
    margin-left: 0;
  }

  /* BODY */
  body {
    text-align: left;
  }

  /* SIDOMENY */
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sidebar h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  .sidebar a {
    margin: 5px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.3);
    border-radius: 6px;
    cursor: pointer;
  }

  /* INNEHÅLL , tog bort  .question-form då den hamna på vänster sida
  Dessa sidor nedan kommer vara centrerade */
  .content,
  .dates-content,
  .news-paper,
  .parking-page,
  .service-page, 
  .questions-list{
   margin-left: 0;
   /* padding: 15px; tillfälligt*/ 
  }

  /* BILDER */
  img {
    width: 100%;
    max-width: 100%;
  }

  /* NYHETER */
  .news-article h3 {
    font-size: 20px;
  }

  /* DATUM */
  .date-row {
    flex-direction: column;
  }

  .date-left {
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

.info-row {
  flex-direction: column;
}

.info-icon {
  font-size: 32px;
}

.footer-content {
  flex-direction: column;
  text-align: center;
}

    .pdf-container {
        height: 70vh;
        border-radius: 0;
    }

    .download-btn {
        width: 100%;
        max-width: 300px;
    }

}






/* ==========================
   INTEGRITETSPOLICY
   ========================== */

.privacy-page {
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 30px auto;
  box-sizing: border-box;
}

.privacy-card {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 40px 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.privacy-card h1 {
  margin-top: 0;
  margin-bottom: 25px;
}

.privacy-card h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}

.privacy-card p {
  line-height: 1.7;
  margin-bottom: 15px;
}


/* Mobil */
@media (max-width: 780px) {

  .privacy-page {
    width: calc(100% - 30px);
    margin: 20px auto;
  }

  .privacy-card {
    padding: 25px 20px;
  }

}