/* ============================================================
   Hob Nob Anyone? — forum skin to match the main royals.org site:
   blue + white with gold highlights, Oswald headings / Inter body.

   Mobbern loads this file LAST in overall_header.html, so these rules
   override the colour themes and mobbern.css. !important is used to win
   over the inherited stylesheets.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root {
    --hn-blue-900: #03132e;
    --hn-blue-800: #051d44;
    --hn-blue-700: #0a2d6e;
    --hn-blue-600: #0e3f97;
    --hn-blue-500: #1457c4;
    --hn-blue-400: #2f7ae6;
    --hn-sky:      #5aa9ff;
    --hn-gold:     #f6c945;
    --hn-gold-deep:#d9a516;
    --hn-ink:      #0a1830;
}

/* ----------------------------- Fonts ----------------------------- */
body, .mobbern, input, button, select, textarea,
.postbody, .content, .navbar, .panel-body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
h1, h2, h3, h4,
a.forumtitle, a.topictitle,
.header dl dt, .panel-heading h3, .panel-heading h4,
#site-description h1, .page-title, .topic-title, blockquote cite {
    font-family: 'Oswald', 'Inter', sans-serif !important;
    letter-spacing: 0.3px;
}

/* --------------------------- Background --------------------------- */
html, body { background: #f4f8fd !important; color: var(--hn-ink); }
#wrap, .wrap, #page-body, #simple-wrap { background: transparent !important; }

/* ----------------------------- Links ----------------------------- */
a, a:link, a:visited,
a.forumtitle, a.topictitle, .postlink, .topictitle {
    color: var(--hn-blue-500) !important;
}
a:hover, a:active,
a.forumtitle:hover, a.topictitle:hover, .postlink:hover {
    color: var(--hn-blue-700) !important;
}

/* Slightly larger topic titles (and matching forum titles) */
a.topictitle, .topictitle,
a.forumtitle, .forumtitle { font-size: 1.28em !important; }

/* ------------------- Header / navbar (gradient) ------------------ */
#main-navbar.navbar, #main-navbar.navbar-default, #main-navbar.navbar-fixed,
#main-navbar.navbar-fixed.navbar-default,
#mobbern-header-0 #main-navbar, #mobbern-header-2 #main-navbar.navbar {
    background: linear-gradient(90deg, var(--hn-blue-700) 0%, var(--hn-blue-500) 55%, var(--hn-blue-600) 100%) !important;
    border-bottom: 3px solid var(--hn-gold) !important;
    box-shadow: 0 8px 24px -6px rgba(5, 29, 68, 0.5) !important;
}
#main-navbar .navbar-nav > li > a, #main-navbar .nav > li > a { color: rgba(255,255,255,0.95) !important; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
    background: rgba(255,255,255,0.14) !important; color: #fff !important;
}

/* --------------- Section / panel / table headers ---------------- */
.topiclist > li.header, .topiclist > li.header dl,
.topiclist > li.header dd, .forabg, .forumbg,
.panel .panel-heading, .panel-primary > .panel-heading,
.table1 thead, #tabs {
    background: linear-gradient(135deg, var(--hn-blue-600), var(--hn-blue-500)) !important;
    border-color: var(--hn-blue-600) !important;
}
li.header, li.header dt, li.header dd,
.panel-heading, .panel-heading h3, .panel-heading h4,
.table1 thead th, .table1 thead td { color: #fff !important; }

/* Links sitting on the gradient headers must be white to stay visible */
li.header a, .topiclist > li.header a,
.forabg > .header a, .forumbg > .header a,
.panel-heading a, .table1 thead a, #tabs a, #tabs .activetab a span {
    color: #fff !important;
}
li.header a:hover, .panel-heading a:hover, #tabs a:hover {
    color: var(--hn-gold) !important;
}

/* ----------------------------- Buttons --------------------------- */
a.button1, input.button1, button.button1,
a.button2, input.button2, button.button2, input.button3,
.btn-primary {
    background: var(--hn-blue-500) !important;
    border-color: var(--hn-blue-600) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
a.button1:hover, input.button1:hover, button.button1:hover,
a.button2:hover, input.button2:hover, button.button2:hover, input.button3:hover,
.btn-primary:hover, .btn-primary:focus {
    background: var(--hn-gold) !important;
    border-color: var(--hn-gold-deep) !important;
    color: var(--hn-blue-900) !important;
}

/* ----------------- Badges / labels / pagination ----------------- */
.badge, .label-primary,
.pagination span strong, .pagination > .active > a, .pagination > .active > span,
.row .pagination span a:hover, li.pagination span a:hover {
    background-color: var(--hn-blue-500) !important;
    border-color: var(--hn-blue-500) !important;
    color: #fff !important;
}
.posthilit { background: var(--hn-gold) !important; color: var(--hn-blue-900) !important; }

/* Secondary accents (Mobbern's green) -> blue/gold */
.panel-secondary .panel-heading { background-color: var(--hn-blue-600) !important; }

/* ----------------------------- Footer ---------------------------- */
#page-footer, #simple-wrap .copyright, #page-footer .copyright {
    background: var(--hn-blue-900) !important;
    color: rgba(255,255,255,0.65) !important;
}
#page-footer a, .footer-links-list a, .copyright a { color: rgba(255,255,255,0.8) !important; }
#page-footer a:hover, .copyright a:hover, .footer-links-list a:hover { color: var(--hn-gold) !important; }

/* Custom footer matching the main royals.org site */
.hn-footer { background: var(--hn-blue-900) !important; color: rgba(255,255,255,0.75); }
.hn-footer__inner {
    width: min(1180px, 92vw); margin-inline: auto;
    display: grid; gap: 1.4rem; padding: 2.6rem 0 2rem;
    grid-template-columns: 1.2fr 1fr; align-items: center;
}
.hn-footer__brand { display: flex; align-items: center; gap: 1rem; }
.hn-footer__logo {
    height: 56px; width: auto; padding-right: 0.9rem;
    filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
.hn-footer__brand p { margin: 0; color: #fff; line-height: 1.5; }
.hn-footer__brand strong { font-family: 'Oswald', 'Inter', sans-serif; font-size: 1.2rem; }
.hn-footer__motto { color: var(--hn-gold); font-style: italic; font-size: 0.92rem; }
.hn-footer__links { display: flex; gap: 1.2rem; justify-content: flex-end; flex-wrap: wrap; }
.hn-footer__links a { color: rgba(255,255,255,0.8) !important; font-weight: 500; }
.hn-footer__links a:hover { color: var(--hn-gold) !important; }
.hn-footer__legal {
    grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.2rem; font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0;
}
@media (max-width: 880px) {
    .hn-footer__inner { grid-template-columns: 1fr; text-align: center; }
    .hn-footer__brand { flex-direction: column; text-align: center; gap: 0.7rem; }
    .hn-footer__logo { padding-right: 0; }
    .hn-footer__links { justify-content: center; }
}

/* --------------------- Rounding to match site -------------------- */
.panel, .post, .forabg, .forumbg, .table1, .sidebar-block, .codebox {
    border-radius: 14px !important;
}
.forabg, .forumbg { overflow: hidden; }

/* ------------------- Logo (match the main site) ----------------- */
/* Override Mobbern's absolutely-positioned 60px-capped logo box so the
   real logo image shows full size and in proportion. */
#logo, a#logo {
    position: relative !important; display: inline-flex !important; align-items: center;
    height: auto !important; min-width: 0 !important; overflow: visible !important;
    padding: 8px 14px !important; text-align: left !important;
}
a#logo > img, #logo .hn-logo-img {
    position: static !important; max-width: none !important; max-height: none !important;
    height: 58px !important; width: auto !important; padding: 0 !important; margin: 0 !important;
    vertical-align: middle;
    filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}
#logo:hover .hn-logo-img { transform: scale(1.06); }

/* On mobile, swap the logo image for "HNA?" in the title font */
#logo .hn-logo-text {
    display: none;
    font-family: 'Oswald', 'Inter', sans-serif !important;
    font-weight: 700; font-size: 1.7rem; letter-spacing: 1px; color: #fff;
}
@media (max-width: 768px) {
    #logo .hn-logo-img { display: none !important; }
    #logo .hn-logo-text { display: inline-block !important; }
}

/* ---- Top-level nav items: white, pill-on-hover (main-site style) ---- */
/* Scoped to .navbar-nav so the logo (in .nav.float-left) is untouched. */
#main-navbar .navbar-nav > li > a {
    color: #fff !important;
    border-radius: 999px !important;
    transition: background 0.2s, color 0.2s !important;
}
#main-navbar .navbar-nav > li > a .caret { border-top-color: #fff !important; transition: transform 0.2s; }

/* Hover / active -> white pill with blue text, just like the main site */
#main-navbar .navbar-nav > li > a:hover,
#main-navbar .navbar-nav > .active > a {
    color: var(--hn-blue-700) !important;
    background: #fff !important;
}
#main-navbar .navbar-nav > li > a:hover .caret,
#main-navbar .navbar-nav > .active > a .caret { border-top-color: var(--hn-blue-700) !important; }
/* OPEN dropdown: the toggle turns white to join the white panel below,
   so the text must be DARK (was white-on-white = invisible). */
#main-navbar .navbar-nav > .open > a,
#main-navbar .navbar-nav > .open > a:hover,
#main-navbar .navbar-nav > .open > a:focus,
.navbar-default .nav > .mega-menu.open > a,
.navbar-default .nav > .mega-menu.open > a:hover,
.navbar-default .nav > .mega-menu.open > a:focus {
    color: var(--hn-blue-700) !important;
    background: #fff !important;
}
#main-navbar .navbar-nav > .open > a .caret,
.navbar-default .nav > .mega-menu.open > a .caret { border-top-color: var(--hn-blue-700) !important; }

/* Keep FontAwesome glyph inputs (search icons) on the icon font so the
   magnifier shows — the navbar search AND the "Search this forum" button. */
input.search-icon, .search-icon {
    font-family: 'FontAwesome' !important;
    opacity: 1 !important;
    color: #fff !important;
}
.search-box input.button2, .search-box input[type="submit"] {
    font-family: 'FontAwesome' !important;
}

/* ---- Dropdown / mega-menu panels: white rounded cards (main-site style) -- */
#main-navbar .dropdown-menu,
#main-navbar .mega-menu .dropdown-menu {
    background: #fff !important;
    border: 1px solid rgba(10,45,110,0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -22px rgba(5,29,68,0.55) !important;
    padding: 6px !important;
    margin-top: 8px !important;
}
#main-navbar .mega-menu .dropdown-menu { padding: 10px !important; }
#main-navbar .dropdown-menu h3 {
    color: var(--hn-blue-700) !important;
    font-family: 'Oswald', 'Inter', sans-serif !important;
}
#main-navbar .dropdown-menu a,
#main-navbar .dropdown-menu .list-unstyled a,
#main-navbar .dropdown-menu > li > a {
    color: var(--hn-blue-600) !important;
    border-radius: 8px !important;
}
#main-navbar .dropdown-menu a:hover,
#main-navbar .dropdown-menu .list-unstyled a:hover,
#main-navbar .dropdown-menu > li > a:hover {
    color: var(--hn-blue-800) !important;
    background: rgba(20,87,196,0.08) !important;
}

/* ------------------- Mobile collapsed menu ---------------------- */
/* When the hamburger is open, give the menu a solid blue panel so the
   white nav links don't sit invisibly over the white page. */
#main-navbar .navbar-collapse.in,
#main-navbar .navbar-collapse.collapsing {
    background: var(--hn-blue-800) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 20px 30px -12px rgba(0,0,0,0.5) !important;
}
#main-navbar .navbar-collapse.in .navbar-nav > li > a { color: #fff !important; }
#main-navbar .navbar-toggle .icon-bar { background-color: #fff !important; }

/* Search / input focus accent */
input:focus, textarea:focus, select:focus, .inputbox:focus {
    border-color: var(--hn-blue-400) !important;
    box-shadow: 0 0 0 2px rgba(47,122,230,0.18) !important;
}