/* Host Dada skin: hostdada.co.uk header, footer and promo styles over Lagom 2.
   Loaded only when the skin is on (hostdada_site addon). Values copied from the
   main site's Bootstrap 5 theme: bg-dark #212529, bg-light #f8f9fa, accent #c19a6b. */

.hd-header,
.hd-footer,
.hd-hero {
    --hd-accent: #c19a6b;
    --hd-accent-dark: #97613a;
    --hd-dark: #212529;
    --hd-ink: #343a40;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

/* ---- Header: utility bar ---------------------------------------------- */
.hd-header { position: relative; z-index: 1030; overflow-x: clip; }
.hd-action-bar { background: var(--hd-dark); font-size: .8rem; }
.hd-action-inner { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.hd-utility { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.hd-utility a { display: inline-flex; align-items: center; padding: .5rem; color: rgba(255,255,255,.75); text-decoration: none; }
.hd-utility a:hover, .hd-utility a:focus { color: var(--hd-accent); text-decoration: none; }
.hd-utility i { margin-right: .3rem; font-size: .75rem; }

/* Lagom's secondary menu (cart, notifications, account, login) restyled as plain links. */
.hd-account .top-nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hd-account .top-nav > li { position: relative; margin: 0; }
.hd-account .top-nav > li > a,
.hd-account .top-nav > li > a.btn {
    display: inline-flex; align-items: center; gap: .35rem; height: auto; min-height: 0;
    padding: .5rem; border: 0; background: none; box-shadow: none;
    color: rgba(255,255,255,.75) !important; font-size: .8rem; font-weight: 400; line-height: 1.5;
}
.hd-account .top-nav > li > a:hover,
.hd-account .top-nav > li.show > a { color: #fff !important; background: none; }
.hd-account .top-nav > li > a i,
.hd-account .top-nav > li > a .ls,
.hd-account .top-nav > li > a .lm { color: inherit; font-size: 1rem; }
.hd-account .top-nav > li > a svg { width: 18px; height: 18px; }
.hd-account .top-nav > li > a svg path,
.hd-account .top-nav > li > a svg [stroke] { stroke: currentColor; }
.hd-account .top-nav .item-text { color: inherit; }
.hd-account .top-nav .active-client span:not(.item-text) { display: none; }
.hd-account .top-nav .badge { font-size: .65rem; }
.hd-account .top-nav .dropdown-menu { right: 0; left: auto; top: 100%; font-family: inherit; }

/* ---- Header: main navbar ---------------------------------------------- */
.hd-navbar { background: #f8f9fa; padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
.hd-navbar-inner { display: flex; align-items: center; justify-content: space-between; }
.hd-brand { display: inline-flex; flex-shrink: 0; }
.hd-logo { height: 45px; width: auto; }
.hd-toggle { display: none; }

@media (min-width: 992px) {
    .hd-header .hd-menu.app-nav-menu {
        position: static; display: block; height: auto; width: auto; min-height: 0;
        margin: 0 !important; padding: 0 !important; border: 0 !important;
        background: transparent !important; box-shadow: none !important; transform: none;
    }
    /* Lagom keeps closed dropdowns laid out; open the last ones leftwards so they stay on screen. */
    .hd-header .hd-menu .menu > li:nth-last-child(-n+2) > .dropdown-menu { left: auto !important; right: 0 !important; }
    .hd-header .hd-menu .menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 0; padding: 0; }
    .hd-header .hd-menu .menu > li { margin: 0; padding: 0; height: auto; }
    .hd-header .hd-menu .menu > li:before { display: none; }
    .hd-header .hd-menu .menu > li > a:not(.btn) {
        display: inline-flex; align-items: center; height: auto; padding: .5rem;
        color: var(--hd-ink); font-size: 1rem; font-weight: 500; line-height: 1.5; background: none;
    }
    .hd-header .hd-menu .menu > li > a:not(.btn):before,
    .hd-header .hd-menu .menu > li > a:not(.btn):after { display: none; }
    .hd-header .hd-menu .menu > li > a:not(.btn) .item-text { color: inherit; font-weight: inherit; }
    .hd-header .hd-menu .menu > li > a .ls-caret { margin-left: 4px !important; }
    .hd-header .hd-menu .menu > li:hover > a:not(.btn),
    .hd-header .hd-menu .menu > li.show > a:not(.btn),
    .hd-header .hd-menu .menu > li.active > a:not(.btn) { color: var(--hd-accent); }
    .hd-header .hd-menu .menu > li > .dropdown-menu { margin-top: .5rem; border: 0; border-top: 2px solid var(--hd-accent); border-radius: 0 0 .3rem .3rem; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
    .hd-header .hd-menu .dropdown-menu a:hover { color: var(--hd-accent); }
}

@media (max-width: 991.98px) {
    /* Lagom pads the body for its fixed mobile header, which the skin replaces. */
    body.lagom:has(> .hd-header) { padding-top: 0 !important; }
    .hd-action-inner { flex-direction: column; padding: .25rem 0; }
    .hd-utility { justify-content: center; }
    .hd-utility a { padding: .35rem .3rem; white-space: nowrap; }
    .hd-navbar { padding: .4rem 0; }
    .hd-logo { height: 38px; }
    .hd-toggle {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 44px; height: 40px; padding: 8px 10px; border: 1px solid rgba(0,0,0,.1); border-radius: .3rem; background: none;
    }
    .hd-toggle .icon-bar { display: block; width: 22px; height: 2px; margin: 0; background: var(--hd-ink); border-radius: 1px; }
    .hd-toggle .icon-bar:nth-child(4) { display: none; }
}

/* Bootstrap-style caret like the main site, in place of Lagom's icon-font caret. */
.hd-header .ls-caret,
.hd-footer .ls-caret {
    display: inline-block !important; width: 0 !important; height: 0 !important; margin: 0 0 0 4px; padding: 0;
    font-size: 0 !important; line-height: 0; vertical-align: middle; position: static; transform: none;
    border-top: 5px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent;
}
.hd-header .ls-caret:before,
.hd-footer .ls-caret:before { content: none !important; }

/* Lagom's secondary palette (orange in the "orange" scheme) drives its banners, login
   background, promo slider and domain panel. Recolour it to the main site's dark hero. */
:root {
    --brand-secondary: #2c3034;
    --brand-secondary-darker: #1b1e21;
    --brand-secondary-gradient-start: #1b1e21;
    --brand-secondary-gradient-end: #3a3f44;
    --dark-mode-brand-secondary: #2c3034;
    --dark-mode-brand-secondary-darker: #1b1e21;
    --dark-mode-brand-secondary-gradient-start: #1b1e21;
    --dark-mode-brand-secondary-gradient-end: #3a3f44;
}
/* The homepage banner's orange illustrations don't suit the dark background. */
.main-banner.banner-home .banner-background { display: none; }

/* ---- Hero / slider promos --------------------------------------------- */
.hd-hero { position: relative; background: linear-gradient(120deg, #1b1e21 0%, #2c3034 60%, #3a3f44 100%); color: #fff; }
/* Slides share one grid cell so the hero keeps the height of the tallest slide and never jumps. */
.hd-hero-track { display: grid; }
.hd-slide { grid-area: 1 / 1; padding: 3.5rem 0; visibility: hidden; opacity: 0; transition: opacity .5s ease, visibility 0s linear .5s; }
.hd-slide.is-active { visibility: visible; opacity: 1; transition: opacity .5s ease; }
.hd-slide-light { background: #f8f9fa; color: #212529; }
.hd-slide-bronze { background: linear-gradient(120deg, #97613a 0%, #c19a6b 100%); }
.hd-slide-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; height: 100%; }
.hd-slide-content { flex: 1 1 auto; max-width: 600px; }
.hd-slide-media { flex: 0 0 auto; }
.hd-slide-media img { display: block; width: 420px; max-width: 100%; height: auto; border-radius: .75rem; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.hd-hero-eyebrow {
    display: inline-block; margin-bottom: 1rem; padding: .25rem .8rem; border: 1px solid rgba(193,154,107,.6); border-radius: 1rem;
    color: #c19a6b; font-size: .8rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.hd-slide h2 { margin: 0 0 1rem; color: inherit; font-size: 2.5rem; font-weight: 700; line-height: 1.15; }
.hd-slide-text { margin-bottom: 1.75rem; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.hd-slide-light .hd-slide-text { color: #495057; }
.hd-slide-text p { margin: 0; }
.hd-slide-text ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: #fff; }
.hd-slide-text li:before { content: "\2713"; margin-right: .45rem; color: #c19a6b; font-weight: 700; }
.hd-btn {
    display: inline-block; padding: .7rem 2rem; border-radius: .375rem;
    background: var(--hd-accent); color: #fff !important; font-weight: 700; text-decoration: none !important;
    transition: background-color .2s ease-in-out;
}
.hd-btn:hover, .hd-btn:focus { background: var(--hd-accent-dark); }
.hd-slide-bronze .hd-btn { background: #fff; color: var(--hd-dark) !important; }
.hd-slide-bronze .hd-btn:hover { background: var(--hd-dark); color: #fff !important; }

/* Domain search inside a slide: hands over to WHMCS's own domain search (with its captcha). */
.hd-domain-form { display: flex; max-width: 540px; margin-top: 1.25rem; padding: .35rem; background: #fff; border-radius: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hd-hero .hd-domain-form input { height: auto !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.hd-domain-form input { flex: 1 1 auto; min-width: 0; padding: .6rem 1.1rem; border: 0; outline: 0; background: transparent; color: #212529; font-size: 1.05rem; }
.hd-domain-form button { flex: 0 0 auto; padding: .6rem 1.6rem; border: 0; border-radius: 3rem; background: #c19a6b; color: #fff; font-weight: 700; cursor: pointer; }
.hd-domain-form button:hover { background: #97613a; }
.hd-slide-text .hd-domain-form + ul { margin-top: 1rem; }

/* Tab bar: one tab per service, plus previous/next. */
.hd-hero-nav { background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.08); }
.hd-hero-nav-inner { display: flex; align-items: center; gap: .5rem; }
.hd-hero-tabs { display: flex; flex: 1 1 auto; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.hd-hero-tabs::-webkit-scrollbar { display: none; }
.hd-hero-tabs button {
    flex: 0 0 auto; padding: 1rem .9rem; border: 0; border-bottom: 3px solid transparent; background: none;
    color: rgba(255,255,255,.6); font-size: .9rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .2s;
}
.hd-hero-tabs button:hover { color: #fff; }
.hd-hero-tabs button.is-active { color: #fff; border-bottom-color: #c19a6b; }
.hd-hero-arrow { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: none; color: rgba(255,255,255,.8); cursor: pointer; }
.hd-hero-arrow:hover { border-color: #c19a6b; color: #c19a6b; }

/* The hero replaces Lagom's own homepage domain banner. */
body:has(.hd-hero) .main-banner.banner-home { display: none; }

@media (max-width: 991.98px) {
    .hd-slide-media img { width: 320px; }
    .hd-slide h2 { font-size: 2rem; }
    .hd-hero-tabs { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
    .hd-slide { padding: 2.25rem 0; }
    .hd-slide-media { display: none; }
    .hd-slide h2 { font-size: 1.6rem; }
    .hd-slide-text { font-size: 1rem; }
    .hd-hero-arrow { display: none; }
}
.hd-alerts { padding-top: 1rem; }

/* ---- Sidebar and home-panel promos ------------------------------------- */
.hd-promo-img { display: block; max-width: 100%; max-height: 140px; width: auto; height: auto; margin: 0 auto .75rem; border-radius: .3rem; object-fit: contain; }
.hd-promo-text { font-size: .9rem; }
.hd-promo-text p:last-child { margin-bottom: 0; }

/* ---- Footer ------------------------------------------------------------- */
.hd-footer { color: #adb5bd; background: #2c3034; font-size: .9rem; }
.hd-footer-cols { padding: 3rem 0 1.5rem; }
.hd-footer-cols > div { margin-bottom: 1.5rem; }
@media (min-width: 768px) { .hd-footer-cols > div.text-md-left { text-align: left !important; } }
.hd-footer h5 { margin-bottom: 1.25rem; color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: .5px; }
.hd-partner-logos { margin-bottom: 1.5rem; }
.hd-partner-logo { display: block; max-width: 150px; margin: 0 auto 1rem; padding: 8px; background: #fff; border-radius: 5px; }
.hd-bark { display: flex; justify-content: center; margin-top: 1rem; }
.hd-bark a { color: #adb5bd; }
/* Bark renders its badge 192px wide; scale it to 150px like the partner logos (as on hostdada.co.uk). */
.hd-bark .bark-widget[style] { zoom: .78125; }
.hd-motto { color: #6c757d; text-align: center; }
.hd-footer-links li { margin-bottom: .6rem; }
.hd-footer-links a { color: #adb5bd; text-decoration: none; transition: all .2s ease-in-out; }
.hd-footer-links a:hover { color: var(--hd-accent); padding-left: 5px; text-decoration: none; }
.hd-follow-title { margin-top: 1.75rem; margin-bottom: .9rem !important; }
.hd-social { display: flex; justify-content: center; gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .hd-social { justify-content: flex-start; } }
.hd-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    color: #fff; background: #3a3f44; border-radius: 50%; font-size: 1.05rem; text-decoration: none;
    transition: background-color .2s ease-in-out;
}
.hd-social a:hover, .hd-social a:focus-visible { color: #fff; background: var(--hd-accent); }
.hd-sub-footer { padding: 1.5rem 0; border-top: 1px solid #495057; color: #6c757d; font-size: .8rem; text-align: center; }
.hd-sub-footer p { margin: 0; padding: .2rem 0; }
.hd-legal-links, .hd-footer-tools { display: flex; flex-wrap: wrap; justify-content: center; margin: .4rem 0 0; padding: 0; list-style: none; }
.hd-legal-links li + li:before { content: "·"; margin: 0 .6rem; }
.hd-legal-links a, .hd-footer-tools a { color: #adb5bd; text-decoration: none; }
.hd-legal-links a:hover, .hd-footer-tools a:hover { color: var(--hd-accent); text-decoration: none; }
.hd-footer-tools { margin-top: .75rem; gap: 1rem; align-items: center; }
.hd-footer-tools > li { display: flex; align-items: center; }
.hd-footer-tools a { display: inline-flex; align-items: center; gap: .35rem; }
.hd-footer-tools img { width: 16px; height: auto; }

/* ---- Dashboard promo slider slides (inside Lagom's promo slider) ------ */
.hd-promo-slide-text { max-width: 520px; margin: .6rem 0 0; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.5; }
.hd-promo-slide-text p { margin: 0; }
.hd-promo-slide-text ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .875rem; color: #fff; }
.hd-promo-slide-text li:before { content: "\2713"; margin-right: .4rem; color: #c19a6b; font-weight: 700; }
.hd-promo-slide .promo-slider-icons { display: flex; align-items: center; justify-content: center; }
.hd-promo-slide-img { display: block; max-width: 260px; max-height: 210px; width: auto; height: auto; border-radius: .4rem; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (max-width: 767.98px) { .hd-promo-slide-img { display: none; } }
/* Lagom stacks every slide in place and only animates its own illustrations, so hide our images off the active slide. */
.hd-promo-slide .hd-promo-slide-img { opacity: 0; transition: opacity .4s ease .5s; }
.hd-promo-slide.active .hd-promo-slide-img { opacity: 1; }

/* Sidebar (xs) promo slider: visual on top, then title, ticks and link; the description is dropped to fit. */
.promo-slider-xs .hd-promo-slide .promo-slider-icons { order: -1; height: auto; margin: 2.75rem 0 0; padding: 0 1.25rem; }
.promo-slider-xs .hd-promo-slide-img { display: block; max-width: 100%; max-height: 190px; }
.promo-slider-xs .hd-promo-slide .promo-slider-title { font-size: 1.05rem; line-height: 1.35; }
.promo-slider-xs .hd-promo-slide-text p { display: none; }
.promo-slider-xs .hd-promo-slide-text ul { display: block; margin-top: .6rem; text-align: left; }
.promo-slider-xs .hd-promo-slide-text li { margin-bottom: .25rem; padding-left: 1.1rem; text-indent: -1.1rem; }
/* Product name above each slide's headline in the sidebar slider, where the nav is dots rather than names. */
.hd-promo-eyebrow { display: none; }
.promo-slider-xs .hd-promo-eyebrow {
    display: inline-block; margin-bottom: .6rem; padding: .2rem .7rem; border: 1px solid rgba(193,154,107,.6); border-radius: 1rem;
    color: #c19a6b; font-size: .75rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}

/* ---- Store mega menu (replaces Lagom's Store / Products dropdown) ------ */
.hd-mega ul { margin: 0; padding: 0; list-style: none; }
.hd-mega li a { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .6rem; border-radius: .4rem; color: #212529; text-decoration: none; white-space: normal; }
.hd-mega li a:hover { background: #faf6f0; text-decoration: none; }
.hd-mega-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; border-radius: 8px; background: #f5ede3; color: #97613a; font-size: .95rem; }
.hd-mega-text strong { display: block; color: #212529; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.hd-mega li a:hover strong { color: #97613a; }
.hd-mega-text small { display: block; margin-top: 2px; color: #6c757d; font-size: .78rem; line-height: 1.35; }
.hd-mega-ext { margin-left: 3px; color: #adb5bd; font-size: .6rem; vertical-align: middle; }
.hd-mega-title { margin-bottom: .6rem; padding: 0 .6rem .5rem; border-bottom: 1px solid #eee; color: #97613a; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hd-mega-card {
    display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; border: 1px solid #eadfd2; border-top: 3px solid #c19a6b;
    border-radius: .6rem; background: #fff; box-shadow: 0 8px 24px rgba(110,80,50,.1); color: #212529;
}
.hd-mega-hat { width: 56px; height: auto; margin-bottom: 1rem; }
.hd-mega-card-title { margin-bottom: .5rem; color: #212529; font-size: 1.1rem; font-weight: 700; }
.hd-mega-card p { margin-bottom: 1.25rem; color: #5d5149; font-size: .85rem; line-height: 1.5; }
.hd-mega-card .hd-btn { margin-top: auto; padding: .5rem 1.2rem; font-size: .9rem; }

@media (min-width: 992px) {
    .hd-navbar-inner { position: relative; }
    .hd-header .hd-menu .menu > li.hd-mega-item { position: static; }
    .hd-header .hd-menu .menu > li > .hd-mega.dropdown-menu {
        display: flex !important; gap: 2rem; left: 15px !important; right: 15px !important; top: 100% !important; width: auto; min-width: 0; max-height: none;
        margin-top: 1rem !important; padding: 1.75rem; border: 0; border-top: 2px solid #c19a6b; border-radius: 0 0 .5rem .5rem; background: #fff;
        box-shadow: 0 12px 30px rgba(0,0,0,.12); transform: none !important;
        visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease, visibility 0s linear .15s;
    }
    .hd-header .hd-menu .menu > li.hd-mega-item.show > .hd-mega.dropdown-menu { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .15s ease; }
    .hd-mega-cols { display: grid; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
    .hd-mega-card { flex: 0 0 230px; }
}
@media (max-width: 991.98px) {
    .hd-mega.dropdown-menu { position: static !important; float: none; display: none; margin: 0; padding: .25rem 0 .75rem; border: 0; box-shadow: none; background: transparent; transform: none !important; visibility: visible; opacity: 1; }
    .hd-mega-item.show > .hd-mega.dropdown-menu { display: block; }
    .hd-mega-col { margin-bottom: .75rem; }
    .hd-mega-card { margin: .5rem .6rem 0; }
}

/* Page titles (Lagom's .main-header-title) in the main site's heading style. */
.main-header-title {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    font-weight: 700; color: #212529; letter-spacing: normal;
}