/* ============================================================================
   06-chrome.css — part 6 of 9 of the former main.css
   Disclaimer/cookie overlays, footer and navbar

   LOAD ORDER MATTERS. These files are linked in numeric order from
   shared_elements/main/main.html. They were split by position and never
   reordered, so the cascade is byte-for-byte what the single file produced.
   Moving a rule between them can change which declaration wins.
   ============================================================================ */
/* Disclaimers begin */

#disclaimerbody {
    counter-reset: disclaimers; /* Set a counter named 'disclaimers', and its initial value is 0. */
    display: flex;
    flex-direction: column;
}

ol.optional-disclaimers-container  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

ol.standard-disclaimers.show-less {
    height: 18rem;
    overflow: hidden;
    position: relative;
}

ol.standard-disclaimers.show-less::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10rem;
    background: linear-gradient(0deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

.optional-disclaimers {
    padding: 10px 20px 10px 20px;
    font-size: 1rem;
    border: 1px solid var(--ks-lightgrey);
    border-radius: 4px;
    position: relative;
    margin-bottom: 2rem;
}

.optional-disclaimers::before {
    display: block;
    position: absolute;
    top: -0.5rem;
    font-size: .9rem;
    background-color: var(--ks-white);
    padding-inline: 0.4rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--ks-grey);
}

.freetextdisclaimercontainer .disclaimerlabel::before {
    white-space: nowrap;
}

.freetextdisclaimercontainer textarea:not(:focus)~.ta-floating-label.disclaimerlabel::before {
    color: var(--ks-grey);
}

.increment-disclaimers {
    counter-increment: disclaimers;
    /* Increment the value of section counter by 1 for each disclaimer */
}
.increment-optional-disclaimers[data-activated="true"] {
    counter-increment: disclaimers;
}

ol.standard-disclaimers li {
    margin-bottom: 1rem;
}

.optional-disclaimers[data-activated="true"]::before,
.freetextdisclaimercontainer textarea:not(.empty_area)~.ta-floating-label.disclaimerlabel::before,
.freetextdisclaimercontainer textarea:focus~.ta-floating-label.disclaimerlabel::before {
    content: var(--ks-i18n-disclaimer) counter(disclaimers); /* Display the word 'Fyrirvari ', the value of
                                                disclaimers counter before the content
                                                of each li */
}

.freetextdisclaimercontainer textarea.empty_area:not(:focus)~.ta-floating-label.disclaimerlabel::before {
    content: var(--ks-i18n-write-disclaimer-here);
}

.disclaimer-toggler {
    align-self: center;
    margin-top: -1rem;
    margin-bottom: 3rem;
    z-index: 10;
}

.disclaimer-toggler.more {
    margin-bottom: 3rem;
}

.disclaimer-var {
    font-weight: 500;
    font-style: italic;
    cursor: pointer;
}

.disclaimer-var:empty::before {
    display: inline-block;
    content: attr(data-placeholder);
    color: var(--ks-error-red);
}

.disclaimer-preview {
    padding-right: 1rem;
    margin-inline: 1rem;
}

.disclaimer-preview li {
    margin-bottom: 0.5rem;
}

.disclaimer-preview li.userdefined {
    font-weight: bold;
}

.disclaimer-preview li.userdefined::marker {
    font-weight: normal;
}

.field-wrapper > input[id^="optional-disclaimer-switch"]  {
    width: auto;
}

.optional-disclaimer-panel fieldset .form-container {
    display: none;
}

#ha-included-checkgroup {
    display: grid;
    grid-template-columns: calc(100% - 2vw);
    row-gap: 1.5vh;
}

#ha-included-checkgroup > * {
    height: auto;
}

/* Disclaimers end */

/* Kauptilboð Gagntilboð Form end */

/* Cookie related */

.cookie-card {
    position: fixed;
    left: 1rem;
    bottom: 0.5rem;
    z-index: 999;
    width: 320px;
}

.cookie-card .fa-cookie-bite {
    width: 24px;
    height: 24px;
}

#first-cookie-content,
#second-cookie-content {
    line-height: 1.1rem;
}

/* Footer */

.social-icon
{
    color: var(--ks-black-2);
}

footer
{
    padding: 2rem;
}

.footer-socials {
    display: flex;
    flex-direction: row;
    justify-content: left;
}

.footer-title
{
    font-family: "Work Sans";
    font-size: 17px;
    color: var(--ks-black-2);
    font-weight: 400;
}

a.footer-title {
    text-decoration: none;
    position: relative;
}

.footer-logo-banner{
    max-height: 60px;
    max-width: 240px;
    margin-bottom: 1rem;
}

.footer-subtitle
{
    text-decoration: none;
    font-family: "Work Sans";
    font-weight: 300;
    font-size: 17px;
    line-height: 24px;
    color: var(--ks-grey-6);
}

a.footer-subtitle{
    cursor: default;
}

a.footer-subtitle:hover{
    cursor: pointer;
}

a.footer-title::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--eC-primary);
    bottom: 0;
    left: 0;
    top: 22px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.5s ease-in-out;
  }

a.footer-title:hover::before,
a.footer-subtitle:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

/* Footer web */
@media ((min-width: 992px)) {
  svg.footer-title {
    margin-bottom: 1rem !important;
  }
}

/* Footer tablet */
@media (max-width: 991px) and (min-width: 576px) {
    .footer-agency {
        text-align: center;
    }
    .footer-socials {
        justify-content: center;
    }
}

/* Footer mobile */
@media (max-width: 575px) {
  .footer-subtitle {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
  }
  .footer-socials {
      justify-content: center;
  }
}

.neutral-footer ul{
    display: inline-grid;
    grid-auto-flow: row;
    grid-gap: 24px;
    justify-items: center;
    margin: auto;
    list-style-type: none;
}

@media (min-width: 500px) {
    .neutral-footer ul {
        grid-auto-flow: column;
    }
}

@media (max-width: 500px) {
    .footer-splitter {
        display: none;
    }
}

/* Footer End*/

.smart-scroll{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.scrolled-down{
    transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
    transform:translateY(0); transition: all 0.3s ease-in-out;
}

/* this is changed when width hits the first breakpoint */
.background-primary-gradient
{
    background: var(--ks-background-primary);
}

.text-caps {
    text-transform: uppercase;
}

.cookie-banner .text-sub
{
    font-size: calc(0.8rem + 0.5vw) !important;
}

.cookie-banner p
{
    font-size: 14px;
    line-height: 20px;
}

.maxw-70
{
    max-width: 70% !important;
}

.container
{
    margin-left: auto;
    margin-right: auto;
}

.custom-container
{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

main > #wrapper > .container-fluid
{
    margin-top: 120px;
    min-height: 100vh;
}

/* Navbar */

.navbar
{
    padding: 2rem 5rem 1rem;
    margin: 0 auto 1rem;
    top: 0px;
    width: 100%;
    position: sticky;
    z-index: 10;
}

.navbar .user-avatar,
.navbar .user-avatar img
{
    border-radius: 100%;
    line-height: 32px;
    pointer-events: none;
    user-select: none;
}

.navbar .fa-magnifying-glass,
.navbar .fa-globe
{
    font-size: 1.5rem;
    color: var(--eC-primary);
    text-decoration: none;
}

.navbar .nav-link
{
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: var(--eC-black);
    text-decoration: none;
}

.navbar .nav-item:hover .nav-link
{
    text-shadow: 0px 0px 1px var(--eC-black);
}

.nav-item
{
    width: fit-content;
    text-align: end;
}

.navbar .nav-item:hover .nav-link
{
    box-shadow: 0 3px 2px -2px var(--eC-black);
    cursor: pointer;
}

.dropdown-nav
{
    border: none;
    background-color: transparent;
    box-shadow: none;
}

.dropdown-nav::after
{
    content: none;
}

.side-nav {
    padding: 0.5rem;
    margin: 0 auto 1rem;
    top: 0px;
    width: 100%;
    position: sticky;
    z-index: 10;
}

/* Navbar media */
@media (max-width: 991px) {

    .navbar
    {
        padding: 2rem 0 0;
        gap: 0;
    }

    .navbar-nav
    {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding-right: 1rem;
        align-items: center;
    }

    .navbar-right-side
    {
        position: sticky;
        right: 1rem;
    }

    .navbar-brand
    {
        position: sticky;
        left: 1rem;
        z-index: 9;
    }
}

#about-ecasa {
    color:black;
    text-decoration: underline;
    font-size: 24px;
    font-weight: 300;
}

.is-invalid {
    color: var(--ks-error-red);
}