/*
Theme Name:        WooPaca - WooCommerce Theme
Theme URI:         https://woopaca.lasseedsvik.se
Author:            Lasse Edsvik
Author URI:        https://lasseedsvik.se
Description:       WooPaca WordPress theme for WooCommerce. Source code available at https://github.com/lasseedsvik/woopaca
Version:           1.0.7
Text Domain:       woopaca

License:           THE COFFEEWARE LICENSE (Revision 1)

"THE COFFEEWARE LICENSE" (Revision 1):
<Lasse Edsvik> wrote this file. As long as you retain this notice you
can do whatever you want with this stuff. If we meet some day, and you think
this stuff is worth it, you can buy me a coffee in return at https://buymeacoffee.com/lasseedsvik.
*/

 
:root {
    --primary: #376482;
    --primary-container: #111111;
    --on-primary: #ffffff;
    --secondary: #71716b;
    --surface: #f4f4f2;
    --surface-container-low: #ececea;
    --surface-container-lowest: #ffffff;
    --background: #1a1a1a;
    --site-wrap-background: #34363d;
    --on-background: #1f1f1f;
    --on-surface-variant: #71716b;
    --error: #dc2626;
    --outline: #dcdcd8;

    --cart-count-bg: rgb(55, 100, 130);
    --headline-color: #376482;
    --border-accent-color: #376482;
    --accent: #9c9c94;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --on-primary-muted: rgba(255, 255, 255, 0.55);

    --radius-default: 3px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-full: 9999px;
    --max-width: 1440px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 28px;
}

/* ─── Base ──────────────────────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

p {
    margin-top: 0;
    margin-bottom: 16px;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--background);
    color: var(--on-background);
    line-height: 1.5;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.2s ease;
}

a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    opacity: .7;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
    text-decoration: none;
}

button,
.btn-primary,
a.button,
a.btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

button:hover,
.btn-primary:hover,
a.button:hover,
a.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

button:active,
.btn-primary:active,
a.button:active,
a.btn-primary:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition-duration: 0.08s;
}

/* Visible focus state for keyboard navigation – consistent across the
   theme instead of the browser's default outline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.dm-attribute-box:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Respect visitors who have chosen to minimize motion in their
   operating system – turn off all animations/transitions for them. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Subtle animations ──────────────────────────────────────────
   Discreet fade-in of the page content on load, plus a "reveal" class
   that assets/js/menu.js sets on cards/sections as they're scrolled
   into view (see .reveal-visible). */
@keyframes woopaca-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-main {
    animation: woopaca-fade-in 0.4s ease both;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-on-scroll.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Skip link (see header.php): stays visually hidden like any other
   .screen-reader-text element until it receives keyboard focus, at
   which point it needs to become visible so a keyboard/screen-reader
   user can actually see and use it to jump past the header. */
.skip-link:focus {
    background: var(--primary, #376482);
    border-radius: 0 0 var(--radius-default, 4px) 0;
    clip: auto !important;
    clip-path: none;
    color: #fff;
    display: block;
    font-weight: 700;
    height: auto;
    left: 0;
    padding: 16px 24px;
    position: fixed !important;
    text-decoration: none;
    top: 0;
    width: auto;
    z-index: 100000;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-mobile);
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--margin-desktop);
    }
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: #9ca3af;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: #6b7280;
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15);
    background-color: #ffffff;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #4b5563;
}

::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

main {
    background: #fff;
    padding: 40px 40px 80px;
    max-width: var(--max-width);
    margin: 0 auto;
}

main ul {
    margin-left: 20px !important;
}

#site-wrap {
    margin-top: 80px;
    background-color: var(--site-wrap-background);
}


/* ─── Headings ──────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Rajdhani", sans-serif;
    color: var(--headline-color);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 500;
}

h1 {
    font-size: 36px;
    margin-bottom: 24px;
}

h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

h3 {
    font-size: 24px;
    margin-bottom: 16px;
}

h4 {
    font-size: 20px;
    margin-bottom: 12px;
}

h5 {
    font-size: 16px;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}


h1 {
    --icon-size: 60px
}

h2 {
    --icon-size: 48px;
}

h3 {
    --icon-size: 42px;
}

h3 {
    --icon-size: 38px;
}

.icon {
    height: var(--icon-size) !important;
    vertical-align: center !important;
    display: initial;
}

@media (min-width: 1024px) {
    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 18px;
    }
}

/* ─── Content Typography ────────────────────────────── */

/* Spacing above headings in content areas — not in custom sections */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
main>h1,
main>h2,
main>h3,
main>h4,
main>h5,
.wp-block-group h1,
.wp-block-group h2,
.wp-block-group h3,
.wp-block-group h4,
.wp-block-group h5 {
    margin-top: 20px;
}

/* First heading needs no top margin */
.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
main>h1:first-child,
main>h2:first-child,
main>h3:first-child {
    margin-top: 0;
}

/* Paragraphs */
.wp-block-paragraph,
.entry-content p,
main>p {
    margin-bottom: 16px;
    line-height: 1.7;
    color: var(--on-surface-variant);
}

/* Lists */
.entry-content ul,
.entry-content ol,
main>ul,
main>ol {
    margin-bottom: 16px;
    padding-left: 24px;
    line-height: 1.7;
    color: var(--on-surface-variant);
}

.entry-content li,
main>ul li,
main>ol li {
    margin-bottom: 8px;
}

/* Tables */
.entry-content table,
main>table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 14px;
}

.entry-content table th,
main>table th,
.wp-block-table table th {
    background-color: var(--primary);
    color: white;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
}

.entry-content table td,
main>table td,
.wp-block-table table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--surface-container-low);
}

.entry-content table tr:nth-child(even) td,
main>table tr:nth-child(even) td,
.wp-block-table table tr:nth-child(even) td {
    background-color: var(--surface-container-low);
}

footer a {
    color: #fff;
    text-decoration: none;
}

.entry-content a:hover,
main>p a:hover {
    opacity: 0.7;
}

.entry-content table,
.wp-block-table table {
    border: 1px solid #e2e8f0;
}

.entry-content table th,
.wp-block-table table th {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.entry-content table td,
.wp-block-table table td {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.entry-content table th:last-child,
.wp-block-table table th:last-child,
.entry-content table td:last-child,
.wp-block-table table td:last-child {
    border-right: none;
}

.entry-content table,
.wp-block-table table {
    border: 1px solid #e2e8f0;
    border-collapse: collapse;
}

.entry-content table th,
.wp-block-table table th {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 3px solid var(--primary);
    border-top: 1px solid var(--primary);
}

.entry-content table th:first-child,
.wp-block-table table th:first-child {
    border-left: 1px solid var(--primary);
}

.entry-content table th:last-child,
.wp-block-table table th:last-child {
    border-right: 1px solid var(--primary);
}

/* ─── Header ────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #ffffff;
    border-bottom: 1px solid var(--outline);
    z-index: 1000;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-main {
    max-width: 160px;
    width: auto;
    height: auto;
}

.logo-woopaca-small {
    height: 18px;
    filter: grayscale(100%);
    opacity: 0.8;
}

.shop-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-default);
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shop-button:active {
    transform: scale(0.95);
}

/* ─── Hamburger button ──────────────────────────────── */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--primary);
    padding: 8px;
    border: none;
}

/* ─── Navigation — mobile first ────────────────────── */
.main-navigation {
    display: block;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--primary) 0%, #1a1a1a 100%);
    padding: 8px 0 16px;
    z-index: 999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.main-navigation.nav-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* nav-list: stacked on mobile */
.main-navigation .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.main-navigation .nav-item {
    width: 100%;
}

.nav-item--top.is-active>.nav-link {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid #ffffff;
    color: #ffffff;
}

.main-navigation .nav-item--top:hover>.nav-link {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

.main-navigation .nav-link {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: opacity 0.15s;
}

.nav-dropdown-arrow {
    display: none !important;
}

.main-navigation .nav-link:hover {
    opacity: 0.7;
}

/* Sub-menu: hidden by default on mobile, shown via JS */
.main-navigation .sub-menu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.main-navigation .nav-item--top.submenu-open > .sub-menu {
    max-height: 600px;
}

.main-navigation .sub-menu .nav-link {
    padding-left: 36px;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
}

/* Arrow button for toggling the submenu on mobile */
.submenu-toggle {
    background: transparent;
    border: none;
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    height: 48px;
    transition: transform 0.2s ease;
}

.submenu-toggle:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

.nav-item--top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.nav-item--top > .nav-link {
    flex: 1;
}

/* ─── Navigation — desktop ──────────────────────────── */
@media (min-width: 1440px) {

    .menu-toggle {
        display: none;
    }

    .logo-main {
        max-width: 200px;
    }

    .logo-woopaca-small {
        height: 30px;
    }

    /* Reset mobile styles */
    .main-navigation {
        display: flex;
        position: static;
        background: transparent;
        padding: 0;
        box-shadow: none;
        align-items: center;
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    .main-navigation .nav-list {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .main-navigation .nav-item {
        width: auto;
        position: relative;
    }

    .main-navigation .nav-link {
        position: relative;
        color: var(--primary);
        padding: 16px;
        border-bottom: none;
        border-radius: 0;
        transition: color 0.15s ease;
    }

    .main-navigation .nav-item--has-children>.nav-link {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .nav-dropdown-arrow {
        display: inline-flex !important;
        font-size: 20px;
        transition: transform 0.2s ease;
    }

    .main-navigation .nav-item--top:hover>.nav-link .nav-dropdown-arrow {
        transform: rotate(180deg);
    }

    .main-navigation .nav-link::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 6px;
        height: 2px;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }

    .main-navigation .menu-item:is(.current-menu-item,
        .current-menu-parent,
        .current-menu-ancestor)>.nav-link,
    .main-navigation .nav-link:hover {
        opacity: 1;
        background: transparent;
        color: var(--primary);
    }

    .main-navigation .menu-item:is(.current-menu-item,
        .current-menu-parent,
        .current-menu-ancestor)>.nav-link::after,
    .main-navigation .nav-link:hover::after {
        transform: scaleX(1);
    }

    .main-navigation>ul>.nav-item:not(:last-child)>.nav-link {
        border-right: 1px solid rgba(13, 13, 13, 0.12);
        border-radius: 0;
    }

    /* ── Dropdown ── */
    .main-navigation .sub-menu {
        display: block;
        position: absolute;
        top: calc(100%);
        left: 0;
        min-width: 250px;
        max-height: none;
        overflow: visible;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        padding: 6px 0;
        z-index: 9999;
        width: auto;
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }

    /* Show on hover or keyboard navigation */
    .main-navigation .nav-item:hover>.sub-menu,
    .main-navigation .nav-item:focus-within>.sub-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
    }

    /* Hide the arrow button and restore the layout on desktop */
    .submenu-toggle {
        display: none;
    }

    .nav-item--top {
        flex-wrap: nowrap;
    }

    .main-navigation .sub-menu .nav-link {
        color: var(--primary);
        padding: 10px 18px;
        border-radius: 0;
        font-size: 15px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: normal;
        border-bottom: none;
    }

    .main-navigation .sub-menu .nav-link:hover {
        opacity: 1;
    }
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 14px 30px;
    border-radius: var(--radius-lg);
    font-weight: 700;
}

.product-card {
    background: white;
    padding: 16px;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
}

.product-name {
    color: var(--primary);
    font-size: 20px;
}


/* ─── Footer ────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, var(--site-wrap-background) 0%, var(--background) 100%);
    color: white;
    padding: 80px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}

.footer-brand .footer-logo {
    max-width: 100%;
    width: auto;
    height: auto;
    margin-bottom: 32px;
}

.contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0.8;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-icon {
    color: #fff;
}

.footer-title {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-primary-muted);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 32px;
}

.hours-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    opacity: 0.9;
}

.store-photo {
    margin-top: 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

.social-area {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

/* Wraps the new "Information" links section and "Follow Us" so both
   sit stacked in the same footer-grid column (see footer.php). */
.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-btn {
    background: white;
    padding: 12px;
    border-radius: 16px;
}

.social-btn img {
    width: 80px;
    height: 80px;
}

.qr-wrapper {
    background: white;
    padding: 12px;
    border-radius: 16px;
}

.qr-wrapper img {
    width: 80px;
    height: 80px;
}

.footer-bottom {
    margin-top: 80px;
    padding-top: 32px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.4;
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


.blog-avatar {
    max-width: 250px;
    float: left;
    margin-right: 30px;
    height: auto;
}

.welcome-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 3rem;
}

.welcome-text h2 {
    margin-top: 0;
}


.welcome-box {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	padding: 1.5rem;
	background: #9fc6ce1f;
	border-radius: 6px;
	box-shadow: 0 2px -3px rgba(0, 0, 0, 0.06);
	border: 1px solid #e5e5e3;
}


.welcome-box img {
    width: 200px;
    height: auto;
    border-radius: 6px;
    flex-shrink: 0;
}


/* Container for the whole post entry in the list */
.post-card {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-bottom: 40px;
    align-items: flex-start;
}

/* Left side (the image) */
.post-card-image {
    flex: 0 0 300px;
}

.post-card-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Right side (the text) */
.post-card-content {
    flex: 1;
}

.post-card-title {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Responsive design for mobile: stack the image and text */
@media (max-width: 1024px) {
    .post-card {
        flex-direction: column;
        gap: 15px;
    }

    .post-card-image {
        flex: 0 0 100%;
        width: 100%;
    }
}


/* Container for the whole post entry in the list */
.single-container {
    display: flex;
    margin: 0 auto;
    padding: 40px 20px;
    gap: 50px;
}

/* Left column (the article) */
.single-post-main {
    flex: 1;
    min-width: 0;
}

/* Right column (the sidebar) */
.single-sidebar {
    flex: 0 0 320px;
}

.sidebar-title {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef0f2;
}

/* Styling for the post list itself */
.sidebar-post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 0 !important;
}

.sidebar-post-item {
    margin-bottom: 8px;
}

.sidebar-post-item-return-icon {
    clear: both;
    width: 40px;
    margin-top: 30px;
}

.sidebar-post-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: background-color .15s ease, transform .15s ease;
}

.sidebar-post-link:hover {
    background: #f3f4f6;
    transform: translateX(2px);
}

.sidebar-post-link:hover .sidebar-post-title {
    color: var(--primary);
}

/* The small thumbnail in the sidebar */
.sidebar-post-thumb {
    flex: 0 0 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
}

.sidebar-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform .3s ease;
}

.sidebar-post-link:hover .sidebar-post-thumb img {
    transform: scale(1.06);
}

.sidebar-post-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sidebar-post-title {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color .15s ease;
}

.sidebar-post-date {
    font-size: 0.8rem;
    color: #6b7280;
}

.sidebar-post-item-return {
    text-align: center;
    margin-top: 12px;
}

.sidebar-post-item-return a {
    color: var(--primary);
    text-decoration: none;
    transition: opacity .15s ease;
}

.sidebar-post-item-return a:hover {
    opacity: .7;
}

/* Responsiveness: stack the columns on mobile devices */
@media (max-width: 992px) {
    .single-container {
        flex-direction: column;
        gap: 40px;
    }

    .single-sidebar {
        flex: 0 0 100%;
        width: 100%;
    }
}

.post-meta {
    margin-top: 80px;
    text-align: right;
    color: #6b7280;
}


/* 1. Hide the screen reader text accessibly */
.navigation.pagination .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* 2. Container for the pagination */
.navigation.pagination {
    margin: 50px auto;
    padding: 20px 0;
    text-align: center;
}

.navigation.pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* 3. Default style for all buttons */
.navigation.pagination .page-numbers {
    display: inline-block;
    min-width: 44px;
    height: 44px;
    line-height: 42px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid var(--outline);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* 4. Hover effect for clickable links */
.navigation.pagination a.page-numbers:hover {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 5. Style for the active/current page */
.navigation.pagination .page-numbers.current {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary);
    cursor: default;
}

/* 6. Extra love for the "Next" button */
.navigation.pagination .page-numbers.next {
    padding: 0 18px;
    font-weight: 700;
    background-color: #f8fafc;
}

/* Hides the screen reader text */
.page-dropdown-container .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Positioning at the top right with Flexbox */
.page-dropdown-container {
    display: flex;
    justify-content: flex-end;
}

/* ─── Page Dropdown / Select ────────────────────────── */

/* Hides the screen reader text */
.page-dropdown-container .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Positioning at the top right with Flexbox */
.page-dropdown-container {
    display: flex;
    justify-content: flex-end;
}

/* Styling for the dropdown menu itself */
.page-dropdown-container select,
.page-select {
    display: inline-block;
    padding: 10px 36px 10px 16px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: #374151;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-in-out;
    width: 180px;
    /* Semicolon added here! */

    /* Reset the browser's default appearance (important to remove the gray) */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* Din snygga pil */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
}

/* Hover and focus effects */
.page-dropdown-container select:hover,
.page-select:hover {
    border-color: #9ca3af;
    background-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
}

.page-dropdown-container select:focus,
.page-select:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15);
}

.page-dropdown-container select option {
    background-color: #ffffff;
    color: #374151;
}

/* Change the background of the dropdown list itself and its options */
.page-dropdown-container select option,
.page-select option {
    background-color: #ffffff !important;
    color: #374151 !important;
}

/* ─── Front Page Post Listing (En hel post per rad) ───────────────── */

.post-container-front-page {
    gap: 24px !important;
    margin: 8px 0 48px !important;
}

.latest-post {
    padding: 20px !important;
    background: #fff !important;
    border: 1px solid #eef0f2 !important;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.latest-post-image {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
}

.latest-post-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

.latest-post-content {
    flex: 1 !important;
    min-width: 0;
}

.latest-post-content h3 {
    margin-bottom: 8px;
    font-size: 20px;
}

.latest-post-content h3 a {
    color: var(--primary);
    text-decoration: none;
}

.latest-post-content h3 a:hover {
    opacity: .7;
}

.latest-post-content p {
    color: #4b5563;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .latest-post {
        flex-direction: column !important;
    }

    .latest-post-image {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 1. Force the Query Loop to stop being a grid */
.wp-block-query-loop, 
.wp-block-post-template,
.post-container-front-page {
    display: flex !important;
    flex-direction: column !important; /* Stacks each post below one another */
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Turn each individual post into a row (image on the left, text on the right) */
.wp-block-post,
.post-container-front-page > li,
.post-container-front-page > div {
    display: flex !important;
    flex-direction: row !important; /* Image and text side by side */
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 30px !important;
    align-items: flex-start !important;
    border: none !important;
    background: transparent !important;
}

/* 3. Lock the image size so it doesn't stretch or get squeezed */
.wp-block-post-featured-image,
.wp-block-post-featured-image a,
.wp-block-post-featured-image img {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 4px;
    margin: 0 !important;
}

/* 4. Lets the text content (heading, text) take up the rest of the row */
.wp-block-post > *:not(.wp-block-post-featured-image) {
    flex: 1 !important;
    text-align: left !important;
}

/* 5. Mobile adaptation: stack image and text vertically on smaller screens */
@media (max-width: 960px) {
    .wp-block-post,
    .post-container-front-page > li,
    .post-container-front-page > div {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .wp-block-post-featured-image,
    .wp-block-post-featured-image img {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ─── 404 ──────────────────────────────────────────────── */
.error-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 0 96px;
}

.error-404 .page-title {
    font-size: 96px;
    font-weight: 700;
    color: var(--headline-color);
    line-height: 1;
    margin-bottom: 16px;
}

.error-404 .page-content {
    max-width: 480px;
    color: #4b5563;
    margin-bottom: 32px;
    line-height: 1.6;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

@media (min-width: 1024px) {
    .error-404 .page-title {
        font-size: 140px;
    }
}