/* ==========================================================================
   Adilimo AB – stilmall
   Ersätter Neve-temat, Elementor och AMO Team Showcase.
   ========================================================================== */

/* --- Typsnitt (lokala kopior, inget anrop till Google) ------------------- */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/roboto-300-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/roboto-300-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Variabler ----------------------------------------------------------- */
:root {
    --font-ui: Graphik, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    --font-text: "Roboto", Sans-serif;
    --font-p: "Lato";

    --color-text: #393939;
    --color-link: #0366d6;
    --color-link-hover: #0e509a;
    --color-heading: #6ec1e4;
    --color-body-text: #7a7a7a;
    --color-p: #5b5b5b;
    --color-blue: #6599cd;
    --color-team: #6da3e0;
    --color-team-dark: #556270;
    --color-border: #dadada;
}

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

html {
    font-size: 100%;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.68421;
    color: var(--color-text);
    background-color: #fff;
    overflow-x: hidden;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
h2, h3, h4 { font-family: var(--font-ui); font-weight: 600; line-height: 1.68421; margin-bottom: .8rem; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
@media (min-width: 769px) {
    h2 { font-size: 1.75em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.25em; }
}

ul { list-style: none; }

p {
    margin-bottom: 20px;
    color: var(--color-p);
    font-family: var(--font-p);
    font-style: normal;
    font-weight: 400;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--color-link); text-decoration: none; cursor: pointer; }
a:hover, a:focus { color: var(--color-link-hover); }

.container { width: 100%; max-width: 748px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 576px) { .container { max-width: 992px; } }
@media (min-width: 960px) { .container { max-width: 1170px; } }

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hoppa-till-innehåll-länk: osynlig tills den får fokus med Tab-tangenten */
.skip-link {
    position: absolute;
    top: 32px;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 10px 20px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.skip-link:focus { top: 0; z-index: 1000; width: auto; height: auto; clip: auto; background: #fff; text-decoration: underline; }

/* --- Sidhuvud ------------------------------------------------------------ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 170;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}

.navbar__row { display: flex; align-items: center; justify-content: space-between; }
.navbar__row > * { margin: 4px 0; }

.brand { display: flex; flex-direction: column; justify-content: center; padding: 10px 0; color: var(--color-text); }
.brand:hover { color: var(--color-text); opacity: .9; }
.brand img { max-width: 120px; }

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 500;
    line-height: 1.6em;
}
.menu li { position: relative; padding: 10px 0; }
.menu li:not(:last-child) { margin-right: 20px; }
.menu a { display: flex; align-items: center; min-height: 25px; height: 100%; color: var(--color-text); }
.menu li:hover > a { color: var(--color-link-hover); }

.navbar-toggle {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 10px 15px;
    font: inherit;
    line-height: normal;
    color: var(--color-text);
    background: none;
    border: 1px solid;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s ease-in-out;
}
.navbar-toggle__bar {
    position: relative;
    display: block;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-text);
    transition: all .1s ease;
}
.navbar-toggle__bar:nth-child(2) { margin: 3px 0; }
.menu-open .navbar-toggle__bar:nth-child(1) { transform: rotate(45deg); top: 5px; }
.menu-open .navbar-toggle__bar:nth-child(2) { opacity: 0; }
.menu-open .navbar-toggle__bar:nth-child(3) { transform: rotate(-45deg); bottom: 5px; }

@media (max-width: 959px) {
    .navbar .menu { display: none; }
}
@media (min-width: 960px) {
    .navbar__row > * { margin: 8px 0; }
    .navbar .navbar-toggle { display: none; }
}

/* Mobilmeny (glider in från vänster) */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999900;
    display: flex;
    width: 360px;
    max-width: 100%;
    height: 100vh;
    visibility: hidden;
    transform: translateX(-100%);
    transition: all .3s cubic-bezier(.79, .14, .15, .86);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
}
.menu-open .sidebar { visibility: visible; transform: translate3d(0, 0, 0); }

.sidebar__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    overflow-wrap: break-word;
}
.sidebar__close { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px; }
.sidebar__inner { height: 100%; padding: 20px 0; overflow: auto; }
.sidebar__nav { margin: 4px 0; padding: 0 15px; opacity: 0; transition: transform .3s, opacity .3s; }
.menu-open .sidebar__nav { opacity: 1; }
.sidebar .menu { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.sidebar .menu li { width: 100%; margin-right: 0; padding: 3px 0; }
.sidebar .menu a { width: 100%; padding: 3px 0; justify-content: flex-start; }

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 999899;
    background: rgba(0, 0, 0, .5);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .3s linear;
}
.menu-open .sidebar-overlay { visibility: visible; opacity: 1; pointer-events: auto; }

/* --- Sektioner och kolumner --------------------------------------------- */
.section { position: relative; }

.row { position: relative; display: flex; max-width: 1140px; margin: 0 auto; }
.row--full { max-width: none; }
@media (max-width: 1024px) { .row { flex-wrap: wrap; max-width: 1025px; } .row--full { max-width: none; } }
@media (max-width: 767px)  { .row { max-width: 768px; } .row--full { max-width: none; } }

.col {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    min-height: 1px;
    padding: 10px;
}
.col > * { width: 100%; }
.col > :not(:last-child) { margin-bottom: 20px; }
.col--middle { align-content: center; align-items: center; }

@media (min-width: 768px) {
    .col--half { width: 50%; }
    .col--two-thirds { width: 66.666%; }
}

/* Bakgrundsbilder */
.bg-water { background-image: url(../images/water.jpg); background-size: cover; }
.bg-pattern { background-image: url(../images/logo-pattern.png); background-size: cover; }
@media (min-width: 1025px) { .bg-water { background-attachment: fixed; } }

/* Band med bara bakgrundsbild */
.band { height: 70px; }
@media (max-width: 767px) { .band--tall { height: 140px; } }

/* Rubriker och brödtext */
.heading {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    font-weight: 300;
    line-height: 1;
    color: var(--color-heading);
}
.heading--center { text-align: center; }
.heading--right { text-align: right; }

.text { font-family: var(--font-text); font-weight: 400; color: var(--color-body-text); }

/* --- Hero ---------------------------------------------------------------- */
@media (min-width: 768px) {
    .hero { height: 100vh; }
    .hero .row { height: 100%; align-items: center; }
    /* Tom vänsterkolumn (en tredjedel) */
    .hero .row::before { content: ""; width: 33.333%; min-height: 1px; }
}
@media (max-width: 767px) {
    .hero .row::before { content: ""; width: 100%; min-height: 1px; }
}
@media (max-width: 1024px) { .hero .col { padding-top: 100px; } }

.hero__box { padding: 30px; background: #fff; }

/* --- Intro (blå) --------------------------------------------------------- */
.intro { padding: 30px; background-color: var(--color-blue); }
.intro .col { padding-bottom: 30px; }
.intro .text, .intro p { color: #fff; }

/* --- Team ---------------------------------------------------------------- */
#Team { scroll-margin-top: 40px; }
.team-section .col { padding: 55px 10px 100px; }
.team-section .heading { margin-bottom: 20px; }

.team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
    line-height: 1;
    direction: rtl; /* första personen längst till höger, som i originalet */
}

.team__item { position: relative; overflow: hidden; aspect-ratio: 1 / 1; direction: ltr; }

.member {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
    color: #fff;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}
.member::before {
    content: " ";
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-team-dark);
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.member:hover::before { opacity: .8; }
.member:focus:not(:focus-visible) { outline: none; }

.member__img { display: block; width: 100%; margin: 0; }

.member__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate3d(0, 1, 0, -180deg);
    transform-style: preserve-3d;
    transition: all .8s ease-in-out;
}
.member__icon img { transform: rotate(-45deg); }
.member:hover .member__icon { opacity: 1; transform: translate(-50%, -50%) rotate3d(0, 1, 0, 0deg) rotate(45deg); }

.member__info {
    position: absolute;
    right: 0;
    bottom: 3.8%;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    text-align: right;
}
.member__name,
.member__role { padding: 8px 15px; line-height: 1; }
.member__name {
    display: block;
    font-size: 18px;
    font-weight: 400;
    background: var(--color-team);
    transition: all .7s ease-in-out;
    transition-property: opacity, transform;
}
.member__role {
    float: right;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .01em;
    text-align: center;
    background: var(--color-team-dark);
    transition: all 1s ease-in-out;
    transition-property: opacity, transform;
}
.member:hover .member__info > * { opacity: 0; transform: translateX(100%); }

/* Infopanel (dialog) */
.team-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    outline: none;
}
.team-dialog::backdrop { background: #0b0b0b; opacity: .8; }

.panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 640px;
    min-height: 100%;
    color: var(--color-team-dark);
    background: #fff;
    animation: .5s ease-in-out both;
    backface-visibility: hidden;
}
.panel.is-opening { animation-name: panel-in; }
.panel.is-closing { animation-name: panel-out; animation-duration: .4s; }

.panel__header { position: relative; min-height: 40px; }
.panel:focus { outline: none; }
/* Tom yta med samma mått som originalets (genomskinliga) platshållarbild */
.panel__img { max-height: 640px; overflow: hidden; }
.panel__img span { display: inline-block; width: 100%; aspect-ratio: 1 / 1; }

.panel__close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: var(--color-team);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: all .2s ease-out;
}
.panel__close:hover, .panel__close:focus { background: var(--color-team-dark); }
.panel__close:focus:not(:focus-visible) { outline: none; }
.panel__close svg { width: 12.8px; height: 12.8px; margin-top: -1px; fill: currentColor; }

.panel__heading {
    position: absolute;
    right: 0;
    bottom: -40px;
    text-align: right;
    color: #fff;
    opacity: 0;
    transition: opacity .4s ease-out;
}
.panel__heading.is-visible { opacity: 1; }
.panel__title,
.panel__role { padding: 10px 20px; line-height: 1; }
.panel__title {
    min-width: 317.8px;
    margin: 0;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    background: var(--color-team);
}
.panel__role {
    display: inline-block;
    min-width: 200px;
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    background: var(--color-team-dark);
}

.panel__content { padding: 60px 30px 50px; background: inherit; }
@media (min-width: 600px) { .panel__content { padding: 70px 40px 60px; } }

@keyframes panel-in {
    from { opacity: 0; transform: translate3d(80%, 0, 0); }
    20%  { opacity: 0; }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes panel-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    80%  { opacity: 0; }
    to   { opacity: 0; transform: translate3d(80%, 0, 0); }
}

/* --- Projekt ------------------------------------------------------------- */
#Projects { scroll-margin-top: 10px; }
.projects-title .col { padding-top: 55px; }

.project > .row { padding: 10px; }
.project--last > .row { padding-bottom: 35px; }
.project__logo { text-align: center; }
.project__logo img { display: inline-block; vertical-align: middle; }

.other-projects .col { padding: 55px 10px; }

/* --- Kontakt ------------------------------------------------------------- */
.contact { background-color: #fff; }
.contact .contact__box { padding: 30px; background-color: #fff; }
/* Tom högerkolumn (halva bredden) som visar bakgrundsbilden */
.contact > .row::after { content: ""; width: 100%; min-height: 1px; }
@media (min-width: 768px) { .contact > .row::after { width: 50%; } }

/* --- Sidfot -------------------------------------------------------------- */
.site-footer { position: relative; z-index: 10; background-color: #fff; }
.site-footer .container { padding-top: 4px; padding-bottom: 4px; font-weight: 500; line-height: 1.6em; text-align: center; }
@media (min-width: 960px) { .site-footer .container { padding-top: 8px; padding-bottom: 8px; } }

/* --- Scrollanimationer --------------------------------------------------- */
.js .reveal:not(.is-animated) { visibility: hidden; }
.reveal.is-animated { animation-duration: 1.25s; }
.reveal--slow.is-animated { animation-duration: 2s; }
.reveal--up.is-animated { animation-name: fadeInUp; }
.reveal--left.is-animated { animation-name: fadeInLeft; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to   { opacity: 1; transform: none; }
}