/*
 * PRAMLEE — phpBB 3.3.17 child theme, v2
 *
 * Scope, agreed 31 Aug 2026: the header and footer are pramlee.cc's own
 * markup and type. Everything phpBB renders in between — forum index,
 * topic lists, posts, forms, buttons, control panel, member list — keeps
 * phpBB/prosilver's own fonts, weights, text colours and row/column
 * structure untouched. The only thing pulled from pramlee.cc into that
 * content area is background colour: page background, panel background,
 * and alternating row background all use the site's light tokens instead
 * of prosilver's default sky-blue gradients. Two named exceptions kept
 * the brand accent on request: buttons (pramlee emerald) and the unread-
 * topic marker (pramlee accent green) — everything else in the content
 * area is intentionally left alone, including prosilver's own icons,
 * link colours, button shape/font, and hover states.
 */
@import url("../../prosilver/theme/stylesheet.css");

@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url("fonts/newsreader-roman-latin.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 400;font-display:swap;src:url("fonts/newsreader-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/inter-latin.woff2") format("woff2")}

:root{
	--pr-white:#fff;--pr-paper:#f8f9f9;--pr-platinum:#d0d8dc;--pr-field:#e8ecee;
	--pr-dim:#61686b;--pr-ink:#1a1f21;--pr-join:#0b3d2e;--pr-signin:#1f6e52;
	--pr-cream:#faf8f5;--pr-cream-border:#dfdacf;--pr-offwhite:#fafbfb;
	--pr-sans:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
	--pr-serif:"Newsreader",Georgia,"Times New Roman",serif;
	--pr-page:1200px;--pr-measure:34em;--pr-gutter:1.5rem;
	--pr-caption:.7647rem;--pr-lead:clamp(1.125rem,1.079rem + .190vw,1.25rem);
	--pr-h3:clamp(1.35rem,1.271rem + .324vw,1.5625rem);
	--pr-h2:clamp(1.85rem,1.630rem + .901vw,2.4414rem);
	--pr-h1:clamp(2.4rem,1.874rem + 2.156vw,3.8147rem);
}
@media (min-width:900px){:root{--pr-gutter:4rem}}
*{box-sizing:border-box}
body#phpbb :focus-visible{outline:2px solid var(--pr-ink);outline-offset:3px}

/* ===================================================================
   1. HEADER + FOOTER — pramlee.cc's own markup, fonts and colours.
   =================================================================== */
.pr-skip-link{position:absolute;left:-9999px;z-index:1000}.pr-skip-link:focus{left:1rem;top:1rem;background:var(--pr-white);padding:.5rem 1rem;color:var(--pr-ink)}
.pr-site-header{position:sticky;top:0;z-index:100;background:var(--pr-white);border-bottom:1px solid var(--pr-platinum)}
.pr-site-bar{max-width:var(--pr-page);min-height:4.2rem;margin:auto;padding:1rem var(--pr-gutter);display:flex;align-items:center;gap:1.5rem}
.pr-wordmark,.pr-footer-wordmark{font:300 1.25rem/1 var(--pr-serif);text-decoration:none;color:var(--pr-ink);white-space:nowrap}
.pr-main-nav{display:flex;align-items:center;gap:2rem;min-width:0;flex:1}.pr-main-nav a,.pr-signin,.pr-account{font:500 var(--pr-caption)/1 var(--pr-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--pr-dim);white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:3px}.pr-main-nav a:hover,.pr-main-nav .is-current,.pr-signin:hover{color:var(--pr-ink);border-bottom-color:currentColor}
.pr-header-actions{display:flex;align-items:center;gap:1.25rem}.pr-join{font:500 var(--pr-caption)/1 var(--pr-sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#fff!important;background:var(--pr-join);border:1px solid var(--pr-join);padding:.55em 1em;white-space:nowrap}.pr-join:hover{background:transparent;color:var(--pr-join)!important}.pr-search{font:400 1.5rem/1 var(--pr-serif);text-decoration:none;color:var(--pr-dim)}.pr-mobile-menu{display:none;position:relative}.pr-mobile-menu summary{list-style:none;cursor:pointer;color:var(--pr-dim);font:500 var(--pr-caption)/1 var(--pr-sans);letter-spacing:.14em;text-transform:uppercase}.pr-mobile-menu summary::-webkit-details-marker{display:none}.pr-mobile-menu nav{position:absolute;right:0;top:2rem;width:min(20rem,calc(100vw - 2rem));padding:1.25rem;background:var(--pr-ink);box-shadow:0 10px 30px rgba(0,0,0,.18)}.pr-mobile-menu nav a{display:block;padding:.5rem 0;color:#fff!important;text-decoration:none;font:300 var(--pr-h3)/1.2 var(--pr-serif)}
.pr-forum-shell{max-width:var(--pr-page);margin:0 auto;padding:2rem var(--pr-gutter) 0}.pr-kicker{margin:0;color:var(--pr-dim);font:500 var(--pr-caption)/1.4 var(--pr-sans);letter-spacing:.18em;text-transform:uppercase}

.pr-site-footer{margin-top:8rem;padding:6rem max(var(--pr-gutter),calc((100vw - var(--pr-page))/2 + var(--pr-gutter)));background:var(--pr-ink);color:#fff}.pr-footer-grid{display:flex;justify-content:space-between;gap:4rem;flex-wrap:wrap}.pr-footer-about{max-width:30em}.pr-footer-wordmark{display:block;color:#fff;font-size:1.5rem;margin-bottom:1.5rem}.pr-footer-about p,.pr-footer-fine{margin:0;color:var(--pr-platinum);font-size:var(--pr-caption);line-height:1.7}.pr-footer-links{display:flex;gap:4rem;flex-wrap:wrap}.pr-footer-links div{display:flex;flex-direction:column;gap:.5rem;min-width:8rem}.pr-footer-links h2{margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid rgba(208,216,220,.18);font:500 var(--pr-caption)/1 var(--pr-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pr-dim)}.pr-footer-links a{color:var(--pr-platinum)!important;text-decoration:none;font-size:var(--pr-caption)}.pr-footer-links a:hover{color:#fff!important;text-decoration:underline}.pr-footer-fine{border-top:1px solid rgba(208,216,220,.18);margin-top:6rem;padding-top:2rem;max-width:52em}
.pr-footer-fine ~ .pr-footer-fine{border-top:none;margin-top:.75rem;padding-top:0}
.pr-footer-fine a{color:var(--pr-platinum)!important;text-decoration:none;border-bottom:1px solid rgba(208,216,220,.4)}
.pr-footer-fine a:hover{color:#fff!important;border-bottom-color:#fff}

/* Prosilver's own masthead (logo/site-description/search box) is replaced
   by the bar above; its breadcrumb trail (in the same #page-header block,
   and again in the footer via navbar_footer.html) is kept — see item 2. */
#page-header .headerbar,.page-footer>.copyright{display:none}.top-anchor{display:none!important}
#wrap.wrap{max-width:var(--pr-page);margin:0 auto;padding:0 var(--pr-gutter);background:var(--pr-white)}
#page-body{margin:0;min-height:0}.page-body{padding-top:0}

/* ===================================================================
   2. BACKGROUND ONLY — phpBB's own panels, forum rows, topic rows and
   post rows keep their prosilver fonts, text colours, borders, icons
   and spacing; only the paint underneath them changes, from prosilver's
   default sky-blue gradients to pramlee.cc's own light neutrals. Hex
   values below are prosilver 3.3.17's own defaults, confirmed against
   its real theme/colours.css (not guessed): body #F5F7FA, .headerbar/
   .forumbg #12A3EB, .forabg #0076B1, .navbar #CADCEB, .panel #ECF1F3,
   .bg1 #ECF3F7, .bg2 #E1EBF2, .bg3 #CADCEB, .ucprowbg #DCDEE2,
   .fieldsbg #E7E8EA, ul.forums gradient #D2E0EB→#EEF5F9 — all replaced,
   nothing else in those rules touched. */
body{background-color:var(--pr-paper)!important}
.headerbar,.forumbg,.forabg{background-image:none!important;background-color:var(--pr-paper)!important}
.navbar{background-image:none!important;background-color:var(--pr-paper)!important}
.panel{background-color:var(--pr-paper)!important}
.bg1{background-color:var(--pr-white)!important}
.bg2{background-color:var(--pr-paper)!important}
.bg3{background-color:var(--pr-field)!important}
.ucprowbg{background-color:var(--pr-field)!important}
.fieldsbg{background-color:var(--pr-field)!important}
ul.forums{background-image:none!important;background-color:var(--pr-white)!important}

/* Prosilver sets the "Forum / Topics / Posts / Last post" column-header
   row (li.header, table.table1 thead) to white text, since by default it
   sits on the vivid blue gradient above — invisible now that the same
   header row is repainted light. Prosilver already carries its own dark-
   on-light variant for exactly this situation (.panel-container's white-
   panel context); reused here rather than inventing a new colour. */
li.header dt,li.header dd,.forumbg .header a,.forabg .header a{color:#333!important}
.forumbg .header a:hover,.forabg .header a:hover{color:#105289!important}
table.table1 thead th{color:#333!important;border-bottom-color:#333!important}

/* ===================================================================
   3. NAMED EXCEPTIONS — kept on request, everything else in each rule
   (font, size, weight, shape, padding, icons) stays prosilver's own.
   ===================================================================
   Buttons: prosilver's own grey/black button1-3 recoloured to the
   pramlee emerald pair; font, size, weight, radius, padding untouched. */
/* Same treatment as the "Join" button on the archive/books pages
   (.bk-cta-soft in the site's own main.css) — cream fill, thin
   cream-grey border, green text, rounded 6px corners, and the site's
   own transition timing; only colour/shape properties are set here,
   size/weight/padding stay phpBB's own. */
.button,.button1,.button2,input.button1,input.button2,input.button3,a.button1,a.button2{background-image:none!important;background-color:var(--pr-cream)!important;border-color:var(--pr-cream-border)!important;border-radius:6px!important;color:var(--pr-join)!important;transition:background-color .16s cubic-bezier(.25,.1,.25,1),border-color .16s cubic-bezier(.25,.1,.25,1)!important}
.button:hover,.button1:hover,.button2:hover,input.button1:hover,input.button2:hover,input.button3:hover,a.button1:hover,a.button2:hover{background-image:none!important;background-color:var(--pr-white)!important;border-color:var(--pr-join)!important;color:var(--pr-join)!important}
.button:focus,input.button1:focus,input.button2:focus,input.button3:focus{border-color:var(--pr-join)!important;color:var(--pr-join)!important}

/* Row hover: prosilver's own default is a pale yellow highlight
   (li.row:hover, #F6F4D0) on both the forum index and topic lists.
   Swapped for pramlee.cc's own zebra-stripe tone — --offwhite in
   main.css, the same near-invisible off-white used for alternating
   table rows on the discography/master-catalogue pages elsewhere on
   the site — rather than inventing a new colour or reusing yellow. */
li.row:hover{background-color:var(--pr-offwhite)!important}

/* Unread-forum marker (forum index only — this is the only marker the
   previous round touched): kept as a flat pramlee-accent dot rather
   than reverting to prosilver's folder-icon sprite. */
.forum_read,.forum_unread,.forum_read_locked,.forum_unread_locked{background-image:none!important}
.forum_read:before,.forum_unread:before{content:"";display:block;width:.45rem;height:.45rem;margin-top:.65rem;background:var(--pr-ink);border-radius:50%}
.forum_unread:before{background:var(--pr-signin)}

@media (max-width:1180px){.pr-main-nav{display:none}.pr-mobile-menu{display:block}}
@media (max-width:700px){.pr-site-bar{min-height:3.8rem;gap:1rem}.pr-header-actions{margin-left:auto;gap:.8rem}.pr-account{display:none}.pr-forum-shell{padding-top:1.5rem}.pr-kicker{font-size:.68rem}.pr-join{padding:.5em .7em}.pr-site-footer{margin-top:4rem;padding-top:4rem;padding-bottom:4rem}.pr-footer-links{gap:2rem}.pr-footer-fine{margin-top:3rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}