/* ==========================================================================
   Internet76 brand overrides
   Restyles header / nav / footer to match internet76.com
   Loaded after main.css — keep selectors scoped to header/nav/footer only.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,800;9..144,900&family=Inter+Tight:wght@400;500;600;700&display=swap");

:root {
    --i76-ink: #0a0a0a;
    --i76-paper: #f5f1ea;
    --i76-cream: #faf7f1;
    --i76-rust: #c54a1f;
    --i76-rust-deep: #9c3a18;
    --i76-line: #1a1a1a;
    --i76-muted: #6b6258;
    --i76-soft: rgba(0, 0, 0, 0.08);
    --i76-display: 'Fraunces', Georgia, serif;
    --i76-body: 'Inter Tight', system-ui, sans-serif;
}

/* ---- Header bar ---- */
.header {
    background: var(--i76-paper) !important;
    border-bottom: 1px solid var(--i76-soft);
    box-shadow: none !important;
    backdrop-filter: blur(8px);
}

/* ---- Header height to match the main site's bar ---- */
.header .main-meta,
div.main-meta {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* ---- Logo / wordmark ---- */
.main-meta .logo {
    max-width: none;
    overflow: visible;
}

.main-meta .logo h1 {
    font-size: 22px !important;
    white-space: nowrap;
}

.main-meta .logo h1 a {
    font-family: var(--i76-display) !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--i76-ink) !important;
}

.main-meta .logo h1 a span {
    color: var(--i76-rust) !important;
    font-size: inherit !important;
}

.main-meta .logo img {
    filter: none;
}

/* ---- Top nav links ---- */
.navbar-light .navbar-nav .nav-link,
.main-menu > ul > li > a {
    font-family: var(--i76-body) !important;
    color: var(--i76-ink) !important;
    font-weight: 500 !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.main-menu > ul > li > a:hover,
.main-menu > ul > li > a.active {
    color: var(--i76-rust) !important;
}

.main-menu > ul > li.show > a {
    background: var(--i76-ink) !important;
    color: var(--i76-paper) !important;
    border-radius: 4px;
}

/* Account pill was reserving a fixed 33% of the row (col-sm-4) regardless of its actual content size */
.header-right {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* Center the nav, matching the main site's layout, and keep it from colliding with the account pill */
.main-meta .container {
    flex-wrap: wrap !important;
    row-gap: 10px;
}

.main-meta nav.navbar {
    flex: 1 1 auto;
    max-width: none;
    width: auto;
}

.main-menu {
    min-width: 0;
    flex: 1 1 auto;
}

.main-menu > ul {
    flex-wrap: wrap !important;
    row-gap: 6px;
    margin: 0 auto !important;
    justify-content: center;
}

.main-menu > ul > li > a {
    padding: 0 11px !important;
    font-size: 14px !important;
}

.main-menu > ul {
    border-left-color: var(--i76-soft) !important;
}

.main-menu > ul > li.dropdown:after {
    content: none !important;
}

.main-menu > ul > li > a.dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 0.3em !important;
    vertical-align: 0.2em !important;
    border-top: 0.3em solid !important;
    border-right: 0.3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.3em solid transparent !important;
    content: "" !important;
    color: var(--i76-muted) !important;
}

/* ---- Dropdown panels (nav + user menu) ---- */
.main-menu .dropdown-menu,
.header-user-menu .current-user > ul {
    background: var(--i76-ink) !important;
    border-radius: 8px !important;
    border: none !important;
}

.main-menu .dropdown-menu > li,
.header-user-menu .current-user > ul li {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.main-menu .dropdown-menu > li > a,
.header-user-menu .current-user > ul li a {
    font-family: var(--i76-body) !important;
    color: rgba(245, 241, 234, 0.8) !important;
}

.main-menu .dropdown-menu > li > a:hover,
.header-user-menu .current-user > ul li a:hover {
    background: var(--i76-rust) !important;
    color: #fff !important;
}

/* ---- Account / login control, styled like the site's pill CTA ---- */
#login-menu a,
.header-user-menu .user-toggle {
    font-family: var(--i76-body) !important;
    font-weight: 600 !important;
    background: #3a332c !important;
    color: var(--i76-paper) !important;
    border-radius: 100px !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s;
}

#login-menu a:hover,
.header-user-menu .user-toggle:hover {
    background: var(--i76-rust) !important;
    color: #fff !important;
}

.header-user-menu .user-toggle .user-tag span {
    color: rgba(245, 241, 234, 0.7) !important;
}

.header-user-menu .user-toggle .user-tag h5 {
    color: var(--i76-paper) !important;
}

.header-user-menu .user-toggle:after {
    color: var(--i76-paper) !important;
}

/* ---- Footer ---- */
.footer {
    background: var(--i76-ink) !important;
    color: rgb(128, 120, 104) !important;
    font-family: var(--i76-body) !important;
    border-top: 1px solid var(--i76-line);
}

.footer a {
    color: rgb(168, 160, 152) !important;
}

.footer a:hover {
    color: var(--i76-rust) !important;
}

.footer strong {
    color: var(--i76-paper) !important;
}

.i76-foot-row {
    padding: 14px 0;
    font-size: 13px;
    gap: 12px;
}

/* ==========================================================================
   Site-wide body styling to match internet76.com
   ========================================================================== */

body {
    background: var(--i76-paper) !important;
    font-family: var(--i76-body) !important;
    color: var(--i76-ink) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--i76-display) !important;
    color: var(--i76-ink) !important;
}

a {
    color: var(--i76-rust);
}

a:hover {
    color: var(--i76-rust-deep);
}

.app-btns.primary,
.app-btns.secondary {
    background: var(--i76-ink) !important;
}

.app-btns.primary:hover,
.app-btns.secondary:hover {
    background: var(--i76-rust) !important;
}

/* ---- Page content wrapper (dashboard, invoices, tickets, KB, etc.) ---- */
.dashboard-wraper,
.knowledge-base-search,
.knowledge-base-search .knowledge-search-input {
    background: var(--i76-paper) !important;
}

/* ---- Order/cart wizard light-panel backgrounds ---- */
.product-groups-block {
    background: var(--i76-paper) !important;
}

.product-group-box {
    background: var(--i76-cream) !important;
    transition: background 0.2s;
}

.product-group-box:hover {
    background: #3a332c !important;
}

.hosting-plan-row {
    background: var(--i76-cream) !important;
}

.cm-box-holder {
    background: var(--i76-cream) !important;
}

.white-card {
    background: var(--i76-cream) !important;
}

.sidenav li.active > a,
.sidenav li a:hover,
.actions-header {
    background: #3a332c !important;
    color: var(--i76-paper) !important;
}

.sidenav li.active > a i,
.sidenav li a:hover i,
.actions-header h4 {
    color: var(--i76-paper) !important;
}

.product-group-box:hover p,
.product-group-box:hover li,
.product-group-box:hover strong {
    color: rgba(245, 241, 234, 0.85) !important;
}

/* ---- Section header bars (login panel, invoice/ticket/package list headers) ---- */
.cm-holder .head {
    background: var(--i76-cream) !important;
    border-color: var(--i76-soft) !important;
}

.cs-padding {
    background: var(--i76-cream) !important;
}

/* ---- Logged-in dashboard sidebar ---- */
.dashboard-left-bar {
    background: #3a332c !important;
}

.dashboard-left-bar .heading h4 {
    color: var(--i76-paper) !important;
}

.dashboard-left-bar p,
.dashboard-left-bar ul li a {
    color: rgba(245, 241, 234, 0.7) !important;
}

.dashboard-left-bar ul li a:hover {
    color: var(--i76-rust) !important;
}

.dashboard-left-bar .dashboard-info-box {
    border-bottom-color: rgba(245, 241, 234, 0.1) !important;
}

/* ---- Announcements / FAQ / Popular Articles panel ---- */
.resp-tabs-container,
.client-area-tabs-block {
    background: var(--i76-cream) !important;
}

/* ---- Announcement / KB article detail page ---- */
.system-requirements-block,
.knowledge-base-content-block {
    background: var(--i76-cream) !important;
}

/* ---- Data tables (tickets, packages, domains, invoices, alt accounts, etc.) ---- */
.table thead th,
table thead th {
    background: var(--i76-cream) !important;
    color: var(--i76-ink) !important;
}

.table tbody td,
table tbody td {
    background: var(--i76-paper) !important;
}

.view-all-table {
    background: var(--i76-ink) !important;
    color: var(--i76-paper) !important;
}

.view-all-table:hover {
    background: var(--i76-rust) !important;
    color: #fff !important;
}

/* ---- Action boxes (Manage Account / Submit a Ticket / Order New Service) ---- */
.client-area-page .client-area-top-block .client-area-top-box {
    background: var(--i76-cream) !important;
    border-color: var(--i76-soft) !important;
}

.client-area-page .client-area-top-block .client-area-top-box:hover {
    background: #3a332c !important;
    border-color: #3a332c !important;
}

.client-area-page .client-area-top-block .client-area-top-box p span {
    color: var(--i76-ink) !important;
}

.client-area-page .client-area-top-block .client-area-top-box:hover p span {
    color: var(--i76-paper) !important;
}

.client-area-page .client-area-top-block .client-area-top-box:hover p {
    color: rgba(245, 241, 234, 0.6) !important;
}

.client-area-page .client-area-top-block .client-area-top-box img {
    filter: grayscale(1) brightness(0.25);
    transition: filter 0.2s;
}

.client-area-page .client-area-top-block .client-area-top-box:hover img {
    filter: grayscale(1) brightness(0) invert(1);
}

/* ---- Announcements / FAQ / Popular Articles tabs ---- */
.client-area-page .client-area-bottom-block ul.resp-tabs-list .resp-tab-item {
    background: var(--i76-cream) !important;
    color: var(--i76-ink) !important;
}

.client-area-page .client-area-bottom-block ul.resp-tabs-list .resp-tab-item.resp-tab-active,
.client-area-page .client-area-bottom-block .resp-tabs-container h2.resp-accordion.resp-tab-active {
    background: var(--i76-ink) !important;
    color: var(--i76-paper) !important;
}

.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-announcement ul li a {
    color: var(--i76-rust) !important;
}

.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-announcement ul li::before {
    color: var(--i76-muted) !important;
}

.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-announcement ul li p {
    color: var(--i76-ink) !important;
}

/* ---- Knowledge Base ---- */
.knowledge-base-search2 {
    background: #3a332c !important;
}

.knowledge-base-search-box2 h1 {
    color: var(--i76-paper) !important;
}

.knowledge-base-search2 a,
.knowledge-base-search2 a:visited {
    color: var(--i76-rust) !important;
}

.knowledge-base-search-box2 p {
    color: rgba(245, 241, 234, 0.7) !important;
}

.knowledge-base-boxes-block {
    background: var(--i76-paper) !important;
}

.knowledge-base-box {
    background: var(--i76-cream) !important;
}

.knowledge-search-input {
    background: #fff !important;
    border-color: var(--i76-soft) !important;
}

.show-all-btn {
    background: #3a332c !important;
    color: var(--i76-paper) !important;
}

.show-all-btn:hover {
    background: var(--i76-rust) !important;
    color: #fff !important;
}

.ticket-view-page .cm-tab-accordion,
.ticket-view-page .cm-tab-accordion .resp-tabs-list,
.ticket-view-page .cm-tab-accordion .resp-tabs-list li,
.ticket-view-page .cm-tab-accordion .resp-tabs-list li.resp-tab-active {
    background: var(--i76-cream) !important;
}

.ticket-tab-reply-block {
    background: var(--i76-cream) !important;
    padding: 20px !important;
    border-radius: 8px !important;
}

.ticket-tab-reply-box .ticket-reply {
    background: var(--i76-paper) !important;
}