@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@font-face {
font-family: 'tingalidetFont';
src: url("fontface/Tingalid.ttf");
}
body { font-family: 'Crimson Text', serif; background-color: #f4f1ea; }
h1, h2, h3, .navbar-brand { font-family: 'Almendra', serif; }

.admin-pill {
          border: 1px solid #c5a059;
          border-radius: 20px;
          padding: 2px 15px !important;
          margin-left: 10px;
}
.gallery-thumb {
          transition: transform 0.2s ease-in-out, border-color 0.2s;
          cursor: pointer;
}
.gallery-thumb:hover {
          transform: scale(1.05);
          border-color: #ffc107 !important; /* Guld/Viking-gul färg */
}
@font-face {
font-family: 'tingalidetFont';
src: url("<?= URL_ROOT ?>css/fontface/Tingalid.ttf");
}
.runskrift {
          font: 1.1em tingalidetFont;
          line-height: 2em;
          border-top: 1px solid gray;
          border-bottom: 1px solid gray;
          background: rgba(215, 215, 215, 0.56);
          text-shadow: 1px 1px 1px #b5b2b2;
}
.stone-card-container img {
          height: 200px;
          object-fit: cover; /* Detta beskär bilden snyggt istället för att trycka ihop den */
          transition: transform 0.3s ease;
}

.stone-card-container .card:hover img {
          transform: scale(1.05); /* En subtil zoom-effekt när man hovrar */
}
.tag-link {
          color: #553f05; /* Bootstrap primary eller din egen färg */
          transition: all 0.2s ease-in-out;
          padding: 2px 5px;
          line-height: 1.2;
}

.tag-link:hover {
          color: #109201;
          opacity: 1 !important;
          transform: scale(1.1);
          background-color: rgba(13, 110, 253, 0.05);
          border-radius: 5px;
}
.text-truncate-2 {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;  
          overflow: hidden;
}

.list-group-item-action:hover {
          background-color: #f8f9fa;
          border-left: 4px solid #0f4e1e;
          padding-left: 12px !important; /* Liten "knuff" när man hovrar */
          transition: all 0.2s ease;
}
/* @group navbar */
 .viking-border {
            height: 25px; /* Justera efter din bilds höjd */
            background-image: url('../img/htmlTopp.png'); /* Din bild här */
            background-repeat: repeat-x;
            background-size: contain;
            background-color: #44381a; /* Mörk botten ifall bilden inte täcker allt */
              background-blend-mode: multiply;
            width: 100%;
          }
        
          /* 2. Navbaren */
          .navbar-tingalidet {
            background-color: #2d3a27; /* Djup mossa/skogsgrön */
            border-bottom: 3px solid #5d4037; /* Läderbrun/Jordig list */
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            padding: 0.5rem 1rem;
          }
        
          /* 3. Loggan */
          .navbar-brand img {
            max-height: 60px;
            filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
            transition: transform 0.4s ease;
          }
          .navbar-brand:hover img {
            transform: rotate(-3deg) scale(1.1);
          }
        
          /* 4. Länkarna */
          .navbar-tingalidet .nav-link {
            color: #e0d8c3 !important; /* Pergament-vit/Ljusbeige */
            font-family: 'Segoe UI', serif; /* Byt gärna till en serif-font för mer känsla */
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1.5px;
            padding: 0.5rem 1.2rem !important;
            transition: all 0.3s ease;
            position: relative;
          }
        
          /* Hover-effekt med guld/brons */
          .navbar-tingalidet .nav-link:hover {
            color: #c5a059 !important; /* Brons/Guld */
          }
        
          /* Aktiv länk - markerad med en liten "run-punkt" eller list */
          .navbar-tingalidet .actNav {
            color: #c5a059 !important;
          }
          .navbar-tingalidet .actNav::after {
            content: "";
            position: absolute;
            bottom: 5px;
            left: 20%;
            right: 20%;
            height: 2px;
            background-color: #c5a059;
          }
        
          /* Admin-sektion */
          .admin_nav_part {
            border: 1px solid #5d4037;
            background-color: rgba(93, 64, 55, 0.2);
            border-radius: 4px;
            margin-left: 10px;
          }
        
          /* Hamburgermeny-knappen */
          .navbar-toggler {
            border-color: #c5a059;
          }
          .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3 Accuracy='1' %3E%3Cpath stroke='rgba(197, 160, 89, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
          }

/* @end */
@keyframes markerHighlight {
    0% { filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
    50% { filter: brightness(1.5) drop-shadow(0 10px 8px rgba(0,0,0,0.5)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

.marker-bounce {
    animation: markerHighlight 0.6s infinite ease-in-out !important;
    z-index: 9999 !important;
}

.list-group-item { cursor: pointer; transition: all 0.2s; }
.list-group-item:hover { background-color: #fff9e6 !important; padding-left: 2rem !important; }
.list-group-item:active {
    transform: scale(0.98); /* Ger en liten "fysisk" klick-känsla */
    background-color: #ffc107 !important;
}
.card img {
    transition: transform .3s ease;
}
.card:hover img {
    transform: scale(1.03);
}
.card {
    overflow: hidden; /* Så att bilden inte zoomar utanför cardets kanter */
}