/* ============================================================================
   PFDA forum theme
   ============================================================================

   HOW TO INSTALL — this is not a file upload.

   MyBB keeps theme stylesheets in the database, not on disk. The files under
   forum/cache/themes/ are generated copies and are overwritten whenever MyBB
   rebuilds them, so editing those does nothing lasting.

     Admin CP -> Templates & Style -> Themes -> [your theme]
       -> Add Stylesheet
       -> Name:        pfda-forum.css
       -> Attach to:   Global (all pages)
       -> paste this whole file, Save

   It MUST load last. The theme already pulls global.css, css3.css and
   color_water.css; this sheet overrides all three, so drag it to the bottom of
   the stylesheet list if it is not there already.

   WHAT IT DOES

   Brings the forum in line with thepfda.com: the same black, the same amber
   accent, the same system typeface, cards instead of bevelled tables, and a
   layout that works on a phone. The default theme sets min-width: 990px, which
   is why the forum currently needs sideways scrolling on a handset.

   Everything here is an override. Nothing in MyBB's own stylesheets is deleted,
   so removing this sheet restores the old look exactly.

   ONE THING CSS CANNOT DO — do this as well or the phone layout stays broken.

   The forum serves no <meta name="viewport"> tag. Without it a phone lays the
   page out at roughly 980px and zooms out, so the type is unreadable and the
   media queries at the bottom of this file never engage at all. The main site
   has the tag; the forum does not.

     Admin CP -> Templates & Style -> Templates -> [your template set]
       -> Ungrouped Templates -> headerinclude
       -> add this line anywhere in it:

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   That one line is what makes the responsive rules here take effect.
   ========================================================================= */

:root {
    /* The site's own ink is pure #000. The forum is NOT the same value on purpose:
       here it fills whole bars -- the panel strip, every table header, every forum
       category band -- and at that size pure black reads as harsh rather than crisp.
       The site only ever spends black on text and buttons, where it is fine.

       #333a44 washes out the secondary menu row; #1a1f26 is barely distinguishable
       from black. Rendered all three against the real signed-in page before choosing. */
    --pf-ink: #242b34;
    --pf-body: #374151;
    --pf-muted: #6b7280;
    --pf-accent: #f59e0b;
    --pf-surface: #ffffff;
    --pf-page: #f9fafb;
    --pf-line: #e5e7eb;
    --pf-line-soft: #f1f3f5;

    /* How much white sits over the masthead photograph. See the #logo rule. */
    --pf-header-wash: 0.86;

    --pf-radius: 12px;
    --pf-radius-sm: 8px;
    --pf-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .06);

    --pf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- shell -- */

body {
    background: var(--pf-page);
    color: var(--pf-body);
    font-family: var(--pf-font);
    font-size: 15px;
    line-height: 1.6;
    /* The default theme centres the whole document and undoes it again on the
       container — a pre-flexbox habit that misaligns anything it misses. */
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

#container {
    font-family: var(--pf-font);
    font-size: 15px;
    color: var(--pf-body);
    /* min-width: 990px is one of the two things forcing sideways scrolling. */
    min-width: 0;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    border: 0;
    background: transparent;
}

/* The other one, and the more important of the two: MyBB puts .wrapper inside the
   header, the panel, the footer and the content area, and the default gives it
   `min-width: 970px`. Overriding #container alone leaves the page wide, because five
   wrappers inside it are still 970px at minimum. */
.wrapper {
    width: 100%;
    min-width: 0;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

#content {
    background: transparent;
    padding: 1.5rem 1rem 3rem;
}

/* ------------------------------------------------------------- masthead -- */

#header {
    background: var(--pf-surface);
    border-bottom: 1px solid var(--pf-line);
}

/* The masthead carries the same photograph that sits behind the hero on the main site,
   washed out almost to texture. Black bars on white is stark on its own; this softens it
   and ties the forum to the homepage without changing a single colour.

   The wash is a flat white layer painted OVER the photograph in the same background
   shorthand — simpler than a pseudo-element, and it keeps the nav links and the badge on
   a near-white ground so nothing has to be restyled for contrast.

   --pf-header-wash is the one number to adjust: higher hides more of the photograph,
   lower lets more through. Below about 0.75 the nav links start to fight the image. */
#logo {
    border-bottom: 0;
    padding: 1.1rem 0 .9rem;
    background-image:
        linear-gradient(rgba(255, 255, 255, var(--pf-header-wash)),
                        rgba(255, 255, 255, var(--pf-header-wash))),
        url(/imgs/20260925_155201244_iOS.jpg);
    /* Root-relative, not relative: this stylesheet is served from
       forum/cache/themes/<theme>/, so a relative path would look for the photograph
       inside the theme folder. */
    background-size: cover, cover;
    background-position: center, center 34%;
    background-repeat: no-repeat, no-repeat;
}

#logo .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

#logo img {
    max-height: 76px;
    width: auto;
}

/* Top navigation — Portal / Search / Member List / Calendar / Help. */
#logo .menu.top_links {
    float: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
}

#logo .menu.top_links li {
    background: none;
    margin: 0;
    padding: 0;
}

#logo .menu.top_links a {
    display: block;
    /* The default theme hangs an icon sprite off each of these with a left
       padding to clear it; without the sprite that padding reads as a dent. */
    background-image: none;
    padding: .45rem .75rem;
    border-radius: var(--pf-radius-sm);
    color: var(--pf-body);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

#logo .menu.top_links a:hover {
    background: var(--pf-page);
    color: var(--pf-ink);
    text-decoration: none;
}

/* The strip holding quick search and the welcome / login block. */
#panel {
    background: var(--pf-ink);
    color: #fff;
}

#panel .upper {
    background: transparent;
    border: 0;
}

#panel .upper .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* 1rem on the sides, not 0 — the shorthand `.6rem 0` was overriding the horizontal
       padding .wrapper sets, which put the search box hard against the left edge while
       the strip below it (which spells its padding out) sat correctly inset. */
    padding: .6rem 1rem;
}

#panel a,
#panel .welcome,
#panel .welcome a {
    color: #fff;
}

#panel .welcome {
    font-size: .875rem;
}

#panel .welcome a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#panel .welcome a:hover {
    color: var(--pf-accent);
}

#panel fieldset#search {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .4rem;
    /* The default floats this right. A float sits outside the flex layout of the strip
       around it, so it keeps its content width and overflows rather than shrinking. */
    float: none;
    min-width: 0;
}

/* The member menu — User CP, Mod CP, Admin CP, View New Posts, Private Messages.
   MyBB only renders this second strip for a SIGNED-IN user, inside #panel .lower, which
   is why it is easy to miss: the logged-out login page has no .lower at all. Left
   unstyled it falls back to a bulleted list stacked down the black bar. */
#panel .lower {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

#panel .lower .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .45rem 1rem;
}

#panel ul.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* MyBB puts style="float: right" inline on the second of these two lists, and an
       inline style can only be beaten with !important. */
    float: none !important;
}

#panel ul.menu li {
    background: none;
    margin: 0;
    padding: 0;
    /* "(Unread 0, Total 0)" is bare text beside the Private Messages link. */
    color: rgba(255, 255, 255, .72);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

#panel ul.menu li a {
    display: block;
    background-image: none;
    padding: .3rem .6rem;
    border-radius: 6px;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

#panel ul.menu li a:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--pf-accent);
    text-decoration: none;
}

/* --------------------------------------------------------------- tables -- */
/* MyBB lays every list out as a bordered table. Restyled as cards: one border,
   one radius, no bevel. */

.tborder {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    border-collapse: separate;
    border-spacing: 0;
    padding: 0;
    box-shadow: var(--pf-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
    width: 100%;
}

.thead {
    /* !important because the default sets a gradient PNG here; a plain colour
       would otherwise sit underneath it. */
    background: var(--pf-ink) !important;
    background-image: none !important;
    color: #fff;
    border-bottom: 0;
    padding: .85rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.thead a,
.thead a:link,
.thead a:visited {
    color: #fff;
    text-decoration: none;
}

.thead a:hover {
    color: var(--pf-accent);
}

.trow1,
.trow2 {
    /* Both rows the same: the zebra striping is doing work a hairline does
       better, and it fights the card look. */
    background: var(--pf-surface);
    border: 0;
    border-bottom: 1px solid var(--pf-line-soft);
    padding: .85rem 1rem;
}

.trow1:hover,
.trow2:hover {
    background: var(--pf-page);
}

.trow_shaded {
    background: #fff8ec;
    border-bottom: 1px solid var(--pf-line-soft);
}

.tfoot {
    background: var(--pf-page);
    border-top: 1px solid var(--pf-line);
    color: var(--pf-muted);
    padding: .75rem 1rem;
    font-size: .875rem;
}

.tfoot a { color: var(--pf-body); }

.tcat {
    background: var(--pf-page);
    color: var(--pf-ink);
    border-bottom: 1px solid var(--pf-line);
    padding: .7rem 1rem;
    font-weight: 600;
    font-size: .9rem;
}

/* ------------------------------------------------------------ typography -- */

.largetext {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--pf-ink);
    letter-spacing: -.01em;
}

.smalltext {
    font-size: .8125rem;
    color: var(--pf-muted);
}

a:link,
a:visited {
    color: var(--pf-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover,
a:active {
    color: var(--pf-accent);
}

/* Subject lines and forum names carry their own weight; underlining every one
   turns a listing into a thicket. */
.subject_new,
.subject_old,
.forum_status + div strong a,
.thead a,
.tcat a,
.navigation a {
    text-decoration: none;
}

.subject_new a { font-weight: 700; color: var(--pf-ink); }
.subject_old a { font-weight: 500; color: var(--pf-body); }

/* ---------------------------------------------------------- breadcrumbs -- */

.navigation {
    color: var(--pf-muted);
    font-size: .875rem;
    padding: .25rem 0 1rem;
}

.navigation a { color: var(--pf-body); }
.navigation a:hover { color: var(--pf-accent); }
.navigation .active { color: var(--pf-ink); font-weight: 600; }

/* MyBB builds the breadcrumb as a <br> plus an elbow image per level, so it stacks
   down the page. Suppress both and put a chevron before the current page instead —
   a breadcrumb reads as a trail across, not a staircase down. */
.navigation br,
.navigation img {
    display: none;
}

.navigation .active::before {
    content: "\203A";
    color: var(--pf-muted);
    font-weight: 400;
    margin: 0 .45rem;
}

/* --------------------------------------------------------------- forms -- */

input.textbox,
input.text,
textarea,
select {
    font-family: var(--pf-font);
    font-size: .95rem;
    color: var(--pf-body);
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    padding: .55rem .7rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input.textbox:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--pf-ink);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

input.button,
input[type="submit"],
button {
    font-family: var(--pf-font);
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: var(--pf-ink);
    background-image: none;
    border: 1px solid var(--pf-ink);
    border-radius: var(--pf-radius-sm);
    padding: .55rem 1.1rem;
    cursor: pointer;
    transition: opacity .15s ease;
}

input.button:hover,
input[type="submit"]:hover,
button:hover {
    opacity: .85;
}

/* The one amber control on the page, matching the site's single accent. */
input.button.button_primary,
input[name="submit"] {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: var(--pf-ink);
}

/* The quick-search button in the black panel strip.
   global.css styles it as `#search input.button` and color_water.css as
   `#panel input.button` — both an id plus a class, which outrank a bare
   `input.button` no matter how late this sheet loads. Matching their specificity is
   what it takes; this is not an arbitrary nesting. */
#panel input.button,
#search input.button,
#panel fieldset#search input.button {
    background: var(--pf-surface);
    background-image: none;
    border-color: var(--pf-surface);
    color: var(--pf-ink);
}

#panel input.button:hover,
#search input.button:hover {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    opacity: 1;
}

/* The search field sits on black, so it needs its own treatment. */
#panel input.textbox,
#search input.textbox {
    border-color: transparent;
    min-width: 200px;
}

/* --------------------------------------------------------------- posts -- */

.post {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.post.classic .post_author {
    background: var(--pf-page);
    border-right: 1px solid var(--pf-line);
    border-bottom: 0;
}

.post .post_author {
    background: var(--pf-page);
    border-bottom: 1px solid var(--pf-line);
    padding: .9rem 1rem;
}

.post .post_author .author_avatar img {
    border-radius: 50%;
    border: 2px solid var(--pf-surface);
}

.post .post_head {
    border-bottom: 1px solid var(--pf-line-soft);
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    font-size: .8125rem;
    color: var(--pf-muted);
}

.post .post_content {
    padding: 1.1rem 1.25rem;
}

.post_body {
    font-size: .975rem;
    line-height: 1.7;
    color: var(--pf-body);
}

.post_controls,
.post_management_buttons {
    background: var(--pf-page);
    border-top: 1px solid var(--pf-line);
    padding: .6rem 1.25rem;
}

/* Quotes and code, which MyBB renders as bare bordered blocks. */
blockquote {
    background: var(--pf-page);
    border: 1px solid var(--pf-line);
    border-left: 3px solid var(--pf-accent);
    border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0;
    padding: .8rem 1rem;
    margin: .75rem 0;
}

blockquote cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--pf-muted);
    border-bottom: 1px solid var(--pf-line);
    padding-bottom: .4rem;
    margin-bottom: .5rem;
}

.codeblock {
    background: var(--pf-page);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    padding: .8rem 1rem;
    margin: .75rem 0;
}

.codeblock .title {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--pf-muted);
    border-bottom: 1px solid var(--pf-line);
    padding-bottom: .4rem;
    margin-bottom: .5rem;
}

.codeblock code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    /* Long lines scroll inside the block rather than widening the page. */
    display: block;
    overflow-x: auto;
}

/* ---------------------------------------------------------- pagination -- */

.pagination {
    font-size: .875rem;
    padding: .75rem 0;
}

.pagination a,
.pagination .pagination_current {
    display: inline-block;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    padding: .35rem .65rem;
    margin-right: .25rem;
    text-decoration: none;
    background: var(--pf-surface);
}

.pagination .pagination_current {
    background: var(--pf-ink);
    border-color: var(--pf-ink);
    color: #fff;
    font-weight: 600;
}

/* ------------------------------------------------------------- notices -- */

.error,
.validation_error,
.inline_message,
.red_alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0;
    color: #7f1d1d;
    padding: .85rem 1.1rem;
    margin-bottom: 1rem;
}

.success,
.validation_success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #16a34a;
    border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0;
    color: #14532d;
    padding: .85rem 1.1rem;
}

/* --------------------------------------------------------------- modal -- */
/* The header Login link opens this rather than navigating. */

.modal {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    padding: 1.25rem;
}

/* -------------------------------------------------------------- footer -- */

#footer {
    clear: both;
    border-top: 1px solid var(--pf-line);
    margin-top: 2rem;
    padding: 1.25rem 1rem 2rem;
    color: var(--pf-muted);
    font-size: .8125rem;
}

#footer .wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

#footer ul.menu {
    display: flex;
    gap: .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}

#footer ul.menu li { background: none; margin: 0; padding: 0; }
#footer a { color: var(--pf-body); text-decoration: none; }
#footer a:hover { color: var(--pf-accent); text-decoration: underline; }

/* ---------------------------------------------------------- responsive -- */
/* The default theme has no small-screen handling at all; these are additions,
   not overrides. */

@media (max-width: 860px) {
    #logo .wrapper {
        justify-content: center;
        text-align: center;
    }

    #logo .menu.top_links {
        justify-content: center;
    }

    #panel .upper .wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    /* The search field carries a min-width for the desktop layout; at this size it is
       let go so the strip can lay out as a column. */
    #panel fieldset#search {
        width: 100%;
    }

    /* flex-basis must be 0, not auto: with auto the input keeps the intrinsic width its
       `size` attribute gives it and refuses to shrink, pushing the button off screen. */
    #panel input.textbox,
    #search input.textbox {
        flex: 1 1 0%;
        min-width: 0;
        width: auto;
    }

    #panel input.button,
    #search input.button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Forum and thread listings are tables and some carry no width attribute, so they
       size to their content. Let them scroll inside their own box rather than pushing
       the page sideways. */
    .tborder {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Long unbroken strings — a pasted URL, a long username — are the usual cause of a
       table refusing to narrow. */
    .tborder td,
    .tborder th {
        word-break: break-word;
    }

    .post.classic .post_author {
        border-right: 0;
        border-bottom: 1px solid var(--pf-line);
    }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    #content { padding: 1rem .75rem 2rem; }
    .thead, .trow1, .trow2, .tcat { padding: .7rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}