/* ===== Materialize theme brand layer (CpanelHosting Africa) ===== */

/* Vendored Material Icons font (no external CDN) */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* ===== Brand palette: corporate blue (matches CpanelHosting logo) + gold accent ===== */
:root {
  --brand-primary: #2563eb;          /* corporate blue */
  --brand-primary-dark: #1e40af;
  --brand-primary-deeper: #1e3a8a;
  --brand-accent: #c9a227;           /* warm gold accent */
  --brand-accent-light: #f0d78c;
  --brand-ink: #1f2937;
  --brand-muted: #64748b;
  --brand-border: #e2e8f0;
  --brand-bg: #f6f8fa;
  --brand-surface: #ffffff;
  --brand-radius: 14px;
  --brand-shadow: 0 8px 30px rgba(15, 40, 90, 0.10);
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--brand-bg);
  color: var(--brand-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ===== Legible type scale (generous for readability) ===== */
h1, .h1 { font-size: 2.6rem; line-height: 1.2; font-weight: 700; }
h2, .h2 { font-size: 2.15rem; line-height: 1.25; font-weight: 700; }
h3, .h3 { font-size: 1.75rem; line-height: 1.3; font-weight: 700; }
h4, .h4 { font-size: 1.5rem; line-height: 1.35; font-weight: 700; }
h5, .h5 { font-size: 1.3rem; line-height: 1.4; font-weight: 600; }
h6, .h6 { font-size: 1.15rem; line-height: 1.45; font-weight: 600; }
p { line-height: 1.75; }
.card .card-title { font-weight: 700; color: var(--brand-ink); font-size: 1.35rem; line-height: 1.35; }

/* Primary colour through Material's design tokens */
:root {
  --md-sys-color-primary: var(--brand-primary);
  --md-sys-color-primary-container: #dbeafe;
  --md-sys-color-on-primary-container: #172554;
  --md-sys-color-secondary: var(--brand-accent);
  --md-sys-color-surface: var(--brand-surface);
  --md-sys-color-surface-container: #f1f5f9;
  --md-sys-color-on-surface: var(--brand-ink);
  --md-sys-color-outline: var(--brand-border);
}

/* ===== Fullwidth layout ===== */
.container { width: 96%; max-width: 1760px; margin: 0 auto; }
main .container { padding-top: 1.75rem; padding-bottom: 2.25rem; }

/* Buttons */
.btn { border-radius: 12px; text-transform: none; font-weight: 600; box-shadow: var(--brand-shadow); margin: .45rem .3rem; font-size: 1rem; }
.btn-primary { background-color: var(--brand-primary); color: #fff; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-primary-dark); color: #fff; box-shadow: 0 12px 26px rgba(37,99,235,.35); transform: translateY(-1px); }
.btn-gold { background-color: var(--brand-accent); color: #3a2d05; font-weight: 700; }
.btn-gold:hover, .btn-gold:focus { background-color: var(--brand-accent-light); }
.btn-outline { background-color: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary); box-shadow: none; }
.btn-outline:hover, .btn-outline:focus { background-color: rgba(37,99,235,.08); }
.btn-large { padding: 0 2.4rem; height: 3.6rem; line-height: 3.6rem; font-size: 1.15rem; }
.btn-small { padding: 0 1.2rem; height: 2.6rem; line-height: 2.6rem; font-size: .95rem; }

/* Sections */
.section { padding: 2.5rem 0; }

/* Cards */
.card { border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); }
.card .card-content { padding: 1.4rem; }
.card .card-content p { font-size: 1.1rem; line-height: 1.7; }
.card .card-title { font-weight: 700; color: var(--brand-ink); font-size: 1.35rem; line-height: 1.35; }
.card .card-action { border-top: 1px solid var(--brand-border); padding: 1.1rem 1.4rem; }

/* ===== Navbar ===== */
nav { background-color: #ffffff; color: var(--brand-ink); box-shadow: 0 2px 14px rgba(15,40,90,.08); height: 80px; line-height: 80px; }
/* Fix: MaterializeWeb 2.3.3 sets nav li to display:grid which stacks items vertically.
   Force a horizontal flex layout for the nav menu. */
nav .nav-wrapper { display: flex; align-items: center; justify-content: space-between; }
nav .brand-logo { position: static; padding: 0 1rem 0 0; color: var(--brand-ink); font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; height: 100%; line-height: 1; }
nav .brand-logo img { vertical-align: middle; display: block; max-height: 56px; height: auto; width: auto; }
nav ul, nav ul.right { float: none; display: flex; align-items: center; justify-content: flex-end; gap: .15rem; height: 80px; margin: 0; }
nav ul li { display: inline-block; }
nav ul li > a { padding: 0 1rem; display: inline-block; height: 80px; line-height: 80px; color: var(--brand-muted); font-weight: 600; font-size: 1.05rem; }
nav ul li > a:hover, nav ul li > a.active { color: var(--brand-primary); background: rgba(37,99,235,.06); }
nav ul li > a.btn { height: 48px; line-height: 48px; margin: 0 0 0 .6rem; padding: 0 1.4rem; font-size: 1rem; }
nav .sidenav-trigger { position: static; margin: 0 .5rem; }
nav .sidenav-trigger i { color: var(--brand-ink); }
/* Dropdowns inside the nav */
nav .dropdown-content { min-width: 240px; margin-top: 0; }
nav .dropdown-content li > a { height: 52px; line-height: 52px; padding: 0 1.3rem; color: var(--brand-ink); font-size: 1rem; font-weight: 500; }
nav .dropdown-content li > a:hover { color: var(--brand-primary); background: rgba(37,99,235,.06); }
nav .dropdown-content li > a i { margin-right: .6rem; color: var(--brand-primary); }

/* Collapsible (accordion) headers — prominent */
.collapsible { box-shadow: none; border: 0; }
.collapsible-header {
  padding: 1.5rem 1.7rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-ink);
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  margin: .7rem 0;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: var(--brand-shadow);
}
.collapsible-header i { font-size: 1.8rem; color: var(--brand-primary); }
.collapsible-body { padding: 0; border-radius: 0 0 14px 14px; border: 1px solid var(--brand-border); border-top: 0; margin-bottom: .6rem; }
.collapsible-header.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }

/* Card actions need breathing room */
.card .card-action { padding: 1.1rem 1.4rem; }

/* Inputs */
.input-field input[type=text],
.input-field input[type=email],
.input-field input[type=password],
.input-field input[type=tel],
.input-field select,
.input-field textarea { border-bottom-color: var(--brand-border); }
.input-field input:focus { border-bottom-color: var(--brand-primary); box-shadow: 0 1px 0 0 var(--brand-primary); }
.input-field .prefix.active { color: var(--brand-primary); }
.input-field label.active { color: var(--brand-primary); }

/* Chips */
.chip { border-radius: 8px; background: #eef2f7; color: var(--brand-ink); }

/* Collections */
.collection .collection-item.active { background: var(--brand-primary); }
.collection a.collection-item:not(.active):hover { background: #f8fafc; }

/* Footer */
.page-footer { background-color: var(--brand-primary-deeper); color: #cbd5e1; margin-top: 2.5rem; border-top: 0; padding-top: 2.5rem; }
.page-footer .footer-links a { color: #cbd5e1; }
.page-footer .footer-links a:hover { color: #fff; }
.page-footer .footer-title { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.page-footer .footer-copyright { background: rgba(0,0,0,.18); color: #94a3b8; padding: .9rem 0; }
.page-footer .footer-about { color: #94a3b8; font-size: .95rem; line-height: 1.6; }
.page-footer .footer-links div { margin-bottom: .45rem; }
.page-footer .payment-info { font-size: .85rem; }

/* Pagination */
.pagination li.active a { background: var(--brand-primary); }

/* Breadcrumbs (plain horizontal, not nav-styled) */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1.25rem; font-size: .98rem; color: var(--brand-muted); }
.breadcrumbs a { color: var(--brand-muted); text-decoration: none; font-weight: 500; }
.breadcrumbs a:hover { color: var(--brand-primary); text-decoration: underline; }
.breadcrumbs span, .breadcrumbs .breadcrumb { color: var(--brand-muted); font-weight: 600; }
.breadcrumbs .breadcrumb { padding: 0; }
.breadcrumbs .breadcrumb:not(:last-child)::after { content: '/'; margin-left: .4rem; color: #cbd5e1; }

/* Utility helpers */
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.text-muted { color: var(--brand-muted); }
.mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.w-100 { width: 100%; }

/* ===== Theme toggle (nav icon) ===== */
.theme-toggle-link { cursor: pointer; }

/* ===== Dark mode (data-theme on <html>) ===== */
[data-theme="dark"] {
  --brand-ink: #e5e7eb;
  --brand-muted: #94a3b8;
  --brand-border: #334155;
  --brand-bg: #0f172a;
  --brand-surface: #1e293b;
  --brand-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] body { background-color: var(--brand-bg); color: var(--brand-ink); }
[data-theme="dark"] nav { background-color: #111c31; box-shadow: 0 2px 14px rgba(0,0,0,.4); }
[data-theme="dark"] nav ul li > a { color: var(--brand-muted); }
[data-theme="dark"] nav ul li > a:hover, [data-theme="dark"] nav ul li > a.active { color: #93c5fd; background: rgba(37,99,235,.18); }
[data-theme="dark"] nav .brand-logo { color: var(--brand-ink); }
[data-theme="dark"] nav .dropdown-content { background-color: #1e293b; }
[data-theme="dark"] nav .dropdown-content li > a { color: var(--brand-ink); }
[data-theme="dark"] nav .dropdown-content li > a:hover { color: #93c5fd; }
[data-theme="dark"] .card, [data-theme="dark"] .card-panel, [data-theme="dark"] .collapsible-header { background-color: var(--brand-surface); color: var(--brand-ink); border-color: var(--brand-border); }
[data-theme="dark"] .card .card-title, [data-theme="dark"] .card-title { color: var(--brand-ink); }
[data-theme="dark"] .card .card-action { border-top-color: var(--brand-border); }
[data-theme="dark"] .collection, [data-theme="dark"] .collection .collection-item { background-color: var(--brand-surface); color: var(--brand-ink); border-color: var(--brand-border); }
[data-theme="dark"] .collection a.collection-item:not(.active):hover { background: rgba(37,99,235,.12); }
[data-theme="dark"] .table, [data-theme="dark"] table.striped, [data-theme="dark"] table.striped > tbody > tr:nth-child(odd) { background-color: var(--brand-surface); color: var(--brand-ink); }
[data-theme="dark"] table.striped > tbody > tr:nth-child(odd) { background-color: #182338; }
[data-theme="dark"] .collapsible-body, [data-theme="dark"] .collapsible-body p { background-color: var(--brand-surface); color: var(--brand-ink); }
[data-theme="dark"] .input-field input, [data-theme="dark"] .input-field textarea, [data-theme="dark"] .input-field select { color: var(--brand-ink); border-bottom-color: var(--brand-border); }
[data-theme="dark"] .input-field label { color: var(--brand-muted); }
[data-theme="dark"] .input-field input:focus { border-bottom-color: #93c5fd; box-shadow: 0 1px 0 0 #93c5fd; }
[data-theme="dark"] .page-footer { background-color: #0a1626; }
[data-theme="dark"] .chip { background: #334155; color: var(--brand-ink); }
[data-theme="dark"] .sidenav { background-color: #1e293b; }
[data-theme="dark"] .sidenav li > a:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) { color: #e2e8f0; }
[data-theme="dark"] .sidenav li > a:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating):hover { background-color: rgba(37,99,235,.25); color: #fff; }
[data-theme="dark"] .sidenav li > a .material-icons { color: #93c5fd; }
[data-theme="dark"] .sidenav .divider { background-color: #334155; }
[data-theme="dark"] .sidenav .user-view .name, [data-theme="dark"] .sidenav .user-view .email { color: #fff; }
[data-theme="dark"] .sidenav li > a.active { background-color: rgba(37,99,235,.3); color: #fff; }
[data-theme="dark"] .sidenav li > a.red-text { color: #f87171 !important; }
[data-theme="light"] .sidenav li > a:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) { color: #1f2937; }
[data-theme="light"] .sidenav li > a .material-icons { color: var(--brand-primary); }
[data-theme="dark"] .breadcrumbs a, [data-theme="dark"] .breadcrumbs span { color: var(--brand-muted); }
[data-theme="dark"] .hm-section-alt, [data-theme="dark"] .service-tabs-wrap, [data-theme="dark"] .profile-tabs-wrap, [data-theme="dark"] .domain-tabs-wrap { background: #182338; }
[data-theme="dark"] .modal .modal-content, [data-theme="dark"] .modal .modal-footer { background-color: var(--brand-surface); color: var(--brand-ink); }
[data-theme="dark"] .tabs .tab a { color: var(--brand-muted); }
[data-theme="dark"] .tabs .tab a.active, [data-theme="dark"] .tabs .tab a:hover { color: #93c5fd; }
[data-theme="dark"] .card-panel.grey, [data-theme="dark"] .card-panel.grey.lighten-3, [data-theme="dark"] .card-panel.grey.lighten-4 { background: #334155 !important; color: var(--brand-ink); }
[data-theme="dark"] .invoice-well, [data-theme="dark"] .card-panel.invoice-well { background-color: var(--brand-surface); border-color: var(--brand-border); }
[data-theme="dark"] .markdown-body { color: var(--brand-ink); }
[data-theme="dark"] .hm-cta-card, [data-theme="dark"] .hm-hero, [data-theme="dark"] .ds-hero { background: linear-gradient(135deg, #0f1d3d 0%, #1e3a8a 55%, #2563eb 130%); }
[data-theme="dark"] .error-code { color: #93c5fd; }
[data-theme="dark"] .legal-body { color: var(--brand-ink); }
[data-theme="dark"] .legal-body h1, [data-theme="dark"] .legal-body h2, [data-theme="dark"] .legal-body h3 { color: var(--brand-ink); }
[data-theme="dark"] a { color: #93c5fd; }
[data-theme="dark"] .grey-text, [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: #94a3b8 !important; }
[data-theme="dark"] ::selection { background: rgba(37,99,235,.5); color: #fff; }
[data-theme="dark"] nav .sidenav-trigger i { color: #e2e8f0; }