/* fjordescape3.css - Medieforespørsler og responsivitet */

/* Generelle justeringer for mindre skjermer */
@media screen and (max-width: 1023px) { /* For tablet og mobil (Bulma breakpoint for desktop) */
    .navbar-menu {
        box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Skygge for mobilmeny når den er åpen */
        padding-bottom: 1rem;
    }

    .navbar-item {
        padding: 0.75rem 1rem; /* Juster padding for mobilmeny-elementer */
    }

    .navbar-item .buttons {
        justify-content: center;
        padding-top: 1rem;
    }

    .hero .title {
        font-size: 2.5rem; /* Mindre tittel på mobil */
    }

    .hero .subtitle {
        font-size: 1.25rem; /* Mindre undertittel på mobil */
    }

    .section.is-medium {
        padding: 3rem 1rem; /* Mindre padding på seksjoner */
    }

    /* Justeringer for bildegalleriet i "Om Appen" */
    .image-gallery-grid {
        grid-template-columns: 1fr; /* Ett skjermbilde per rad på mobil */
        gap: var(--spacing-medium);
    }
    .image-gallery-grid figure:nth-child(even),
    .image-gallery-grid figure:nth-child(odd) {
        margin-top: 0;
        margin-bottom: 0;
    }
    .image-gallery-grid {
        margin-top: var(--spacing-large); /* Avstand når bildene er stablet */
    }

    /* Generelle kolonnejusteringer */
    .columns.is-vcentered .column {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .columns.is-vcentered .column:first-child {
        padding-bottom: 0.5rem; /* Mindre padding mellom tekst og bilde/skjema */
    }
    .columns.is-vcentered .column:last-child {
        padding-top: 0.5rem;
    }

    /* Justeringer for hotell- og underholdningskort */
    .hotel-card, .entertainment-box {
        margin-bottom: var(--spacing-large); /* Mellomrom mellom kort på mobil */
    }
    .hotel-card:last-child, .entertainment-box:last-child {
        margin-bottom: 0; /* Ingen margin på siste kort */
    }

    /* Justering for policy-sider hero */
    .policy-page .hero {
        padding-top: 4.5rem; /* Juster for mindre navbar på mobil */
    }
    .policy-page .content-section {
        margin-top: -1rem; /* Mindre overlapp på mobil */
        padding: 2rem 1rem;
    }

    /* Cookie Banner mobiljusteringer */
    .cookie-banner .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cookie-banner p {
        margin-right: 0;
        margin-bottom: var(--spacing-small);
        max-width: 100%;
        text-align: center;
    }
    .cookie-banner .buttons {
        width: 100%;
        justify-content: center;
    }
    .cookie-banner .button {
        flex-grow: 1; /* Knapper tar opp mer plass */
    }
}

/* Spesifikke justeringer for veldig små skjermer (f.eks. iPhone SE) */
@media screen and (max-width: 768px) {
    .hero .title {
        font-size: 2rem;
    }

    .hero .subtitle {
        font-size: 1rem;
    }

    .button.is-large {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
}

/* Media query for desktop-størrelser */
@media screen and (min-width: 1024px) {
    .navbar .navbar-item.smooth-scroll {
        padding-right: 0.75rem; /* Juster padding for jevnere utseende */
        padding-left: 0.75rem;
    }
    .navbar .navbar-item:last-child .buttons {
        margin-left: 1rem; /* Juster avstand til siste knapp */
    }

    .hero .hero-body {
        padding-top: 0; /* Fjern ekstra padding på desktop */
    }
}

/* For tilgjengelighet - sikrer at minste fontstørrelse ikke er under 16px */
html {
    font-size: max(16px, 100%); /* Største av 16px eller brukerens standard (1em = 16px) */
}

/* Fokus-stater for tilgjengelighet */
a:focus, button:focus, .input:focus, .textarea:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Kontrast for tekst på bakgrunner (dobbeltsjekk WCAG-krav manuelt) */
.has-text-white-ter {
    /* For å sikre WCAG AA-krav (min. 4.5:1 kontrast) */
    /* Hvis bakgrunnen er F8F8F8, må teksten være mørk nok */
    /* Eller bakgrunnen lys nok */
}
/* Disse fargene ble valgt med kontrast i tankene:
   #333333 på #F8F8F8 (tekst på bakgrunn): ~14.9:1 (OK)
   #2A4B5F på #F8F8F8 (primary på bakgrunn): ~9.5:1 (OK)
   #E6B800 på #2A4B5F (accent på primary): ~4.9:1 (OK for AA)
   #E6B800 på #F8F8F8 (accent på bakgrunn): ~2.6:1 (For lav for vanlig tekst, OK for store titler/dekorativt)
      --> Løsning: Accent-fargen brukes primært for knapper/ikoner hvor kontrastkrav er annerledes, eller for dekorativ tekst/titler der krav er mindre strenge.
      Teksten på accent-knappen er 'primary-color' (#2A4B5F) som gir god kontrast.
*/