/* ============================================================
   Hob Nob Anyone? — forum skin to match the main royals.org site:
   blue + white with gold highlights, Roboto Slab 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=Roboto+Slab: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, h5, h6,
a.forumtitle, a.topictitle, .forumtitle, .topictitle,
.header dl dt, .header dl dd, li.header dfn,
.panel-heading, .panel-heading h3, .panel-heading h4,
#site-description h1, .page-title, .topic-title, .stat-block dt, blockquote cite {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif !important;
    letter-spacing: 0 !important;
}

/* Quote blocks: on-theme blue tint (replaces the default beige) with a
   blue accent bar, and a gold accent for nested quotes. */
.content blockquote, .postbody blockquote, blockquote {
    padding-top: 0.85em !important;
    padding-bottom: 0.85em !important;
    background: rgba(20, 87, 196, 0.055) !important;
    border-left: 3px solid var(--hn-blue-400) !important;
    border-radius: 8px !important;
}
.content blockquote blockquote, .postbody blockquote blockquote, blockquote blockquote {
    background: rgba(20, 87, 196, 0.10) !important;
    border-left-color: var(--hn-gold) !important;
}
.content blockquote cite, .postbody blockquote cite { color: var(--hn-blue-700) !important; }

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

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

/* Tighter spacing above and below the topic title (viewtopic only) */
.section-viewtopic #page-body { padding-top: 20px; }
#page-body h2.topic-title { margin-bottom: 14px !important; }

/* Google auto-placed ads sometimes inject an over-wide (728px) leaderboard that
   forces the whole page to scroll horizontally on mobile and can overlay other
   controls. Constrain them to the viewport width. */
.google-auto-placed,
.google-auto-placed ins,
ins.adsbygoogle { max-width: 100% !important; overflow: hidden !important; }
.google-auto-placed { clear: both; }

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

/* Read items (no unread posts) get a lighter, more subdued font than unread ones */
dt[title="No unread posts"] a.forumtitle,
dt[title="No unread posts"] a.topictitle {
    font-weight: 400 !important;
    color: #8794ac !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-gold) !important;
    border-color: var(--hn-gold-deep) !important;
    color: var(--hn-blue-900) !important;
    font-weight: 600 !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-deep) !important;
    border-color: var(--hn-gold-deep) !important;
    color: var(--hn-blue-900) !important;
}

/* BBCode toolbar buttons -> blue (Submit / Preview / other buttons stay gold).
   The bbcode buttons all live inside #format-buttons and use .button2. */
#format-buttons input.button2,
#format-buttons a.button2,
#format-buttons button.button2,
#format-buttons .button {
    background: var(--hn-blue-500) !important;
    border-color: var(--hn-blue-700) !important;
    color: #fff !important;
}
#format-buttons input.button2:hover,
#format-buttons a.button2:hover,
#format-buttons button.button2:hover,
#format-buttons .button:hover,
#format-buttons input.button2:focus {
    background: var(--hn-blue-600) !important;
    border-color: var(--hn-blue-700) !important;
    color: #fff !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 */
/* Fixed px sizes (matching the main site at a 16px root) so the forum's own
   root font-size can't change them. Gradient matches the main site footer. */
.hn-footer { background: linear-gradient(180deg, var(--hn-blue-800), 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: 22.4px; padding: 41.6px 0 32px;
    grid-template-columns: 1.2fr 1fr; align-items: center;
}
.hn-footer__brand { display: flex; align-items: center; gap: 16px; }
.hn-footer__logo {
    height: 56px; width: auto; padding-right: 14.4px;
    filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
.hn-footer__brand p { margin: 0; color: #fff; font-size: 16px; line-height: 1.55; }
.hn-footer__brand strong { font-family: 'Roboto Slab', Georgia, serif; font-size: 19.2px; }
.hn-footer__motto { color: var(--hn-gold); font-style: italic; font-size: 14.72px; }
.hn-footer__links { display: flex; gap: 19.2px; justify-content: flex-end; flex-wrap: wrap; }
.hn-footer__links a { color: rgba(255,255,255,0.8) !important; font-weight: 500; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.hn-footer__links a svg { width: 15px; height: 15px; flex-shrink: 0; }
.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: 19.2px; font-size: 12.8px; 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: 11.2px; }
    .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: 'Roboto Slab', Georgia, 'Times New Roman', 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 {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: rgba(255,255,255,0.95) !important;
    border-radius: 999px !important;
    transition: background 0.2s, color 0.2s !important;
}
#main-navbar .navbar-nav > li > a .fa,
#main-navbar .navbar-nav > li > a .icon { font-size: 1.05em !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; }

/* Some Mobbern buttons use a FontAwesome glyph as their value (search, the
   sort/"Go" submit, etc.). Our global "input -> Inter" rule strips the icon
   font and shows a tofu box, so put FontAwesome first with Inter as fallback:
   glyph values render as icons; text values ("Submit", "Login") fall through
   to Inter because FontAwesome has no latin letters. */
input.button1, input.button2, input.button3,
.search-box input[type="submit"],
input.search-icon, .search-icon {
    font-family: 'FontAwesome', 'Inter', system-ui, sans-serif !important;
}
input.search-icon, .search-icon { opacity: 1 !important; color: #fff !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: 'Roboto Slab', Georgia, 'Times New Roman', 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; }

/* When a dropdown is opened inside the hamburger it gets a white background
   (from the desktop "open" rule) but the collapsed-menu rule above keeps its
   text white, so the opened title showed white-on-white. Force dark text on
   the open item so its label stays readable. */
#main-navbar .navbar-collapse.in .navbar-nav > .open > a,
#main-navbar .navbar-collapse.in .navbar-nav > .open > a:hover,
#main-navbar .navbar-collapse.in .navbar-nav > .open > a:focus {
    color: var(--hn-blue-700) !important;
    background: #fff !important;
}

/* Far-right user / login menus always open right-aligned so they can't spill
   off the right edge of the viewport on narrow screens. */
#main-navbar .float-right .dropdown-menu,
#main-navbar #user-menu { right: 0 !important; left: auto !important; }

/* When the user/power menu is open, its toggle turns white to meet the white
   dropdown below. The power icon and username are white, so they vanished
   (white-on-white). Give the open toggle dark text and a dark icon. */
#main-navbar .float-right .navbar-nav > .open > a,
#main-navbar .float-right .navbar-nav > .open > a:hover,
#main-navbar .float-right .navbar-nav > .open > a:focus {
    color: var(--hn-blue-700) !important;
    background: #fff !important;
}
#main-navbar .float-right .navbar-nav > .open > a .icon:before,
#main-navbar .float-right .navbar-nav > .open > a:hover .icon:before,
#main-navbar .float-right .navbar-nav > .open > a:focus .icon:before {
    color: var(--hn-blue-700) !important;
}

/* ---- Hand the whole primary nav to the hamburger up to 979px ---------- */
/* Mobbern keeps a cramped horizontal nav from 780-979px, but the large logo
   plus the long "News / Reports / Stats" label overflow and wrap off the bar
   at those widths (and opened dropdowns clip off-screen at iPad-portrait
   768px). Use the hamburger across the full range, dropping the open panel
   full width below the bar and expanding dropdowns inline. */
@media (max-width: 979px) {
    #main-navbar .navbar-toggle { display: block !important; }
    #main-navbar .nav-content { position: relative !important; }

    /* Hide the panel until opened; when open, drop it full width below. */
    #main-navbar .navbar-collapse.collapse:not(.in) { display: none !important; height: 0 !important; }
    #main-navbar .navbar-collapse.collapse.in {
        display: block !important; height: auto !important;
        position: absolute !important; top: 100% !important;
        left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important;
        float: none !important; z-index: 1050 !important;
        max-height: 80vh; overflow-y: auto;
    }

    /* Stack ONLY the hamburger-panel nav. Must NOT touch the float-right
       user/search group, or their items un-float and the search box drops
       off the bar. */
    #main-navbar .navbar-collapse .navbar-nav { float: none !important; margin: 6px 0 !important; }
    #main-navbar .navbar-collapse .navbar-nav > li { float: none !important; }
    #main-navbar .navbar-collapse .navbar-nav > li > a { padding: 12px 16px !important; border-radius: 8px !important; }

    /* Flow each item's icon inline before its label. Mobbern positions the
       icon absolutely (left:20px) with a big left pad on the link; once the
       menu is stacked that pad is gone and the icon overlapped the text. */
    #main-navbar .navbar-collapse .nav > li > a .icon {
        position: static !important; display: inline-block !important;
        top: auto !important; left: auto !important; padding: 0 !important;
        margin-right: 10px !important; vertical-align: middle !important;
    }

    /* Panel dropdowns (mega-menu + Forum) expand inline inside the panel. */
    #main-navbar .navbar-collapse .navbar-nav .open .dropdown-menu,
    #main-navbar .mega-menu.open .dropdown-menu {
        position: static !important; float: none !important; width: auto !important;
        margin-top: 4px !important; max-height: none !important; box-shadow: none !important;
    }
    #main-navbar .mega-menu .dropdown-menu { overflow-y: visible !important; }
    #main-navbar .mega-menu .dropdown-menu .row { margin: 0 !important; }
    #main-navbar .mega-menu .dropdown-menu [class*="col-"] {
        width: 100% !important; float: none !important; padding: 0 !important;
    }

    /* The right-hand user menu stays in the top bar; keep it a normal
       right-aligned dropdown below its icon (Mobbern forces it absolute). */
    #main-navbar .float-right .navbar-nav .open .dropdown-menu,
    #main-navbar #user-menu {
        position: absolute !important; top: 100% !important;
        right: 0 !important; left: auto !important; z-index: 1060 !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;
}