/*
  Lerbäcksgården – stilmall
  Alla sidor (start, lokalen, bröllop, gården, kontakt, 404) delar samma
  uppbyggnad: sticky-meny, hero-bild, innehållssektioner, sidfot.
*/

/* ---------------------------------------------------------------
   BAS / RESET
   Dessa regler kom tidigare från Tailwinds "preflight". När Tailwind
   togs bort försvann de – utan box-sizing och text-size-adjust kan
   layouten bli bredare än skärmen på iOS, vilket ger sidscroll.
   --------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Skyddsnät mot horisontell scroll. "clip" (inte "hidden") så att
       position: sticky på menyn fortsätter fungera. */
    overflow-x: clip;
}

body {
    /* Explicit fallback-stack: om Google Fonts inte laddar ska sidan
       falla tillbaka på ett systemtypsnitt utan seriffer. */
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Helvetica, Arial, sans-serif;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

img,
video {
    max-width: 100%;
}

.lg-page {
    background-color: #f6f1ea;
    color: #3f342b;
}

/* ---------------------------------------------------------------
   MENY – samma på alla sidor
   --------------------------------------------------------------- */

.lg-nav {
    background-color: #3f342b;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.lg-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.5rem;
    column-gap: 1.25rem;
    margin: 0;
    padding: 0.8rem 1rem;
    list-style: none;
}

.lg-nav li { display: block; }

.lg-nav a {
    color: #CC9966;
    font-size: 1.15rem;
    line-height: 1.2;
    padding: 0.3rem 0.15rem;
    border-bottom: 3px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.lg-nav a:hover,
.lg-nav a.current {
    border-bottom-color: #CC9966;
    color: #e0b98a;
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */

.lg-hero { position: relative; }

.lg-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: cover;
    object-position: center 55%;
}

.lg-hero-caption {
    background-color: #fff;
    margin: -3.5rem 1rem 0;
    padding: 2rem 1.5rem;
    border-radius: 0.75rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    text-align: center;
}

/* ---------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------- */

.lg-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lg-narrow { max-width: 720px; }

.lg-section { padding: 3rem 0; }

.lg-section p { line-height: 1.75; margin: 0 0 1rem; }

.lg-lead { font-size: 1.15rem; line-height: 1.8; }

h1.lg-title {
    font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Helvetica, Arial, sans-serif;
    color: #006666;
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.lg-sub { color: #6b5d4f; font-size: 1.1rem; margin: 0; }

h2.lg-h2 {
    color: #006666;
    font-size: 1.7rem;
    margin: 0 0 1.25rem;
    font-weight: 500;
}

h3.lg-h3 { color: #544639; font-size: 1.2rem; margin: 0 0 0.4rem; font-weight: 600; }

/* ---------------------------------------------------------------
   LÄNKAR I BRÖDTEXT
   Enhetlig stil: samma typsnitt som texten, tydlig men diskret
   understrykning. (Tidigare ärvdes en gul färg från den gamla
   mallens "p a"-regel, vilket blev oläsligt mot ljus bakgrund.)
   --------------------------------------------------------------- */

.lg-section a,
.lg-footer a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.lg-section a:not(.lg-btn):not(.lg-teaser) {
    color: #006666;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition: color 0.2s ease;
}

.lg-section a:not(.lg-btn):not(.lg-teaser):hover { color: #0a8585; }

/* Länkar på mörk/teal bakgrund.
   OBS: selektorerna måste ha minst lika hög specificitet som
   .lg-section a:not(.lg-btn):not(.lg-teaser) ovan, annars vinner den
   mörka tealfärgen #006666 och länkarna blir osynliga mot mörk bakgrund. */
.lg-section .lg-cta a:not(.lg-btn):not(.lg-teaser),
.lg-cta a:not(.lg-btn):not(.lg-teaser) { color: #FFDD99; }

.lg-section .lg-cta a:not(.lg-btn):not(.lg-teaser):hover,
.lg-cta a:not(.lg-btn):not(.lg-teaser):hover { color: #fff; }

.lg-section .lg-card a:not(.lg-btn):not(.lg-teaser),
.lg-card a:not(.lg-btn):not(.lg-teaser) { color: #FFCC66; }

.lg-section .lg-card a:not(.lg-btn):not(.lg-teaser):hover,
.lg-card a:not(.lg-btn):not(.lg-teaser):hover { color: #fff; }

/* ---------------------------------------------------------------
   GALLERI
   --------------------------------------------------------------- */

.lg-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.lg-gallery figure { margin: 0; }

.lg-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.lg-gallery figcaption {
    font-size: 0.95rem;
    color: #6b5d4f;
    padding-top: 0.5rem;
}

/* ---------------------------------------------------------------
   KORT
   --------------------------------------------------------------- */

.lg-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.lg-card {
    background-color: #544639;
    color: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.lg-card h3 { color: #FC6; }
.lg-card p { margin: 0; font-weight: 300; line-height: 1.7; }

.lg-list { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.9; }

/* Ingångar till undersidorna */
.lg-teasers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.lg-teaser {
    display: block;
    background-color: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lg-teaser:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.lg-teaser img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.lg-teaser-body { padding: 1.25rem 1.35rem 1.5rem; }
.lg-teaser h3 { color: #006666; margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 600; }
.lg-teaser p { margin: 0; color: #5b4f43; line-height: 1.65; }
.lg-teaser .lg-more { display: inline-block; margin-top: 0.8rem; color: #b3803f; font-weight: 500; }

/* ---------------------------------------------------------------
   CTA OCH KNAPPAR
   --------------------------------------------------------------- */

.lg-cta {
    background-color: #006666;
    color: #fff;
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.lg-cta h2 { color: #fff; margin-top: 0; }

.lg-btn {
    display: inline-block;
    background-color: #006666;
    color: #fff;
    padding: 1rem 1.75rem;
    border-radius: 0.5rem;
    font-size: 1.15rem;
    text-decoration: none;
    transition: background-color 0.25s ease;
}

.lg-btn:hover { background-color: #0a8585; color: #fff; }

.lg-btn-light { background-color: #fff; color: #006666; }
.lg-btn-light:hover { background-color: #eee; color: #006666; }

/* Kontaktuppgifter */
.lg-contact { font-size: 1.15rem; line-height: 2.1; margin: 0 0 1.5rem; }

/* ---------------------------------------------------------------
   SIDFOT
   --------------------------------------------------------------- */

.lg-footer {
    background-color: #3f342b;
    color: #fff;
    padding: 2rem 0;
    font-size: 1rem;
}

.lg-footer a { color: #E0B98A; text-decoration: none; }
.lg-footer a:hover { text-decoration: underline; }
.lg-footer p { margin: 0.4rem 0; line-height: 1.7; }

.lg-footer-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    column-gap: 1.5rem;
    padding: 0;
    margin: 0 0 1.25rem;
}

.lg-footer-nav a {
    display: inline-block;
    padding: 0.15rem 0;
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------
   RESPONSIVT
   --------------------------------------------------------------- */

/* Liggande telefon: hero-bilden får inte äta upp hela skärmen */
@media (orientation: landscape) and (max-height: 560px) {
    .lg-hero img { max-height: 52vh; }

    .lg-hero-caption {
        margin: -2rem 1rem 0;
        padding: 1.25rem 1.5rem;
    }

    h1.lg-title { font-size: 1.7rem; }
    .lg-sub { font-size: 1rem; }
    .lg-section { padding: 2rem 0; }
}

@media (max-width: 560px) {
    .lg-nav ul {
        column-gap: 0.9rem;
        row-gap: 0.5rem;
        padding: 0.7rem 0.5rem;
    }

    .lg-nav a { font-size: 1rem; }

    .lg-section { padding: 2.25rem 0; }
    h1.lg-title { font-size: 1.9rem; }
}

/* Menyn ska rymmas på EN rad även på vanliga telefoner – uppmätta
   bredder: 0.9rem/0.6rem ryms i 440px, 0.82rem/0.45rem ryms i 360px. */
@media (max-width: 440px) {
    .lg-nav a { font-size: 0.9rem; }
    .lg-nav ul { column-gap: 0.6rem; }
}

@media (max-width: 370px) {
    .lg-nav a { font-size: 0.82rem; }
    .lg-nav ul { column-gap: 0.45rem; padding-left: 0.35rem; padding-right: 0.35rem; }
}

@media (max-width: 340px) {
    .lg-nav a { font-size: 0.76rem; }
    .lg-nav ul { column-gap: 0.35rem; }
}

@media (min-width: 700px) {
    .lg-gallery { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .lg-gallery .lg-gallery-wide { grid-column: 1 / -1; }
    .lg-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .lg-teasers { grid-template-columns: repeat(3, 1fr); }
    h1.lg-title { font-size: 3rem; }
    .lg-hero-caption { margin: -4.5rem auto 0; max-width: 780px; padding: 2.5rem 2rem; }
    .lg-section { padding: 4rem 0; }
}