/*!
Theme Name: erstatning
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: erstatning
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

erstatning is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* ===================================
   CSS VARIABLES & RESET
   =================================== */

/* Keep admin bar visible without shifting the page */
html {
   -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
     font-size: 16px;
    scroll-behavior: smooth;
}

#wpadminbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

:root {
   
    --color-primary: #f26649;
    --color-dark-green: #2c3f22;
    --color-light-green: #EEF5D3;
    --color-medium-green: #D3E1A7;
    --color-light-pink: #f8d8ca;
    --color-spark-green: #F2FFBF;
}

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

@media print {

    /* Hide fixed header and SVGs */
    header,
    .site-header,
    .header,
    svg,
    .header svg,
    .site-header svg {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: static !important;
    }

    /* if your header has a class or ID, use it directly: */
    #fixed-header {
        display: none !important;
        position: absolute !important; /* key for Firefox */
    }
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "new-rubrik", sans-serif;
    min-height: 100vh;
    color: var(--color-dark-green);
     --default-afstand: 30px;
    font-size: 18px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none; /* Removes iOS button styling */
  -moz-appearance: none; /* Removes Firefox styling */
  appearance: none;

  font-family: inherit;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background-color: #0073e6;
  color: white;
  line-height: 1.2;
}

button:focus {
  outline: none;
}
/* ===================================
   LINKS
   =================================== */
a, a:visited {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-dark-green);
}
/* ===================================
   TYPOGRAPHY
   =================================== */
h1, h2, h3, h4, h5 {
    font-weight: 500;
    letter-spacing: -0.05rem;
}

h1 {
    font-size: clamp(1.9rem, 4vw + 1rem, 3rem);
    margin-bottom: 20px;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem);
    margin-top: 40px;
    margin-bottom: 16px;
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem);
    margin-top: 32px;
    margin-bottom: 14px;
    line-height: 1.3;
    font-weight: 300;
}

h4 {
    font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: 300;
}

h5 {
    font-size: clamp(1.2rem, 1vw + 0.7rem, 1.5rem);
    margin-top: 24px;
    margin-bottom: 10px;
    line-height: 1.4;
}

h6 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 5px;
    line-height: 1.4;
}

p {
    margin-bottom: 1rem;
}

/* ===================================
   BUTTONS
   =================================== */
button, .wp-block-button__link, #kontakt .wpforms-submit {
    font-family: "new-rubrik", sans-serif;
    border: none;
    margin-top: 1rem;
    padding: 12px 18px;
    line-height: 1.1;
    border-radius: var(--default-afstand);
    cursor: pointer;
    font-size: inherit;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

button::after, .wp-block-button__link::after {
    content: url('img/arrow_white.svg');
    display: inline-block;
    width: 16px;
    height: 16px;
}

button:hover, .wp-block-button__link:hover {
    background-color: var(--color-dark-green);
    transform: scale(1.1);
    color: #fff;
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.center {
    margin-top: 1rem;
    text-align: center;
}

section {
    margin-bottom: 12vw;
}

blockquote {
    margin: 30px 0;
    padding: 22px 30px 10px 30px;
    border-radius: var(--default-afstand);
}

.main-content .main-content blockquote h2,.main-content blockquote h3, .main-content blockquote h4,.main-contentblockquote h5,blockquote h6 {
    
    margin-top: 0px;
}

blockquote ul {
  padding: 0 0 15px 20px; /* increase or decrease as needed */
}




hr.wp-block-separator,
.wp-block-separator {
    border: none !important;
    border-top: 2px dotted var(--color-primary) !important;
    margin: var(--default-afstand) 0 !important;
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 1000;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--default-afstand) 0 var(--default-afstand);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.logo-left {
    width: 30%;
    height: auto;
}

.logo-right {
    width: 22%;
    height: auto;
}
/* Reset for both menus */
.main-menu-desktop, .main-menu-desktop ul,
.main-menu-mobile, .main-menu-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-menu a,
.main-menu-desktop a,
.main-menu-mobile a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-primary);
}

.main-menu-desktop a:hover, .main-menu a:hover  {
     color: var(--color-dark-green);
}

/* Hide submenus by default */
.main-menu-desktop .sub-menu,
.main-menu-mobile .sub-menu {
    display: none;
}

/* ===== DESKTOP MENU ===== */
/* Reset */
.main-menu, .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-menu a {
    display: block;
 
    text-decoration: none;
    min-height: 70px;
}



/* Hide all submenus by default */
.main-menu .sub-menu {
    display: none;
}

@media (min-width: 1025px) {

/* MENU CONTAINER */
.main-menu {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;

    gap: 0; /* important: remove gap so separators behave predictably */
}

/* PARENT ITEMS */

.main-menu > li {
    position: relative;
}

/* LINK — here is where you control the distance */
.main-menu > li > a {
    padding: 10px 0px 10px 0;   /* <<< 40px is the distance to separator */
    display: block;
    min-height: 70px;
    text-align: center;
}

/* SEPARATOR */
.main-menu > li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;                   /* separator stays at the far right */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: var(--color-dark-green);
}

/* LINK — controls spacing between items */
.main-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 15px;    /* <-- adjust this for more/less space */
    min-height: 70px;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;

    /* no margin inside link */
    margin: 0;
}

/* Invisible bridge for submenu */
.main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10px;
    right: 10px;
    height: 10px;
    background: transparent;
}

/* SUBMENU */
.main-menu .sub-menu {
    display: none;
    position: absolute;
    top: 113%;
    left: 0;
    min-width: 240px;
    background: #fff;
    z-index: 1001;
    padding-top: 7px;
    padding-bottom: 10px;
}
    
    .main-menu .sub-menu a {
    min-height: auto !important;
    line-height: 1.2;
    padding: 8px 15px !important;
    display: block;
}

/* SHOW SUBMENU */
.main-menu > li:hover > .sub-menu {
    display: block;
}

.main-menu .sub-menu li a {
    padding: 8px 15px;
}

}

/* ===== Mobile and Tablet (up to 1024px) ===== */
@media (max-width: 1024px) {
    .main-menu {
        display: block;
      
    }
    
    .main-menu > li {
       
    }
    
    /* ===== Smooth Mobile Submenu Animation ===== */
/* Replace your existing submenu styles with these */

@media (max-width: 1024px) {
    /* Force submenus to be in normal document flow */
    .main-menu .sub-menu {
        display: block;  /* Changed from 'none' to 'block' */
        position: relative;
        padding-left: 15px;
        background: #fff;
        width: 100%;
        max-height: 0;  /* Start collapsed */
        overflow: hidden;  /* Hide overflow content */
        opacity: 0;  /* Start invisible */
        transition:  0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;  /* Smooth transitions */
    }
    
    /* Show submenu when parent has .open class */
    .main-menu > li.open > .sub-menu {
        max-height: 500px;  /* Adjust based on your content - make it larger than your longest submenu */
        opacity: 1;  /* Fade in */
        padding-top: 0px;  /* Add some spacing when open */
        padding-bottom: 10px;
    }
    
    
}
    
  
}

.nowrap {
  white-space: nowrap !important;
}


/* Hamburger Menu */
.hamburger {
    margin-top: -20px;
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
    border-radius: 2px;
    display: block;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Ensure hamburger is visible and active state works on mobile/tablet */
@media (max-width: 1024px) {
    .hamburger {
        display: flex;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px) !important;
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px) !important;
    }
}

/* ===================================
   FRONT HERO SECTION
   =================================== */
#front-hero {
    width: 100%;
    max-width: 1400px;
    margin: 160px auto 60px auto;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.circle {
    position: absolute;
    width: clamp(400px, 35vw, 550px);
    height: clamp(400px, 35vw, 550px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.circle-1 {
    right: 5vw;
    z-index: 1;
    animation: slideIn1 0.8s ease-out forwards;
}

.circle-2 {
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background-color: rgba(242, 102, 73, 0.6);
    animation: slideIn2 0.8s ease-out 1s forwards;
}

.circle-3 {
    left: 5vw;
    z-index: 3;
    background-color: var(--color-primary);
    animation: slideIn3 0.8s ease-out 3s forwards;
}

.circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.circle-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.circle-3 .circle-svg {
  display: block;
  width: 100%;
  height: 100%;
  background: url('img/circle3.svg') center/contain no-repeat;
  cursor: pointer;
}

.circle-text {
    padding: 60px;
    text-align: center;
    color: #fff;
}

.circle-2 .circle-text {
    animation: fadeOutText 0.5s ease-out 3s forwards;
}

.circle-3 .circle-text {
    color: var(--color-dark-green);
}

.circle-text h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem);
    line-height: 1.3;
}

/* Desktop Animations */
@keyframes slideIn1 {
    from {
        opacity: 0;
        transform: translateX(-800px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideIn2 {
    from {
        opacity: 0;
        transform: translateX(calc(-50% - 800px));
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

@keyframes slideIn3 {
    from {
        opacity: 0;
        transform: translateX(-800px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutText {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Mobile Animations */
@keyframes slideInMobile1 {
    from {
        opacity: 0;
        transform: translateY(-300px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInMobile2 {
    from {
        opacity: 0;
        transform: translateY(-300px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInMobile3 {
    from {
        opacity: 0;
        transform: translateY(-300px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   HERO SECTION (INNER PAGES)
   =================================== */
#hero {
    width: 100%;
    max-width: 1400px;
    margin: 100px auto 0 auto;
    height: 50vh;
    display: flex;
    color: var(--color-dark-green);
    position: relative;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    border-bottom-right-radius: 250px;
    z-index: 1;
}

.hero-left {
    width: 60%;
    height: 65%;
    padding: var(--default-afstand);
    position: relative;
    z-index: 2;
}

.hero-left-top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.hero-left-bottom {
    width: 100%;
    margin-top: 100px;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.hero-right {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    min-width: 300px;
}

.hero-image {
    width: 100%;
    max-height: 50vh;
    max-width: 50vh;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

/* ===================================
   MAIN CONTENT SECTIONS
   =================================== */
#front-main, #kontakt {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px var(--default-afstand);
}

main  {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px var(--default-afstand);
    gap: 40px;
}



.main-content {
    width: 63%;
    padding-right: 5%;
    margin-top: -18vh;
}

.main-content a, .intro a {
 display: inline-block;
  position: relative; /* needed for ::after positioning */
  text-decoration: none;
  color: var(--color-primary);

}

.main-content a:hover, .intro a:hover {
color: var(--color-dark-green);
}


.main-content a::after, .intro a::after  {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px; 
  width: 0%;
  height: 1px; 
  background-color: var(--color-dark-green);
  transition: width 0.3s ease;
}

.main-content a:hover::after, .intro a:hover::after {
  width: 100%;
}

.main-content ul {
    margin-left: 20px;
}

.main-content blockquote ul {
    margin-left: 0px;
}



/* ===================================
   SIDEBAR
   =================================== */
.sidebar {
 width: 32%;
    position: sticky;
    top: 130px;
}


.sidebar ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
   
}

.sidebar li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
}

.sidebar li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 24px;
    height: 24px;
    background: url("img/arrow_orange.svg") no-repeat center;
    background-size: contain;
}

.sidebar li:hover::before {
    background-image: url("img/arrow_gron.svg");
}

.sidebar a {
    text-decoration: none;
    color: var(--color-primary);
    font-size: clamp(1.2rem, 1vw + 0.7rem, 1.5rem);
}

.sidebar a:hover {
    color: var(--color-dark-green);
}

.splash {
  width: 100%;
    max-width: 400px;
    margin-top: 30px;
    border-radius: var(--default-afstand);
  background: var(--color-primary);
    padding: 2% 5% 5% 5%;
  color: #fff;
    text-align: center;
}

body.page-id-74 .splash {
    display: none !important;
}

body.page-id-445 .readmore, body.page-id-641 .readmore  {
    display: none !important;
}

.splash h5 {
      line-height: 1.3;
}

.splash button {
      background-color: var(--color-dark-green);
    font-size: 1rem;
}

/* ===================================
   GRID LAYOUTS
   =================================== */
.tokolonne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.entokolonne {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

.entokolonne .item img {
  width: 100%;        /* adjust as needed */
  height: 100%;
  max-width: 400px;/* same as width to keep it circular */
      max-height: 400px;/* same as width to keep it circular */
  object-fit: cover;   /* crops image nicely inside the circle */
  border-radius: 50%;  /* makes it circular */
  display: block;
  margin: 0 auto;      /* centers the image horizontally */
}

.trekolonne {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.item {
    padding: 0;
    border-radius: var(--default-afstand);
}

.item img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.trekolonne .item {
    border: solid 2px var(--color-primary);
    padding: 10px 30px 30px 30px;
    border-radius: 30px;
}

.entokolonne.entokolonne--center .item:last-child {
    display: flex;
    flex-direction: column;   /* ⬅ keeps content stacked */
    justify-content: center;  /* ⬅ vertical centering */
}
/* ===================================
   SPECIALER SECTION
   =================================== */
.speciale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 20px;
    margin: 0 auto;
}

.speciale-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.speciale-item.headline {
    display: block;
}


.headline {
    max-width: 800px;
    text-align: left;
    margin-bottom: 5vh;
}

.cirkel-item {
    position: relative;
}

.cirkel {
    width: 30vw;
    height: 30vw;
    max-width: 400px;
    max-height: 400px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cirkel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(44,75,34, 0.6) 50%, rgba(44,63,34, 0.4) 100%);
    z-index: 2;
}

.cirkel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    filter: grayscale(70%);
  opacity: 0.7;
    z-index: 1;
}

.cirkel > * {
    position: relative;
    z-index: 3;
}

.cirkel h4 {
    line-height: 1.2;
    margin-bottom: 12px;
}

.cirkel p {
    margin-bottom: 10px;
}
.cirkel h4 {
    line-height: 1.2;
    margin-bottom: 12px;
    z-index: 6;
}

.cirkel p {
    margin-bottom: 16px;
    z-index: 5;
}

.cirkel button {
    z-index: 4;
}

.cirkel > * {
    position: relative;
    z-index: 3;
}

/* ===================================
   FAQ SECTION
   =================================== */
.faq {
    margin: 40px auto;
}

faq-answer ul {
    list-style: none;
    padding-left: 0;
}

.faq-answer ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 8px;
}

.faq-answer ul li::before {
    content: "•";
    color: var(--color-orange); /* match your arrow color */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0;
}

.faq-item {
    padding: 15px 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: var(--color-light-green);
    border-radius: calc(2*var(--default-afstand));
}
.faq-item:nth-of-type(even) {
    background-color: var(--color-medium-green);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px;
    cursor: pointer;
}

.faq-question span {
    font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
    font-weight: 500;
}

.faq-question img.icon {
    width: 50px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
    padding: 0 10px;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding-bottom: 15px;
}

.faq-item.active .faq-question img.icon {
    transform: rotate(90deg);
}

/* ===================================
   TESTIMONIALS SECTION
   =================================== */
.testamonials {
    margin: 12vw 0 5vw 0;
}

/* ===================================
   KONTAKTFORMUALR
   =================================== */

#kontakt {
  position: relative;
  background-color: var(--color-light-green);
  border-radius: var(--default-afstand);
  overflow: hidden;
}

/* blended background layer */
#kontakt .bg-blend {
  position: absolute;
  inset: 0;
  background-image: url("img/kontaktpix.jpg");
  background-repeat: no-repeat;
  background-size: contain; /* or cover */
  mix-blend-mode: multiply; /* try overlay, soft-light, etc. */
  pointer-events: none;
}

#kontakt .wpforms-field input,
#kontakt .wpforms-field textarea,
#kontakt .wpforms-field select {
  border-radius: 35px; /* adjust radius as needed */
  border: 0px; /* optional */
  padding: 25px 30px; /* optional for nicer spacing */
  box-sizing: border-box;
}

#kontakt .wpforms-field input::placeholder,
#kontakt .wpforms-field textarea::placeholder {
  color: #f26649; /* your orange color */
  font-size: 1.4rem; /* adjust size as desired */
  opacity: 1; /* ensures full visibility (default is 0.6 in some browsers) */
}

/* Remove arrows from number fields in WebKit browsers (Chrome, Safari, Edge) */
#kontakt input[type=number]::-webkit-inner-spin-button,
#kontakt input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove arrows in Firefox */
#kontakt input[type=number] {
  -moz-appearance: textfield;
}


/* content layer above */
#kontakt .content {
  position: relative;
  z-index: 1;
}
.wpforms-confirmation-container-full {
    background: #fff;
    border: 0px;
    box-sizing: border-box;
}


/* ===================================
   MEDARBEJDER SIDE
   =================================== */

.medarbejdere-wrapper .tokolonne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 100px;
    align-items: center;
}

.medarbejder-item {
    display: contents;
}


.image-container {
    position: relative;
    width: 75%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
   
}

.image-container.left-align {
    margin-left: 0;
    margin-right: auto;
}

.image-container.right-align {
    margin-left: auto;
    margin-right: 0;
}

.circular-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    -webkit-transform: translateZ(0); 
}



.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-container h2 {
    margin-top: 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .medarbejdere-wrapper .tokolonne {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 80px;
    }
    
    .medarbejder-item {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .image-container {
        width: 300px; 
        height: 300px; 
        max-width: 300px;
        margin-bottom: 20px;
        order: 1;
        grid-row: 1;
         
    }
    
    .content-container {
        order: 2;
        grid-row: 2;
    }
    
    .image-container.left-align {
        margin-left: 0% !important;
        margin-right: auto !important;
    }
    
    .image-container.right-align {
        margin-left: auto !important;
        margin-right: 0% !important;
    }
    
    button, .wp-block-button__link, #kontakt .wpforms-submit  {
        padding: 8px 12px;
        border-radius: 30px;
    }
    
    .speciale {
   
    grid-template-columns: repeat(1, 1fr);
   
}
}

/* ===================================
   FOOTER
   =================================== */
footer {
    background: var(--color-dark-green);
    max-width: 1400px;
    margin: 0 auto;
    color: #fff;
    padding: 40px;
    border-top-left-radius: var(--default-afstand);
    border-top-right-radius: var(--default-afstand);
    overflow: hidden;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-left, .footer-right {
    flex: 1;
}

.footer-right {
    text-align: right;
}

.footer-left h3, .footer-right h3 {
    margin-bottom: 20px;
    font-size: 20px;
}

.footer-left p, .footer-right p {
    line-height: 1.6;
}


footer a:hover {
    color: #fff;
}


/* ===================================
   TABLET PORTRAIT
   =================================== */
@media (max-width: 1024px) and (min-width: 781px) {
    .speciale {
        grid-template-columns: repeat(2, 1fr);
    }
    
    
    
    .cirkel {
        width: 70vw;
        height: 70vw;
    }
    
    .speciale {

    grid-template-columns: repeat(2, 1fr);
   
}
    
    
}

/* ===================================
   MOBILE & TABLET (up to 1024px)
   =================================== */
@media (max-width: 1024px) {
    
    body {
        font-size: 0.95rem;
           --default-afstand: 20px;
    }
    
    header {
        height: 65px;
    }
    
    
    
    .logo-left {
        width: 48%;
        max-width: 300px;
        height: auto;
        order: 1;
    }
    
    .logo-right {
        width: 35%;
        max-width: 250px;
        height: auto;
        order: 2;
    }
    
    .hamburger {
        display: flex;
        order: 3;
        z-index: 1003;
    }
    
    .header-container {
        justify-content: space-between;
    }
    
    .nav-center {
        display: none;
    }
    
    .nav-center.mobile-menu-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        z-index: 1002;
        padding: 100px 30px 30px 30px;
        overflow-y: auto;
    }
    
    .nav-center.mobile-menu-open .main-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .nav-center.mobile-menu-open .main-menu > li {
        border-bottom: 0px;
    }
    
    .nav-center.mobile-menu-open .main-menu > li > a {
        font-size: 1.5rem;
        padding: 10px 0;
    }

   .main-menu a {
        min-height:  40px;
          min-height:  40px;
    }
      
     .main-menu .sub-menu li a
    {
        min-height:  30px;
          min-height:  30px;
        padding: 0;  
         margin: 0;
    }
    
    .main-menu .sub-menu {
        padding: 0;
        margin: 0;
    }
    
.main-menu .sub-menu li {
    position: relative;
    padding-left: 20px;
}

.main-menu .sub-menu li a {
    position: relative;
    display: block;
}

.main-menu .sub-menu li a::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 40%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url("img/arrow_orange.svg") no-repeat center;
    background-size: contain;
}
    
.main-menu .sub-menu li a:hover::before {
    background-image: url("img/arrow_gron.svg");
    color: var(--color-dark-green);
}
    
    #front-hero {
        margin-top: 65px;
        height: auto;
        min-height: 600px;
        flex-direction: column;
        gap: 0;
        padding: 10px;
    }
    
    
    
    .circle {
        position: relative;
        width: 60vw;
        height: 60vw;
        right: unset !important;
        left: unset !important;
        opacity: 0;
        margin: 0 auto;
    }
    
    .circle-1 {
        order: 3;
        animation: slideInMobile1 0.8s ease-out forwards !important;
        margin-top: -18vw;
    }
    
    .circle-2 {
        order: 2;
        animation: slideInMobile2 0.8s ease-out 1s forwards !important;
        margin-top: -18vw;
    }
    
    .circle-3 {
        order: 1;
        animation: slideInMobile3 0.8s ease-out 2s forwards !important;
        margin-top: 0;
    }
    
    .circle-2 .circle-text {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .circle-text {
        padding: 0px;
    }
    
    .circle-svg {
        padding: 20px;
    }
    
   .circle-3 .circle-svg {
    background: url('img/circle3_mobil.svg') center/contain no-repeat;
    max-width: 100%;
    max-height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
    
    #hero {
        margin-top: 65px;
        flex-direction: column-reverse;
        height: auto;
        overflow: hidden;
    }
    
    .hero-background {
        height: 55%;
        border-bottom-right-radius: 120px;
    }
    
    .hero-right {
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
    }
    
    .hero-image {
        width: 65%;
        max-height: 400px;
        max-width: 400px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .hero-left {
        width: 100%;
        padding: 20px var(--default-afstand);
        z-index: 2;
        position: relative;
    }
    
    .hero-left-top,
    .hero-left-bottom {
        margin: 0;
        padding: 0;
    }
    
    .hero-left h1, 
    .hero-left h2 {
        margin: 10px 0;
        line-height: 1.2;
    }
    
    .hero-left-bottom {
        position: static;
    }
    
    main {
        display: block;
        box-sizing: border-box;
    }
    
    main::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .main-content {
        float: left;
        width: 100%;
        box-sizing: border-box;
        margin-top: -5vh;
    }
    
    .sidebar {
        float: right;
        width: 100%;
        box-sizing: border-box;
    position: static;
    top: auto;
  
    }
    
    .sidebar li::before {
        top: 6px;
        width: 17px;
        height: 17px;
    }
    
    
    .tokolonne, .trekolonne, .entokolonne {
        grid-template-columns: 1fr;
    }
    
    .tokolonne {
        gap: 0px;
    }
    

    
    
    
    
    
    
    .cirkel {
        width: 85vw;
        height: 85vw;
    }
    
    .cirkel p {
    margin-bottom: 5px;
}
    
    .faq-question img.icon {
        width: 25px;
    }
    
    .footer-container {
        flex-direction: column;
    }
    
    footer {
        padding: 20px;
    }
    
    .footer-right {
        text-align: left;
    }
    
    blockquote {
        padding: 15px 20px;
    }
}