/*!
 * header-tuning.css - project-wide spacing and header navigation refinements.
 *
 * Loaded last so it wins over style.css without editing the theme file.
 * 1. `.custom-container` is widened so the page side margins shrink.
 * 2. The nav sits closer together in a smaller size.
 * 3. Login / Signup share one row and read as two deliberate buttons.
 */

/* ------------------------------------------------------- 1. container */
@media (min-width: 1400px) {
  .custom-container {
    max-width: 1440px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .custom-container {
    max-width: 1240px;
  }
}

/* ------------------------------------------------------------ 2. header */
.header-bottom-area .header-bottom-area {
  background: transparent;
}

/* frosted-glass header: the theme paints .header-bottom-area solid white;
   a translucent fill + backdrop blur lets the page show through softly */
.header-bottom-area {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--site-base) 14%, transparent);
}

/* the fixed header needs the page content to slide under it cleanly */
.header-section {
  background: transparent;
}

.header-bottom-area .navbar-nav.main-menu {
  flex-wrap: nowrap;
}

/* the theme gives every <li> 32px of right padding; keep it tight */
.header-bottom-area .navbar-collapse .main-menu li {
  padding-right: 22px;
}

.header-bottom-area .navbar-collapse .main-menu li a {
  font-size: 17px !important;
  font-weight: 600;
  letter-spacing: 0.1px;
  padding: 22px 0;
  white-space: nowrap;
}

.header-bottom-area .navbar-collapse .main-menu li a::after {
  bottom: 2px;
  height: 3px;
}

.site-logo {
  max-width: 208px;
}

/* --------------------------------------------------------- 3. actions */
/*
 * `.header-action a { display: flex }` is block level, so Login and
 * "Register as Doctor" used to stack. A flex row with an explicit gap fixes
 * that, and the buttons get their own pill treatment so they read as a pair.
 *
 * The larger left margin is what shifts the whole nav block left while the
 * buttons stay anchored to the right edge.
 */
.header-action {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: 46px;
}

.header-action a.header-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1px;
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.header-action a.header-btn:hover {
  transform: translateY(-2px);
}

/* Login — teal tinted so it is clearly visible against the white header */
.header-action a.header-btn--ghost {
  background: var(--site-base-tint, #eaf9fb);
  border-color: var(--site-base-light, #7fd4de);
  color: var(--site-base-dark, #087e8b) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--site-base) 14%, transparent);
}

.header-action a.header-btn--ghost:hover,
.header-action a.header-btn--ghost:focus {
  background: var(--site-base-tint-2, #d9f3f7) !important;
  border-color: var(--site-base, #09a9b7);
  color: var(--site-base-deep, #066873) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--site-base) 26%, transparent);
}

/* Signup — solid, lighter teal. The old teal→navy gradient read as a
   two-tone bleed on both sides of the pill; a solid fill with a soft,
   tight shadow looks clean. */
.header-action a.header-btn--primary {
  background: var(--site-base, #09a9b7);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--site-base) 22%, transparent);
}

.header-action a.header-btn--primary:hover,
.header-action a.header-btn--primary:focus {
  background: var(--site-base-dark, #087e8b);
  color: #ffffff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--site-base) 30%, transparent);
}

/* ---------------------------------------------------- 4. mobile header */
@media only screen and (max-width: 1199px) {
  .header-action {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    gap: 10px;
  }

  .header-action a.header-btn {
    flex: 1 1 0;
    height: 46px;
  }

  .header-bottom-area .navbar-collapse .main-menu li a {
    font-size: 16px !important;
  }

  .site-logo {
    max-width: 175px;
  }
}

@media only screen and (max-width: 575px) {
  .header-action {
    gap: 8px;
  }

  .header-action a.header-btn {
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ====================================================== 2b. icon badges ==
 * Every icon badge in the project is a fixed square (34-54px) holding an
 * inline 24x24 svg. They had drifted to 0.45-0.50 of the badge, which reads
 * as a cramped, muddy glyph knocked into a corner. Normalise each one to
 * ~0.57 of its badge so the icon sits optically centred and legible.
 * Kept in one place (this file loads last on every page) instead of
 * chasing the value through ten stylesheets.
 */
.fh-help__ico svg                       { width: 22px !important; height: 22px !important; }

.ctc-card__ico svg                      { width: 24px !important; height: 24px !important; }
.ctc-float__ico svg                     { width: 21px !important; height: 21px !important; }
.ctc-office__ico svg                    { width: 21px !important; height: 21px !important; }
.ctc-social__ico svg                    { width: 21px !important; height: 21px !important; }
.ctc-part__ico svg                      { width: 25px !important; height: 25px !important; }

.hpk-trust__ico svg                     { width: 21px !important; height: 21px !important; }

.fd-why__ico svg                        { width: 20px !important; height: 20px !important; }

.dbr-pill__ico svg                      { width: 19px !important; height: 19px !important; }
.dbr-why__ico svg                       { width: 26px !important; height: 26px !important; }
.dbr-svc__ico svg                       { width: 28px !important; height: 28px !important; }
.dbr-seg__ico svg                       { width: 21px !important; height: 21px !important; }
.dbr-contact__ico svg                   { width: 22px !important; height: 22px !important; }

.dd-stat__ico svg                       { width: 19px !important; height: 19px !important; }
.dd-interest__ico svg                   { width: 24px !important; height: 24px !important; }
.dd-help__ico svg                       { width: 31px !important; height: 31px !important; }
.dd-edu__ico svg                        { width: 21px !important; height: 21px !important; }

.hd-contact__ico svg                    { width: 19px !important; height: 19px !important; }

.rg-pill__ico svg                       { width: 20px !important; height: 20px !important; }
.rg-why__ico svg                        { width: 19px !important; height: 19px !important; }

.lg-card__ico svg                       { width: 22px !important; height: 22px !important; }

/* blog + contact extras */
.blg-sub__ico svg                       { width: 26px !important; height: 26px !important; }
.ctc-card__ico svg,
.blg-empty__ico svg                     { width: 25px !important; height: 25px !important; }

/* empty states */
.fd-empty__ico svg,
.fh-empty__ico svg                      { width: 31px !important; height: 31px !important; }

/* branding extras */
.dbr-sbox__ico svg                      { width: 21px !important; height: 21px !important; }
.dbr-why-call__ico svg                  { width: 26px !important; height: 26px !important; }

/* homepage sections */
.hc-spec__ico svg                       { width: 26px !important; height: 26px !important; }
.hc-verify__ico svg                     { width: 27px !important; height: 27px !important; }
.hc-hl__ico svg,
.hc-why__ico svg                        { width: 26px !important; height: 26px !important; }

/* health packages */
.hpk-notice__ico svg                    { width: 19px !important; height: 19px !important; }
.hpk-step__ico svg,
.hpk-who__ico svg                       { width: 22px !important; height: 22px !important; }
.hpk-need__ico svg                      { width: 23px !important; height: 23px !important; }

/* hospital booking */
.hb-type__ico svg                       { width: 23px !important; height: 23px !important; }
.hb-pay__ico svg                        { width: 21px !important; height: 21px !important; }
.hb-help__ico svg                       { width: 31px !important; height: 31px !important; }


/* =================================================== 2c. badge centring ==
 * Generic "parent span { display: block }" text rules (specificity 0,1,1)
 * keep flattening the icon badges to display:block, which shoves the glyph
 * into the badge's top-left corner (contact "Need Immediate Help?", Find
 * Hospital "Expert Guidance", booking payment rows, ...). This file loads
 * last on every page, so this rule wins and every badge stays a centred
 * flex box regardless of what the page stylesheet says.
 */
[class*="__ico"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}