/* ============
   RESET 
============= */

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

/* ============
   BODY & LAYOUT
============= */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
  font-family: var(--brand-font-sans);
  color: var(--brand-color-text);
  background: var(--brand-color-surface);
    /* margin: 0; */
}



main {
    flex-grow: 1; /* Pushes footer to the bottom when content is short */
}

header, footer {
    width: 100%;
}



/* ============
   TOP HEADER
============= */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    height: 80px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between text and logo */
}



.site-logo {
    width: 24px;
    height: 24px;
  color: var(--brand-color-heading); /* If using stroke="currentColor" */
}

.header-right {
    position: relative;
}

.profile-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.profile-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;

}

.profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.profile-dropdown ul {
    list-style: none;
}

.profile-dropdown li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
  color: var(--brand-color-text);
}

.profile-dropdown li a:hover {
    background-color: #eee;
}

.profile-container:hover .profile-dropdown {
    display: block;
}

/* ============
   MESSAGES (frontbase.html → _messages.html)
   A centred notice just under the fixed navbar, over the page, instead of an
   in-flow strip that sat flush against the navbar and pushed the hero down.
   Below the navbar's z-index (1030), so an open mobile menu still covers it.
============= */
.site-messages {
    position: fixed;
    top: calc(100px + 0.75rem + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1025;
    width: min(640px, calc(100% - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-messages .alert {
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

/* ============
   NAVBAR
============= */

/* "Kontakt" beside "Logga in". It used to be Bootstrap's btn-outline-primary:
   a hairline in Bootstrap's own blue, a different height, radius and weight
   from the comet-ring "Logga in" next to it (home.css .samfonycta-btn). Now
   a filled button in the brand gradient on the same metrics — 6px radius,
   0.92rem/600, the same line box — so the pair reads as one set. */
.nav-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 8px 20px;
    border: 0;
    border-radius: 6px;
    background: var(--brand-gradient-accent, linear-gradient(135deg, #0f88f2 0%, #1157bf 100%));
    box-shadow: 0 6px 16px rgba(17, 87, 191, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.nav-contact-btn .bi {
    font-size: 1rem;
    line-height: 1;
}

.nav-contact-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(17, 87, 191, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    filter: brightness(1.05);
}

.nav-contact-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(17, 87, 191, 0.25);
}

.nav-contact-btn:focus-visible {
    outline: 3px solid rgba(15, 136, 242, 0.45);
    outline-offset: 2px;
    color: #ffffff;
}

/* On the contact page itself: the same button, pressed in. */
.nav-contact-btn[aria-current="page"] {
    box-shadow: inset 0 2px 6px rgba(11, 22, 39, 0.25);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .nav-contact-btn { transition: none; }
    .nav-contact-btn:hover { transform: none; }
}
.samfony-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
  background-color: var(--brand-color-surface-muted); /* Slightly darker white */
    /* padding: 10px 20px; */
    padding: 22px;
    margin: auto;
}

/* iPhone safe areas. frontbase.html sets viewport-fit=cover, so the page is
   ALWAYS drawn edge to edge, under the status bar. Without it, mobile Safari
   drew the page below the status bar until you scrolled, then slid the whole
   fixed layer up under it — the logo and hamburger visibly jumped. Now the
   navbar always reaches the screen top and its content is padded below the
   status bar by the same amount before and during scroll.
   env() is 0 on devices without insets, so desktop and Android are unchanged. */
.samfony-navbar {
    padding-top: calc(22px + env(safe-area-inset-top, 0px));
    padding-left: calc(22px + env(safe-area-inset-left, 0px));
    padding-right: calc(22px + env(safe-area-inset-right, 0px));
}
/* The in-flow page moves down by the same inset, so every page's existing
   offset below the fixed navbar still holds; the sides keep landscape content
   clear of the notch, the footer keeps its text above the home indicator. */
body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
body > footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.navbar-left,
.navbar-right {
    display: flex;
    gap: 15px;
}

.navbar-left li,
.navbar-right li {
    list-style: none;
}



.navbar-left a,
.navbar-right a {
    text-decoration: none;
  color: var(--brand-color-heading);
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 6px;
    transition: all 0.3s ease; /* Smooth transition */
    text-decoration-thickness: 1px;
}

.navbar-left a:hover,
.navbar-right a:hover {
    /* font-size: calc(1em + 3px); */
    text-underline-offset: 10px; /* Move underline further down */
    text-decoration-thickness: 4px;
}

/* ============
   MAIN CONTENT
============= */
/* Add your content styling here if needed */

/* ============
   FOOTER
============= */

.footer {
    /* position: absolute; */
    /* top: 50%;
    left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* max-width: 1280px; */
    width: 100%;
    background: var(--brand-color-surface);
    border-radius: 6px;
    border-top: 2px solid var(--brand-color-heading);
  }

  .footer .footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.5rem;
    padding: 60px;
  }
  .footer-row .footer-col h4 {
    color: var(--brand-color-heading);
    font-size: 1.2rem;
    font-weight: 400;
    text-decoration:underline;
    text-underline-offset: 8px;
  }


  .footer-col .links {
    margin-top: 20px;
  }
  .footer-col .links li {
    list-style: none;
    margin-bottom: 10px;
  }
  .footer-col .links li a {
    text-decoration: none;
    color: var(--brand-color-text);
  }
  .footer-col .links li a:hover {
    color: var(--brand-color-link);
  }
  .footer-col p {
    margin: 20px 0;
    color: var(--brand-color-text);
    max-width: 300px;
  }
  .footer-col form {
    display: flex;
    gap: 5px;
  }
  .footer-col input {
    height: 40px;
    border-radius: 6px;
    background: none;
    width: 100%;
    outline: none;
    border: 1px solid var(--brand-color-border);
    caret-color: #fff;
    color: #fff;
    padding-left: 10px;
  }
  .footer-col input::placeholder {
    color: #ccc;
  }
   .footer-col form button {
    background: #fff;
    outline: none;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s ease;
    border: 1px dashed #5ba8ff;
  }
  .footer-col form button:hover {
    background: #5ba8ff;
  }
  .footer-col .icons {
    display: flex;
    margin-top: 30px;
    gap: 30px;
    cursor: pointer;
  }
  .footer-col .icons i {
    color: #afb6c7;
  }
  .footer-col .icons i:hover  {
    color: #fff;
  }

  .samfony-footer {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between text and logo */

}

  @media (max-width: 768px) {
    .footer {
      position: relative;
      bottom: 0;
      left: 0;
      transform: none;
      width: 100%;
      border-radius: 0;
    }
    .footer .footer-row {
      padding: 20px;
      gap: 1rem;
    }
    .footer-col form {
      display: block;
    }
    .footer-col form :where(input, button) {
      width: 100%;
    }
    .footer-col form button {
      margin: 10px 0 0 0;
    }
  }

/* ========================================
   RESPONSIVE STYLES
   (Example breakpoints: 768px and 480px)
======================================== */

/* =============== 
   TABLET 
   max-width: 768px
=============== */
@media (max-width: 768px) {
    /* Top header */
    .top-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .header-left {
        margin-bottom: 10px;
    }
    
    /* Navbar */
    .samfony-navbar {
        flex-direction: column;
        align-items: flex-start; /* or center, if you prefer */
    }
    
    .navbar-left, 
    .navbar-right {
        width: 100%;
        justify-content: center; /* or flex-start/flex-end as you prefer */
        margin: 5px 0;
    }
    
    .navbar-left, 
    .navbar-right {
        gap: 5px; /* Slightly smaller gap on tablets */
    }

    /* Footer */
    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px; /* Some spacing between sections */
    }
    .footer-center ul {
        flex-wrap: wrap; /* Allows links to wrap on smaller screens */
        justify-content: center;
    }
}

/* =============== 
   MOBILE
   max-width: 480px
=============== */
@media (max-width: 480px) {
    /* Make text smaller */
    .site-title,
    .footer-text {
        font-size: 16px;
    }
    
    .site-logo {
        width: 20px;
        height: 20px;
    }
    
    /* Navbar */
    .navbar-left a,
    .navbar-right a {
        padding: 5px;
        font-size: 14px;
    }
    
    /* Footer links */
    .footer-center ul {
        gap: 8px; /* Tighter spacing on mobile */
    }
    
    .footer-center a {
        font-size: 14px;
    }
    
    .social-media li a {
        font-size: 14px;
    }
}