/* ==========================================================================
   Hyttebok — "default" theme stylesheet
   Rebuilt from scratch. Plain px sizing throughout (no rem/root-scaling
   dependency), left-aligned by default (no global text-align:center).
   Organized in sections — search for the "== NAME ==" markers below.
   ========================================================================== */

/* == RESET & BASE == */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #333333;
    background: #ffffff;
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 16px;
    font-family: 'Montserrat', 'Raleway', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

p { margin: 0 0 16px; }
a { color: #f52f6e; text-decoration: none; }
a:hover { color: #d81f5c; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.big-title { font-size: 30px; }
.cl-white { color: #ffffff; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.mb-10 { margin-bottom: 10px; }
.mt-20 { margin-top: 20px; }
.strong { font-weight: 700; }
.clearfix::after { content: ''; display: table; clear: both; }

/* == LAYOUT SHELL == */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

#wrapper { width: 100%; }

.article-holder {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 0;
}

.article-wrap.col-wrap { flex: 1 1 0; min-width: 0; }

.separator.img-separator { margin: 0 0 24px; }
.separator.img-separator img { height: 14px; width: auto; }

.vertical-separator { display: none; }

.single-text { font-size: 16px; color: #444444; line-height: 1.8; }
.single-text p:last-child { margin-bottom: 0; }

/* == HEADER / NAV == */
#top-bar { width: 100%; background: #1a1a1a; }
#top-bar.get-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.top-bar-info { background: #111111; padding: 8px 0; }
.top-bar-info .container { display: flex; align-items: center; justify-content: space-between; }

.top-bar-social ul { display: flex; gap: 14px; }
.top-bar-social a { color: #cccccc; font-size: 13px; }
.top-bar-social a:hover { color: #ffffff; }

.top-bar-contacts { display: flex; gap: 20px; }
.top-bar-contacts li { font-size: 13px; color: #999999; }
.top-bar-contacts span { margin-right: 4px; }
.top-bar-contacts a { color: #dddddd; }
.top-bar-contacts a:hover { color: #ffffff; }

.top-bar-menu-wrap { padding: 18px 0; }
.top-bar-menu-wrap .container { display: flex; align-items: center; gap: 24px; }

.menubutton {
    display: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.top-bar-menu { flex: 1 1 auto; }
.top-bar-menu .menu { display: flex; gap: 28px; flex-wrap: wrap; }
.top-bar-menu .menu a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: border-color .2s, color .2s;
}
.top-bar-menu .menu li.active a,
.top-bar-menu .menu a:hover { color: #f52f6e; border-color: #f52f6e; }

.lang-select {
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid #444444;
    border-radius: 4px;
    background: #ffffff;
    color: #333333;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 860px) {
    .menubutton { display: block; }
    .top-bar-menu {
        display: none;
        flex-basis: 100%;
        order: 3;
        padding-top: 14px;
    }
    .top-bar-menu .menu { flex-direction: column; gap: 14px; }
    .top-bar-menu-wrap .container { flex-wrap: wrap; }
}

/* == HERO == */
.home-hero {
    position: relative;
    height: 70vh;
    min-height: 420px;
    overflow: hidden;
    background: #1a1a1a;
}
.home-hero-bg {
    position: absolute;
    inset: -10% 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
.home-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}
.home-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}
.home-hero-content .big-title { font-size: 44px; margin-bottom: 12px; }
.hero-subtitle { font-size: 17px; max-width: 640px; }

.single-wrapper {
    position: relative;
    height: 45vh;
    min-height: 280px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}
.single-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
}
.single-wrapper .big-title,
.single-wrapper .post-date { position: relative; z-index: 2; }
.single-wrapper .post-date { display: block; color: #eeeeee; font-size: 14px; margin-top: 8px; }

@media (max-width: 640px) {
    .home-hero-content .big-title { font-size: 30px; }
}

/* == POST / TRIP CARD GRID (home "featured story" list + trips archive) == */
.grid-sb-holder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
/* Legacy Bootstrap column classes still present in the blade markup —
   kept as a compatibility shim so the grid spans correctly without
   having to touch every page's HTML. */
.grid-sb-holder .col-md-12 { grid-column: 1 / -1; }
.grid-sb-holder .col-md-6 { grid-column: span 1; }

.grid-sb { display: flex; flex-direction: column; }
.blog-media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 220px;
    background: #eeeeee;
}
.blog-media .respimg { width: 100%; height: 100%; object-fit: cover; }
.blog-media .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
}
.blog-media .post-counter {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;
}
.blog-media .post-counter .post-date {
    background: rgba(0,0,0,.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.grid-sb h2 { font-size: 20px; margin: 16px 0 8px; }
.grid-sb h2 a { color: #1a1a1a; }
.grid-sb h2 a:hover { color: #f52f6e; }
.grid-sb p { color: #666666; font-size: 15px; margin-bottom: 10px; }
.post-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #f52f6e;
}
.post-link:hover { color: #d81f5c; }

/* Home page: "featured story" items are always full-width, one per row */
.featured-story-item { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #eeeeee; }
.featured-story-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.featured-story-item .blog-media { height: 380px; }
.featured-story-item h2 { font-size: 24px; }
@media (max-width: 640px) {
    .featured-story-item .blog-media { height: 220px; }
}

@media (max-width: 760px) {
    .grid-sb-holder { grid-template-columns: 1fr; }
}

/* == TRIP / CABIN PHOTO GALLERY GRID (single trip + cabin gallery pages) ==
   One shared implementation used identically by both pages — previously
   the trip page had a working flex-grid fix that the cabin gallery page
   never received, so the two diverged. */
.single-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0 0;
}
.trip-item.trip-gallery {
    position: relative;
    flex: 0 0 calc((100% - 28px) / 3);
    width: calc((100% - 28px) / 3);
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a2e;
}
.trip-item.trip-gallery .gallery-box {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.trip-item.trip-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.trip-item.trip-gallery:hover img { transform: scale(1.06); }
.trip-item.trip-gallery .hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .25s ease;
}
.trip-item.trip-gallery:hover .hover { opacity: 1; }
.trip-item.trip-gallery .video-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}
/* .video-icon itself is intentionally left unstyled here — it's fully
   styled (centered play button, hover scale) by user/comment/css/gallery_style.css,
   loaded via the shared comments partial on both pages that use this grid. */

@media (max-width: 900px) {
    .trip-item.trip-gallery { flex-basis: calc(50% - 7px); width: calc(50% - 7px); }
}
@media (max-width: 520px) {
    .trip-item.trip-gallery { flex-basis: 100%; width: 100%; }
}

/* == SIDEBAR == */
.main-sidebar {
    flex: 0 0 320px;
    width: 320px;
    align-self: flex-start;
    position: sticky;
    top: 24px;
}
.main-sidebar-widget {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.main-sidebar-widget:last-child { margin-bottom: 0; }
.main-sidebar-widget h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7280;
    margin-bottom: 16px;
}

.about-widget img { border-radius: 8px; }
.about-widget h4 { font-size: 18px; margin: 0 0 6px; }
.about-widget p { font-size: 14px; color: #666666; margin: 0; }

.subscribe-widget .mc4wp-form { display: flex; flex-direction: column; gap: 10px; }
.subscribe-widget .mc4wp_email {
    padding: 10px 12px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
    color: #333333;
}
.subscribe-widget .mc4wp_submit {
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: #f52f6e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.subscribe-widget .mc4wp_submit:hover { background: #d81f5c; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #555555;
    font-size: 12px;
    font-weight: 600;
}
.tagcloud a:hover { border-color: #f52f6e; color: #f52f6e; }

.social-widget ul { display: flex; gap: 10px; }
.social-widget a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 14px;
}
.social-widget a:hover { background: #f52f6e; }

@media (max-width: 1024px) {
    .article-holder { flex-direction: column; }
    .main-sidebar { position: static; width: 100%; flex-basis: auto; }
    .main-sidebar-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
    .main-sidebar-widget { margin-bottom: 0; }
}
@media (max-width: 640px) {
    .main-sidebar-widgets { grid-template-columns: 1fr; }
}

/* == FORMS (contact form + subscribe CTA) == */
.form-group { margin-bottom: 20px; }
.form-group.group-two { display: flex; gap: 20px; }
.form-group.group-two .input-holder { flex: 1 1 0; }
.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 8px;
}
.input-controller {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
.input-controller:focus { border-color: #f52f6e; }
textarea.input-controller { resize: vertical; }

.btn {
    display: inline-block;
    padding: 13px 32px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.btn-primary { background: #f52f6e; color: #ffffff; }
.btn-primary:hover { background: #d81f5c; color: #ffffff; }

.form-text { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; }

/* == CONTACT PAGE == */
.page-heading { padding: 48px 0 0; }
.page-heading h1 { font-size: 34px; text-align: center; }

.conact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    padding: 40px 0;
}
.map-wrapper { flex: 1 1 380px; min-width: 0; }
.map-wrapper .sub-title { font-size: 20px; }
.map-wrapper #map { border-radius: 10px; overflow: hidden; margin-top: 16px; }
.booking-wrapper-contact { flex: 1 1 420px; min-width: 0; }

/* == PAGINATION (Laravel's default `pagination::tailwind` view — its own
   utility classes are inert here since Tailwind itself isn't loaded, so
   this styles the underlying structure directly). The view renders two
   sibling blocks meant to be toggled by Tailwind's responsive classes;
   without Tailwind both would show at once, so the first (mobile) one is
   hidden here and the second (desktop) layout is used at every width. */
nav[role="navigation"] { margin: 24px 0; }
nav[role="navigation"] > div:first-child { display: none; }
nav[role="navigation"] > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
nav[role="navigation"] p { margin: 0; font-size: 13px; color: #6b7280; }
nav[role="navigation"] [aria-current] span,
nav[role="navigation"] a,
nav[role="navigation"] [aria-disabled] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    font-weight: 600;
    color: #444444;
}
nav[role="navigation"] a:hover { border-color: #f52f6e; color: #f52f6e; }
nav[role="navigation"] [aria-current] span { background: #f52f6e; border-color: #f52f6e; color: #ffffff; }
nav[role="navigation"] [aria-disabled] span { opacity: .4; }
nav[role="navigation"] svg { width: 14px; height: 14px; }

/* == FOOTER == */
.footer-big { background: #1a1a1a; color: #cccccc; padding-top: 48px; }
/* .fwinner (quote row) is a sibling of the 3 column .footer-widget-inner
   divs inside the same grid container — without spanning all 3 tracks it
   just becomes grid item 1, pushing the 3rd column widget down into a
   second row under column 1 instead of sitting beside the other two. */
.footer-widget-inner.fwinner { grid-column: 1 / -1; }
.quote-widget { text-align: center; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.quote-widget p {
    font-family: 'Droid Serif', Georgia, serif;
    font-style: italic;
    color: rgba(255,255,255,.75);
    font-size: 17px;
    max-width: 700px;
    margin: 0 auto;
}

.footer-widgets-holder .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
}
.footer-widget-inner h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin-bottom: 18px;
}

.recent-post-widget ul { display: flex; flex-direction: column; gap: 16px; }
.recent-post-widget li { display: flex; gap: 12px; align-items: flex-start; }
.recent-post-img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.recent-post-img img { width: 100%; height: 100%; object-fit: cover; }
.recent-post-content h4 { font-size: 14px; margin: 0 0 4px; }
.recent-post-content h4 a { color: #ffffff; }
.recent-post-content h4 a:hover { color: #f52f6e; }
.recent-post-opt .post-date { font-size: 13px; color: #999999; }

.comment-widget .comm-list { display: flex; flex-direction: column; gap: 16px; }
.comment-widget .comm-list li { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.comment-widget .comm-list li:last-child { border-bottom: none; padding-bottom: 0; }
.comment-widget p { font-size: 14px; color: #cccccc; margin: 0 0 6px; }
.comment-widget .comm-date { font-size: 12px; color: #888888; font-style: italic; }
.commnet-link { font-size: 12px; color: #999999; margin-top: 2px; }
.commnet-link a { color: #a3b18a; font-weight: 600; }
.commnet-link a:hover { color: #ffffff; }

.jr-insta-thumb ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jr-insta-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }

.sub-footer { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; margin-top: 16px; }
.sub-footer .row { display: flex; align-items: center; justify-content: space-between; }
.sub-footer .copyright { font-size: 13px; color: #999999; }
.sub-footer-social { display: flex; gap: 12px; }
.sub-footer-social a { color: #999999; font-size: 14px; }
.sub-footer-social a:hover { color: #ffffff; }

.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 42px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f52f6e;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    z-index: 40;
}
.to-top.is-visible { display: flex; }
.to-top:hover { background: #d81f5c; }

@media (max-width: 900px) {
    .footer-widgets-holder .container { grid-template-columns: 1fr; gap: 32px; }
    .sub-footer .row { flex-direction: column; gap: 10px; text-align: center; }
}

/* == SUBSCRIBE CTA (home page) ==
   Previously styled for a dark/hero background it never actually sat on —
   near-invisible translucent-white input on a plain white page. */
.subscribe-wrap {
    background: #f9f9f9;
    padding: 56px 24px;
    text-align: center;
}
.subscribe-wrap .content-title { font-size: 26px; margin-bottom: 8px; }
.subscribe-wrap .notify-sub { color: #666666; margin-bottom: 24px; }
.subscribe-wrap .mc4wp-form {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
}
.subscribe-wrap .mc4wp_email {
    flex: 1 1 auto;
    padding: 13px 16px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    font-size: 15px;
}
.subscribe-wrap .mc4wp_submit {
    padding: 13px 22px;
    border: none;
    border-radius: 6px;
    background: #f52f6e;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.subscribe-wrap .mc4wp_submit:hover { background: #d81f5c; }

@media (max-width: 480px) {
    .subscribe-wrap .mc4wp-form { flex-direction: column; }
}