/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=843d5d5f");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=d0e24377");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
@import url("colours.css?hash=fcb2f289");
@import url("responsive.css?hash=c9d32cba");


/* === Blue/Grey THEME (FINAL merge) === */
:root {
  --outer-bg: #0F172A;
  --link-color: #FFD700;
  --link-hover: #FFC107;
  --info-text-color: #4682B4;

  --forum-bg: #FFFFFF;
  --forum-table-bg: #93A3B3;
  --forum-header-bg: #0F172A;

  --input-bg: #FFFFFF;
  --button-bg: #FFFFFF;
  --user-info-bg: #FFFFFF;

  --post-bg: #B8C2CC;
  --author-bg: #B8C2CC;
  --button-icon: #4682B4;
}

/* Page & container backgrounds */
html, body { background: var(--outer-bg) !important; }
#wrap, .wrap, .page-body, .page-container { background-color: var(--forum-bg) !important; }

/* Headers / menu bar */
.headerbar, .forabg, .forumbg, .navbar, .menu-bar, .navigation, .topbar, .page-header {
  background-color: var(--forum-header-bg) !important;
  border-color: var(--forum-header-bg) !important;
}

/* Tables */
#wrap table, .page-body table, .wrap table {
  background-color: var(--forum-table-bg) !important;
}
#wrap table th, #wrap table td, .page-body table th, .page-body table td {
  background-color: var(--forum-table-bg) !important;
}
#wrap table, #wrap table th, #wrap table td,
.page-body table, .page-body table th, .page-body table td {
  border-color: var(--forum-header-bg) !important;
}

/* Links & info text */
a, a:link, a:visited { color: var(--link-color) !important; }
a:hover, a:focus { color: var(--link-hover) !important; }
.time, .post-time, .lastpost, .lastpost span, .topiclist .lastpost span,
.stat-block, .stat-block p, .stat-block li,
.online-list, .online-list p, .online-list li,
.birthdays, .statistics, .statistics p,
.forum-description, .forum-statistics, .responsive-show .time,
.small, .notice, .rules, .info, .copyright {
  color: var(--info-text-color) !important;
}

/* Inputs/search/user info/button background */
textarea, .message-box textarea, .message-box .inputbox,
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], .search, .search-box input, #search-box input {
  background-color: var(--input-bg) !important;
  color: inherit;
}
.postprofile, .profile, .mini-profile, .user-info, .author {
  background-color: var(--user-info-bg) !important;
}
.button, .button1, .button2, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
  background-color: var(--button-bg) !important;
  color: inherit;
}

/* Borders around forums/posts */
.forabg, .forumbg, .topiclist, .post, .post .inner, .postbody, .postprofile {
  border-color: var(--forum-header-bg) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* NEW: post body + author bar background */
.post .postbody, .postbody, .postbody .content {
  background-color: var(--post-bg) !important;
}
p.author {
  background-color: var(--author-bg) !important;
}

/* NEW: button icon color (not images) */
.button i, .button1 i, .button2 i, .btn i,
.button svg, .button1 svg, .button2 svg, .btn svg,
.button .icon, .button1 .icon, .button2 .icon, .btn .icon,
a.button i, a.button svg, a.button .icon,
a.btn i, a.btn svg, a.btn .icon {
  color: var(--button-icon) !important;
  fill: var(--button-icon) !important;
  stroke: var(--button-icon) !important;
}


/* === Tweaks v4: username color & headerbar === */
:root {
  --username-default: #0F172A;
  --headerbar-bg: #0F172A;
}

/* Headerbar hard set */
.headerbar {
  background-color: var(--headerbar-bg) !important;
  border-color: var(--headerbar-bg) !important;
}

/* Default username color, excluding moderators/administrators and inline-coloured names */
a.username:not(.username-coloured):not(.group-administrators):not(.group-admin):not(.administrator):not(.admin)
         :not(.group-global_moderators):not(.group-moderators):not(.moderator):not(.mod):not([style*="color"]),
.username:not(.username-coloured):not(.group-administrators):not(.group-admin):not(.administrator):not(.admin)
         :not(.group-global_moderators):not(.group-moderators):not(.moderator):not(.mod):not([style*="color"]) {
  color: var(--username-default) !important;
}

/* Also target common places usernames appear (post author link, profile link), respecting exclusions */
.post .author a:not(.username-coloured):not([style*="color"]),
.profile a.username:not(.username-coloured):not([style*="color"]) {
  color: var(--username-default) !important;
}
/* Bigger full-image logo (no cropping) */
:root{
  /* adjust these three heights to taste */
  --logo-h-sm: 96px;
  --logo-h-md: 130px;
  --logo-h-lg: 170px;
}

/* The span.site_logo is where your image is drawn as a background */
#logo .site_logo{
  /* do NOT touch background-image here; keep whatever your theme sets */
  display: inline-block;               /* keeps title/desc on same row */
  height: var(--logo-h-md) !important; /* control size by height */
  /* keep full image visible */
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* maintain the banner’s aspect ratio (1920×420 = 4.571428…:1) */
  aspect-ratio: 1920 / 420;
  width: calc(var(--logo-h-md) * 4.5714286) !important;
  max-width: 100%;                      /* don’t overflow small screens */
}

/* Responsive tweaks */
@media (max-width: 700px){
  #logo .site_logo{
    height: var(--logo-h-sm) !important;
    width: calc(var(--logo-h-sm) * 4.5714286) !important;
  }
}
@media (min-width: 1200px){
  #logo .site_logo{
    height: var(--logo-h-lg) !important;
    width: calc(var(--logo-h-lg) * 4.5714286) !important;
  }
}
/* Reset any earlier absolute positioning we added */
#logo,
#site-description h1,
#site-description p:not(.skiplink),
#search-box.search-header{
  position: static !important;
  top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
}

/* === Header layout: Grid (logo left; title top-right; search bottom-right) === */
.headerbar .inner{
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(260px, 340px); /* left banner, right column */
  grid-template-rows: auto auto;                                 /* top: title, bottom: search */
  gap: 8px 16px;
  align-items: start;
}

/* Left column: banner/logo spans both rows */
#logo{
  grid-column: 1;
  grid-row: 1 / 3;
  line-height: 0;
}
#logo .site_logo{
  /* keep your full image visible */
  height: var(--logo-h, 160px);
  width: auto;
  aspect-ratio: 1920 / 420;             /* your banner ratio */
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}

/* Top-right: site name + description */
#site-description{
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  max-width: 100%;
}
#site-description h1{ margin: 0; }
#site-description p:not(.skiplink){ margin: 4px 0 0; }

/* Bottom-right: search box */
#search-box.search-header{
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  margin: 0 !important;
}

/* Give the navbar a little breathing room below the header */
.navbar{ margin-top: 8px; }

/* Responsive stack for small screens */
@media (max-width: 800px){
  .headerbar .inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #logo{ grid-row: 1; justify-self: center; }
  #logo .site_logo{ height: 120px; }
  #site-description{ grid-row: 2; text-align: center; }
  #search-box.search-header{ grid-row: 3; justify-self: center; }
}