/* ====================================================
   GENERELT
   ==================================================== */

html {
    overflow-y: scroll;          /* lås scrollbar, så siden ikke hopper */
}

/* Global typografi + baggrund */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;         /* lidt større og mere læsevenligt */
    line-height: 1.65;
    color: #222222;
    background-color: #F7EEDB;   /* varm sandfarve */
    scrollbar-gutter: stable;
}

/* Afsnit og lister – ens størrelse */
p,
li {
    font-size: 1.125rem;
    margin-bottom: 0.9rem;
}

/* Links i brødtekst */
a {
    color: #0d6efd;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ====================================================
   OVERSKRIFTER
   ==================================================== */

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #222;
}

h1 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.9rem;
    margin-bottom: 0.75rem;
}

h3,
.h3 {
    font-size: 1.4rem;
}

/* ====================================================
   HEADER / TOPMENU (sandfarvet tema)
   ==================================================== */

.site-header {
    background-color: #C7B89D;   /* varm mørk sand */
    padding: 1rem 0;
}

/* Navn/brand */
.site-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #4B453A;              /* mørk sand/brun */
}

/* Horisontal menu */
.main-nav {
    display: flex;
    column-gap: 2.5rem;
}

/* Menupunkter */
.main-nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 1.08rem;
    font-weight: 400;
    color: #4B453A;
    text-decoration: none;
    padding: 0.25rem 0;
}

.main-nav-link:hover {
    color: #2E2A23;              /* lidt mørkere ved hover */
}

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

#hero {
    height: 80vh;
    overflow: hidden;
}

.hero-img {
    object-fit: cover;
    height: 80vh;
    width: 100%;
}

/* Pile (Bootstrap icons) */
.hero-arrow {
    color: #ffffff;
    font-size: 3rem;
    line-height: 1;
}

/* Placering af pile */
.carousel-control-prev,
.carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
    width: 6%;
    background: none;
    border: none;
}

/* SVG-baserede pile (fallback hvis ikoner mangler) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%) brightness(200%);
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 010 .708L6.707 7l4.647 4.646a.5.5 0 01-.708.708l-5-5a.5.5 0 010-.708l5-5a.5.5 0 01.708 0z'/%3e%3c/svg%3e") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 000 .708L9.293 7l-4.647 4.646a.5.5 0 10.708.708l5-5a.5.5 0 000-.708l-5-5a.5.5 0 00-.708 0z'/%3e%3c/svg%3e") !important;
}

/* Prikker under slideren */
.carousel-indicators {
    bottom: 20px;
    z-index: 10;
}

.carousel-indicators [data-bs-target] {
    width: 32px;
    height: 4px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.55;
    border: none;
    margin: 0 6px;
}

.carousel-indicators .active {
    opacity: 1;
}

/* ====================================================
   FORSIDE – INTRO
   ==================================================== */

#intro {
    background-color: #F7EEDB;     /* samme varme farve som body */
}

#intro h2 {
    font-size: 1.6rem;
}

/* Lyst kort i højre side */
#intro .bg-light {
    background-color: #ffffff !important;
    border-radius: 1rem;
}

/* Kort generelt + lyse bokse */
.card,
.bg-light {
    background-color: #FFFFFFE6;
    backdrop-filter: blur(1px);
}

/* ====================================================
   FORSIDE – EMNER (9 BOKSE)
   ==================================================== */

#topics {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

#topics h2 {
    font-size: 1.6rem;
    margin-top: 0.5rem;
    margin-bottom: 4rem !important;
}

/* Selve kortet */
.topic-card {
    border-radius: 1rem;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Billedet øverst i kortet */
.topic-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

/* Tekst i kortene */
.topic-card .card-body {
    padding: 0.85rem 1rem 1.2rem;
}

.topic-card .card-title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.topic-card .card-text {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Link rundt om kortet – ingen blå rammer/underline */
.topic-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ====================================================
   UNDERSIDER – SIDEBAR (emnemenu)
   ==================================================== */

.topic-sidebar h2 {
    font-weight: 500;
}

/* Bootstrap list-group i venstre side */
.topic-sidebar .list-group-item {
    border: none;
    padding: 10px 14px;
    font-size: 0.95rem;
}

/* Hover på ikke-aktive punkter */
.topic-sidebar .list-group-item-action:hover {
    background-color: #F1E8D4;
}

/* Aktivt punkt – samme sandfarve som header/footer */
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-color: #C7B89D !important;
    border-color: #C7B89D !important;
    color: #4B453A !important;
}

/* ====================================================
   FOOTER – sandfarvet
   ==================================================== */

footer,
#footer,
.site-footer,
.footer {
    background-color: #C7B89D;
    color: #4B453A;
    padding: 1.5rem 0;
    text-align: center;
}

footer p,
#footer p,
.site-footer p,
.footer p {
    margin-bottom: 0;
}

footer a,
#footer a,
.site-footer a,
.footer a {
    color: #4B453A;
    text-decoration: none;
}

footer a:hover,
#footer a:hover,
.site-footer a:hover,
.footer a:hover {
    color: #000000;
    text-decoration: underline;
}

/* === OPSKRIFT-LAYOUT === */

.opskrift-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.opskrift-titel {
    text-align: center;
    margin-bottom: 20px;
}

.opskrift-beskrivelse {
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.opskrift-top {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.ingredienser {
    flex: 1;
}

.ingredienser h2 {
    margin-bottom: 10px;
}

.ingredienser h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1rem;
}

.ingredienser ul {
    margin: 0;
    padding-left: 20px;
}

.opskrift-foto {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.opskrift-foto img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Fremgangsmåde */

.fremgangsmåde-overskrift {
    text-align: center;
    margin-bottom: 15px;
}

.fremgangsmåde-tekst {
    width: 100%;
}

.fremgangsmåde-tekst p {
    margin-bottom: 8px;
}

/* Simpel mobil-tilpasning */
@media (max-width: 700px) {
    .opskrift-top {
        flex-direction: column;
    }
}

/* === OPSKRIFT LAYOUT === */

.opskrift-container {
    max-width: 900px;          /* samme bredde som forsiden */
    margin: 0 auto;            /* centrer på siden */
    padding: 20px;
}

/* Titel */
.opskrift-titel {
    text-align: center;
    margin-bottom: 15px;
}

/* Beskrivelse */
.opskrift-beskrivelse {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Ingredienser + Foto */
.opskrift-top {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.ingredienser {
    flex: 1;
    text-align: left;          /* venstrestillet */
}

/* Foto højre */
.opskrift-foto {
    flex: 1;
    text-align: right;
}

.opskrift-foto img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Fremgangsmåde */
.fremgangsmåde-overskrift {
    text-align: left;
    margin-bottom: 15px;
}

.fremgangsmåde-tekst {
    text-align: left;          /* venstrestillet */
    width: 100%;
}

.fremgangsmåde-tekst p {
    margin-bottom: 10px;
}

/* Mobil-tilpasning */
@media (max-width: 750px) {
    .opskrift-top {
        flex-direction: column;
        text-align: center;
    }

    .opskrift-foto {
        text-align: center;
    }
}

/* === LINK-FARVER PÅ OPSKRIFTSSIDER OG KATEGORISIDER === */

.opskrift-container a,
.main-content a,
ul li a {
    color: #7a6447;
    text-decoration: none;
}

.opskrift-container a:hover,
.main-content a:hover,
ul li a:hover {
    color: #5c4b34;  /* lidt mørkere ved hover */
    text-decoration: underline;
}

/* Justér opskrifts-layout så det flugter 1:1 med headerens container */

.opskrift-container {
    max-width: 1200px;       /* samme bredde som Bootstrap container-lg */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;      /* samme padding som headeren */
    padding-right: 15px;
}