/*!
 * Template Name: Hostina Template
 * Author: hostk.com
 * Version: 1.0
 * Description: Modern Responsive Bootstrap Hosting Template
 * Created: 2025
 */
 
 /*/////////////////////// #main-HEADER STYLE ////////////////////////*/

#main-header {
  min-height: 8rem;
  position: sticky;
  top: 0;
  z-index: 10;
  --header-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--header-bg-opacity));
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.7) !important;
  transition: background-color 280ms ease, box-shadow 280ms ease;
}
#main-header.is-at-top {
  box-shadow: none !important;
}
/* On pages with a hero, float the header over it so the hero shows through when transparent. */
body.has-hero-overlay #main-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
}

#main-header .navbar-brand h4 {
  font-size: 2rem;
  font-family: Nunito;
  letter-spacing: -1.5px;
  font-weight: 300;
  
}

#main-header .nav-item a,
#main-header .nav-link {
  color: var(--color-text-dark);
  font-size: 1.5rem;
  transition: 0.3s linear;
}

#main-header .nav-item a:hover,
#main-header .nav-link:hover,
#main-header .navbar-nav .nav-link.active,
#main-header .navbar-nav .nav-link.show {
  color: #fff !important;
}

#main-header .nav-item.dropdown:hover .dropdown-menu {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(20, 20, 20, 1);
  padding: 1rem;
  border-radius: 10px;
}

#main-header .dropdown-item {
  padding: 0.7rem 1rem;
  color: var(--color-text-dark);
}

#main-header .dropdown-item:hover {
  color: #fff;
  transform: translateX(3px);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

#main-header select {
  background-color: var(--color-primary) !important;
  border-radius: 16px;
  border: 1px solid #dddddda3;
  padding: 1rem;
  color: var(--color-text-dark) !important;
  padding-top: 0.70rem;
  padding-bottom: 0.70rem;
}

/* The mark is 1076x240, so a 4.48:1 ratio: every 10px of height costs
   45px of width. Sizing it by height keeps that explicit. */
#main-header .site-logo {
  height: 49px;
  width: auto;
  /* globals.css caps every header image at max-width:60%, resolved against
     each one's own container. The navbar brand is a narrow flex item and the
     panel header is nearly full width, so the same height produced two
     different sizes. Height decides it now. */
  max-width: none;
  display: block;
}

#main-header .navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
  box-shadow: none;
  color: white !important;
}

#main-header .navbar-toggler .nav-burger-icon {
  font-size: 4rem;
}

#main-header .sign-up-btn {
  color: #fff;
  padding: 0.8rem 3rem;
  border: 1px solid var(--color-text-dark);
  background-color: #fff;
  border-radius: var(--radius-16);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 17px;
}

#main-header .sign-up-btn:hover {
  background-color: transparent;
  color: var(--color-text-dark);
}

/* Off-canvas menu styling */
/* Frosted glass, matching the treatment on the hero search field. The
   colour has to carry a fallback: backdrop-filter is unsupported in a few
   browsers, and there the panel would be see-through with no blur, which
   makes the menu unreadable over the page. Solid first, glass only where
   the blur will actually render. */
.offcanvas {
  background-color: var(--color-primary);
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Bootstrap pins .offcanvas-end to a 400px column. That was invisible
   while the panel was solid black, but a frosted panel that stops short
   of the edge shows the page beside it. Full bleed on mobile, and the
   edge border goes with it since there is no longer an edge to draw. */
@media (max-width: 991.98px) {
  .offcanvas.offcanvas-end {
    width: 100%;
    max-width: 100%;
    border-left: 0;
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .offcanvas {
    background-color: rgba(6, 8, 14, 0.62);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
  }

  /* Bootstrap dims the page to near-black behind the panel, which leaves
     the blur nothing to work with. Lighten it so the site shows through. */
  .offcanvas-backdrop.show {
    opacity: 0.35;
  }
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-header .offcanvas-title {
  color: #fff;
  font-size: 2.5rem;
}

.offcanvas-body .nav-item a {
  font-size: 2rem;
  color: #fff;
}

.offcanvas-body .nav-item a:hover {
  color: var(--color-text-dark);
}

/* Adjust dropdown menu styling within the offcanvas */
.offcanvas .dropdown-menu {
  background-color: rgba(20, 20, 20, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.offcanvas .dropdown-item {
  color: var(--color-text-dark);
}

.offcanvas .dropdown-item:hover {
  color: #fff;
}

/* Customizing the close button */
.offcanvas .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  opacity: 1;
}

/* Responsive Logic */
@media (max-width: 991.98px) {
  .navbar-collapse {
    display: none !important;
  }

  /* Bootstrap navbars wrap by default. At 75px tall the logo is 336px
     wide, which left no room for the toggler and dropped it onto a
     second row under the brand. Both must stay on one line. */
  #main-header .navbar {
    flex-wrap: nowrap;
  }

  /* Grows with the viewport instead of one compromise value. The floor
     clears a 320px screen beside the toggler; the ceiling stops it
     ballooning on a tablet before the desktop rule takes over. */
  #main-header .site-logo {
    height: clamp(31px, 9.75vw, 44px);
  }

  /* 4rem is a 64px glyph, oversized next to the logo at this size. */
  #main-header .navbar-toggler .nav-burger-icon {
    font-size: 2.25rem;
  }

  #main-header .navbar-toggler {
    padding: 0.25rem;
    flex: 0 0 auto;
  }
}

@media (min-width: 992px) {
  .offcanvas {
    visibility: visible !important;
    background-color: transparent !important;
    border: none !important;
    transform: none !important;
    width: auto !important;
    position: static;
    /* The @supports frosted-panel rule above is not scoped to mobile, so
       without these the desktop nav keeps a blur+saturate layer over the
       header. background-color is overridden by the !important above, but
       the filter is not - it showed as a lighter rectangle behind the nav
       links once the header went semi-transparent on scroll. There is no
       panel to frost at this width. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .offcanvas-header,
  .offcanvas .btn-close {
    display: none;
  }
  .offcanvas-body {
    display: flex;
    flex-direction: row;
    padding: 0;
    flex-grow: 1;
  }
  .offcanvas-body .navbar-nav {
    flex-direction: row;
  }
}

/* ==========================================================================
   Language switcher

   Replaces the Account dropdown. English is the only language actually
   translated, so the other two are spans rather than links and carry a
   marker - a menu item that looks clickable and silently returns English
   would be worse than one that admits it is not ready.
   ========================================================================== */
.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

/* The language in use is marked by weight and colour rather than a tick:
   with three items and one of them styled, an icon repeated what the colour
   already said, and it made the current row taller than the other two. */
.lang-item--current {
  color: var(--color-accent, #3882ff);
  font-weight: 600;
}

.lang-item--current:hover,
.lang-item--current:focus {
  color: var(--color-accent, #3882ff);
}

/* Not disabled-looking enough to seem broken, not live enough to invite a
   click. */
.lang-item--soon {
  color: #9aa3b2;
  cursor: default;
}

.lang-item--soon:hover,
.lang-item--soon:focus {
  background: transparent;
  color: #9aa3b2;
}

.lang-item__soon {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa3b2;
  background: rgba(16, 32, 56, 0.06);
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
}

/* ==========================================================================
   The Studio item in the nav.

   Studio lives on its own subdomain now, so this menu item is the one link in
   the header that leaves everon.one. It is marked out rather than left to look
   like the other four, because a visitor who came for hosting has no reason to
   guess that Everon also builds software - and an item that reads the same as
   its neighbours gets scanned past.

   The treatment is the domain search field's focus ring, slowed down and left
   running: a conic gradient spun by an animated angle and masked down to a
   one-pixel border. Same technique, same blue, so it belongs to this site
   rather than announcing itself as a different designer's idea.

   The angle needs its own registered property. The domain field's lives in
   home.css, which only the homepage loads, and this has to work on all twelve.
   ========================================================================== */

@property --studio-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#main-header .nav-link.nav-link--studio {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #e9e9e9;
}

/* The ring. inset 0 with a 1px pad, then the fill is masked away and only the
   padding band survives - which is what makes a gradient behave like a border
   without border-image, and without a second element inside the link. */
#main-header .nav-link--studio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--studio-ring-angle),
    rgba(56, 130, 255, 0.75) 0deg,
    rgba(56, 130, 255, 0) 200deg,
    rgba(160, 210, 255, 0.95) 290deg,
    rgba(56, 130, 255, 0.75) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: studioRingSpin 8s linear infinite;
}

@keyframes studioRingSpin {
  to { --studio-ring-angle: 360deg; }
}

/* Hover brightens the ring and adds the faintest glow. The speed does not
   change: a ring that accelerates under the cursor reads as a glitch. */
#main-header .nav-link.nav-link--studio:hover,
#main-header .nav-item a.nav-link--studio:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 16px rgba(56, 130, 255, 0.28);
}

#main-header .nav-link--studio:hover::before {
  background: conic-gradient(
    from var(--studio-ring-angle),
    rgba(86, 155, 255, 1) 0deg,
    rgba(56, 130, 255, 0.25) 200deg,
    rgba(200, 228, 255, 1) 290deg,
    rgba(86, 155, 255, 1) 360deg
  );
}

#main-header .nav-link--studio:focus-visible {
  outline: 2px solid rgba(160, 210, 255, 0.9);
  outline-offset: 3px;
}

/* In the phone menu the items are stacked and full width; the ring should still
   hug the word rather than stretch across the drawer. */
@media (max-width: 991.98px) {
  #main-header .nav-item.px-3 .nav-link--studio {
    margin: 0.4rem 0;
  }
}

/* Two fallbacks, because the ring is doing something browsers only recently
   agreed on.

   Without @property the angle cannot be animated at all - it would sit at 0deg
   and show a lopsided gradient, which looks like a rendering fault rather than
   a design. Better to drop to a plain border.

   Reduced motion keeps the ring but stops it turning. The item still stands
   out; it just does not move. */
@supports not (background: conic-gradient(from var(--studio-ring-angle), red, blue)) {
  #main-header .nav-link--studio::before {
    background: none;
    border: 1px solid rgba(120, 175, 255, 0.55);
    padding: 0;
    mask: none;
    -webkit-mask: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-header .nav-link--studio::before {
    animation: none;
    --studio-ring-angle: 135deg;
  }
}

/* --------------------------------------------------------------------------
   The Studio item in the phone menu.

   In the drawer it stops being a nav item and becomes a button the size of
   Client Area, sitting underneath it. As a small chip in a column of plain
   text links it read as a stray tag; at the bottom, next to the other action,
   it reads as the second thing you can do from this menu.

   THE AWKWARD PART

   Studio lives inside the <ul>, and Client Area lives in the <div> after it.
   Moving one below the other means ordering across that boundary, and `order`
   only sorts siblings. So on mobile the <ul> is given display:contents, which
   removes its own box and promotes the <li> elements to be flex children of
   the drawer body alongside that <div> - and then they can all be ordered
   together.

   It degrades in the right direction. Everything here is default order 0
   except the two rules below, and the <div> is already last in the markup, so
   a browser without :has() support simply leaves Studio where it is in the
   list rather than flinging it to the top. Same for a browser without
   display:contents: the menu stays exactly as it is today.

   Desktop is untouched - above 992px the drawer is not a drawer, and the rules
   further up this file lay the same markup out as a row.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .offcanvas-body {
    display: flex;
    flex-direction: column;
  }

  /* The list's own box goes away; its items become children of the body. */
  .offcanvas-body > .navbar-nav {
    display: contents;
  }

  /* The language switcher and Client Area, after the nav items. */
  .offcanvas-body > div {
    order: 1;
  }

  /* Studio, after both. */
  .offcanvas-body .nav-item:has(> .nav-link--studio) {
    order: 2;
    margin-top: 1.2rem;
  }

  /* Sized against .sign-up-btn rather than guessed at: the same 0.8rem/3rem
     padding, the same 17px, the same 16px radius. The id in the selector is
     what beats `.offcanvas-body .nav-item a`, which sets every other link in
     the drawer to 2rem. */
  #main-header .nav-link.nav-link--studio {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: calc(0.8rem + 1px) 3rem;
    border-radius: var(--radius-16);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
  }

  #main-header .nav-link.nav-link--studio:hover {
    color: #fff !important;
  }
}