/* The site header: parts rebuilt one at a time on the design system.
   Author: Pravash Karki - pravashkarki.com
   Colours and spaces name a token, with the value beside it for a page that has not loaded the token file yet. */

/* The header's one button: the main button of a light ground, the near-black blue with white words,
   in capitals and small letters with the site's squircle corner. On hover it lightens one step. */
.header__top .header__btn-plan {
  border: 2px solid var(--color-dark, #0b1f2e) !important;
  border-radius: 24px !important;
  corner-shape: squircle;
  background: var(--color-dark, #0b1f2e) !important;
  color: var(--color-on-dark, #fff) !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none !important;
}
.header__top .header__btn-plan:hover,
.header__top .header__btn-plan:focus {
  border-color: var(--night-800, #1f3342) !important;
  background: var(--night-800, #1f3342) !important;
  color: var(--color-on-dark, #fff) !important;
}

/* On a wide screen the button moves into the dark menu bar and takes the leaf green with dark words:
   the one green shape in the header. The white strip above keeps the logo and the two ways to reach us.
   Under 1,200 pixels the bar has no room for it, so the button stays in the strip. */
.header__bottom .header__btn-menu { display: none; }
/* From 1,200 pixels. Between 992 and 1,199 the eight items fill the bar, so the button stays in the strip. */
@media (min-width: 1200px) {
  .header__top .top-btn { display: none; }
  .header__bottom .header__right { display: flex; align-items: center; gap: var(--space-4, 16px); }
  /* The system's small button, leaf: 44 pixels tall, the body's small size in bold. */
  .header__bottom .header__btn-menu {
    display: inline-flex;
    align-items: center;
    align-self: center;
    min-height: var(--touch-min, 44px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    line-height: var(--leading-tight, 1.1);
    border-radius: var(--radius-2xl, 24px);
    corner-shape: squircle;
    background: var(--color-primary, #5dbb46);
    color: var(--color-on-primary, #0b1f2e) !important;
    font-size: var(--text-body-md, 0.875rem);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .header__bottom .header__btn-menu:hover { background: var(--leaf-400, #7acc66); }
  .header__bottom .header__btn-menu:focus-visible { outline: 2px solid var(--color-base, #fff) !important; outline-offset: 2px; }
}

/* The main menu on a wide screen. Every item has the same space either side and never breaks onto a second line.
   The first item starts on the page's left edge, in line with the logo. The arrow sits a clear step from its word.
   The space is a step tighter under 1,200 pixels, where all eight items must share the bar with the search icon. */
@media (min-width: 992px) {
  #main-menu.navbar .nav-item > .nav-link { white-space: nowrap; }
  #main-menu.navbar .navbar-nav { column-gap: 0; flex-wrap: nowrap; }
  #main-menu.navbar .nav-item > .nav-link { padding: 0 var(--space-2, 8px); }
  #main-menu.navbar .nav-item:first-child > .nav-link { padding-left: 0; }
  #main-menu.navbar .nav-item > .nav-link.dropdown-toggle::after { margin-left: var(--space-2, 8px); }
}
@media (min-width: 1200px) {
  #main-menu.navbar .nav-item > .nav-link { padding: 0 var(--space-3, 12px); }
  #main-menu.navbar .nav-item:first-child > .nav-link { padding-left: 0; }
}
@media (min-width: 1400px) {
  #main-menu.navbar .navbar-nav { column-gap: var(--space-2, 8px); }
}

/* Search in the white strip, last after the two ways to reach us, on a wide screen.
   A field and a button with one outline, so the two read as one control. The bar's search icon gives way to it. */
.header__top .header__search { display: none; }
@media (min-width: 1200px) {
  .header__top .header__top__content { gap: var(--space-5, 24px); }
  .header__top .header__search {
    display: flex;
    flex: 0 1 260px;
    width: 260px;
    height: var(--touch-min, 44px);
    margin: 0 0 0 var(--space-5, 24px);
    padding: var(--space-1, 4px);
    /* The quietest line that still passes: 4.4 to 1 on white, where a control's edge needs 3 to 1. */
    border: 1px solid var(--night-500, #657a8b);
    border-radius: 16px;
    corner-shape: squircle;
    background: var(--color-base, #fff);
    overflow: hidden;
  }
  .header__top .header__search:focus-within { outline: 2px solid var(--color-focus, #295e1d); outline-offset: 2px; }
  .header__top .header__search input {
    flex: 1;
    min-width: 0;
    padding: 0 var(--space-2, 8px) 0 var(--space-3, 12px);
    border: 0;
    outline: 0 !important;
    background: none;
    color: var(--color-contrast, #0b1f2e);
    font-size: var(--text-body-md, 0.875rem);
  }
  .header__top .header__search input::placeholder { color: var(--color-muted, #51606b); opacity: 1; }
  .header__top .header__search button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A button of its own inside the field, with the field's ground showing round it. */
    width: 36px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    corner-shape: squircle;
    background: var(--color-dark, #0b1f2e);
    color: var(--color-on-dark, #fff);
    font-size: var(--text-body-md, 0.875rem);
    font-weight: 700;
    cursor: pointer;
  }
  .header__top .header__search button:hover { background: var(--night-800, #1f3342); }
  .header__bottom .header__right .search-toggler { display: none; }
}

/* The route icon before the button's words, from the site's set. One colour, the words' own. */
.header__top .header__btn-plan,
.header__bottom .header__btn-menu { gap: var(--space-2, 8px); }
.header__top .header__btn-plan { display: inline-flex; align-items: center; }
.header__top .header__btn-plan svg,
.header__bottom .header__btn-menu svg { flex: none; }

/* The small line above each way to reach us: the system's muted tone, 6.49 to 1 on white, in place of the theme's grey. */
.header__top .header__top__content__right span:not(.btn span) { color: var(--color-muted, #51606b); }
.header__top .header__top__content__right span a { color: var(--color-contrast, #0b1f2e); }

/* The white strip has room to breathe on a wide screen: a step of space above and below, where the theme gave it 5 pixels. */
@media (min-width: 992px) {
  .header__top { padding: var(--space-3, 12px) 0; }
}

/* Once the page scrolls and the header sticks, the white strip slides away. Search must still be reachable,
   so the bar's search icon comes back there on a wide screen. */
@media (min-width: 1200px) {
  .header.fixed-position .header__bottom .header__right .search-toggler,
  #header.fixed-position .header__bottom .header__right .search-toggler { display: block; }
}
/* On a phone the stuck bar stays white, so the logo's name and the icons stay readable. The theme turned it dark. */
@media (max-width: 991.98px) {
  #header.fixed-position .header__bottom,
  .header.fixed-position .header__bottom { background-color: var(--color-base, #fff) !important; }
}

/* The top bar's email and WhatsApp lines, on the type tokens rather than the theme's 13 and 15 pixels. */
:is(#header__top__content__right, .header__top__content__right) :is(.top-email, .top-contact) span,
:is(#header__top__content__right, .header__top__content__right) :is(.top-email, .top-contact) span a { font-size: var(--text-body-md, 0.875rem); line-height: var(--leading-body, 1.5); }