/*
Theme Name: theme3_fixed 2
Theme URI: https://www.freestufftimes.com
Author: Free Stuff Times
Description: Free Stuff Times: Free Money. Built from theme_fixed 8 (section bar, dark mode, phone drawer, Coming up, coded ad spots).
Version: 8.0
Requires at least: 5.5
Text Domain: freestufftimes
*/

/* optional: if the font isn't there by first paint, this page keeps the fallback instead of
   reflowing every title when it arrives (the next page has it from cache). It's preloaded in the head. */
@font-face {
    font-family: 'bebas';
    font-display: optional;
    src: url('font/BebasNeue-webfont.woff') format('woff'),
         url('font/BebasNeue-webfont.ttf') format('truetype');
}

@font-face {
    font-family: FontAwesome;
    font-display: swap;
    src: url(font/fontawesome-webfont.woff?v=3.0.1) format(woff),
         url(font/fontawesome-webfont.ttf?v=3.0.1) format(truetype);
    font-weight: 400;
    font-style: normal;
}

/* =====================
   TOKENS
   ===================== */
:root {
    /* Colors (unchanged from theme_fixed 7, now named) */
    --fst-green: #8fc33a;        /* original brand green; kept for reference, no longer painted (the logo card uses the band green) */
    --fst-green-band: #6f9f25;   /* title bands: a touch deeper than #8fc33a so white titles reach 3.2:1 */
    --fst-green-dark: #4f6f1d;   /* category bar: deepened with the band so the two-tone stays distinct */
    --fst-green-deep: #456711;   /* buttons */
    --fst-green-ink: #3a5a0e;    /* text on pale green */
    --fst-link: #4f7a1c;         /* 5.1:1 on white */
    --fst-page: #f2f3ed;
    --fst-card: #fff;
    --fst-line: #d9dbcf;
    --fst-line-soft: #e7e7e7;
    --fst-meta: #e8ecd9;         /* share bar, chips */
    --fst-meta-text: #8b8360;
    --fst-pill: #c9d89c;
    --fst-ink: #191919;
    --fst-rail-text: #838383;
    --fst-rail-link: #767676;
    --fst-visited: #000;         /* visited links in posts (a long-standing "seen it" cue) */
    --fst-muted-icon: #6b6b5a;   /* quiet icons: share, social */
    --fst-subtle: #767676;       /* times, placeholders */
    --fst-body-muted: #5f5f5f;   /* small supporting text */
    --fst-expired-bg: #e5e5e5;
    --fst-expired-text: #9c9c9c;
    --fst-expired-link: #7e7e7e;
    --fst-focus: #456711;
    --fst-btn-hover: #3a5a0e;
    --fst-scrim: rgba(20, 26, 15, .5);
    --fst-tag-text: #8a3b12;     /* "Last day": 6.6:1 */
    --fst-tag-bg: #fbe9dc;

    /* Spacing (4px base) */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;

    /* Layout */
    --page-max: 1400px;
    --gutter: 20px;
    --gap: 20px;
    --rail-left: 340px;          /* room for Last 10 and Coming up; posts are a link and a line, so the feed can be narrower */
    --rail-right: 324px;         /* fits a 300px ad inside a padded box */
    --menu-h: 48px;              /* fixed section bar */
    --radius: 4px;
    --display: 'bebas', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Dark mode: set on <html> before first paint (header.php) from the saved choice or the system setting. */
html[data-theme="dark"] {
    color-scheme: dark;
    --fst-green-band: #5d8a1c;   /* white titles 4.1:1 */
    --fst-green-dark: #3f5a17;
    --fst-green-ink: #cfe6a8;    /* text on pale green becomes pale text on dark */
    --fst-link: #9fce5e;         /* 8.8:1 on dark cards */
    --fst-page: #121710;
    --fst-card: #1c2319;
    --fst-line: #2c3527;
    --fst-line-soft: #252d21;
    --fst-meta: #242c20;
    --fst-meta-text: #b3ab8a;
    --fst-pill: #45612a;
    --fst-ink: #e4e8da;
    --fst-rail-text: #a3ab96;
    --fst-rail-link: #b9c1ab;
    --fst-visited: #c3c9b6;
    --fst-muted-icon: #a3ab96;
    --fst-subtle: #979f8b;
    --fst-body-muted: #b9c1ab;
    --fst-expired-bg: #2a2e27;
    --fst-expired-text: #8f9588;
    --fst-expired-link: #a4aa9c;
    --fst-focus: #9fce5e;
    --fst-scrim: rgba(0, 0, 0, .6);
    --fst-tag-text: #f3c7a8;
    --fst-tag-bg: #4a2a17;
}

/* =====================
   BASE
   ===================== */
body {
    background-color: var(--fst-page);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fst-ink);
    margin: 0;
    padding: var(--menu-h) 0 0;
}

a {
    color: var(--fst-link);
    text-underline-offset: 2px;
}

#content a:active,
#content a:visited,
#single-holder a:visited {
    color: var(--fst-visited);
}

html[data-theme="dark"] #content .home_title a:visited {
    color: #10170a;
}

p {
    margin: 10px 0;
}

html {
    scroll-padding-top: calc(var(--menu-h) + var(--s3));
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

h1, h2, h3 {
    font-family: var(--display);
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}

::selection {
    background: var(--fst-pill);
    color: var(--fst-ink);
}

:focus-visible {
    outline: 2px solid var(--fst-focus);
    outline-offset: 2px;
}

input,
select,
textarea,
button {
    accent-color: var(--fst-green-dark);
}

.fst-icon {
    flex: none;
    vertical-align: -3px;
}

/* =====================
   UTILITIES
   ===================== */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden,
.screen-reader-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    margin: -1px;
    padding: 0;
    white-space: nowrap;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
    margin: 0;
}

.fst-skip {
    position: absolute;
    left: var(--s2);
    top: -100px;
    z-index: 10000;
    background: var(--fst-green-deep);
    color: #fff;
    font-weight: 700;
    padding: var(--s2) 14px;
    border-radius: var(--radius);
}

.fst-skip:focus {
    top: var(--s2);
}

/* =====================
   SECTION BAR (replaced UberMenu; its old #megaMenu styles were removed)
   One bar for every part of Free Stuff Times: Freebies, Contests, Hot Deals, Money, What I Got, About.
   Fixed at the top; on phones it is only the tabs, scrolling sideways if needed.
   ===================== */
#main_menu_wrap {
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
}

#main_menu {
    box-sizing: border-box;
    max-width: calc(var(--page-max) - 2 * var(--gutter));
    height: var(--menu-h);
    background-color: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-top: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    margin: 0 auto;
    padding: 0 var(--s2);
}

@media screen and (max-width: 1400px) {
    #main_menu {
        margin: 0 var(--gutter);
    }
}

.fst-nav {
    display: flex;
    align-items: stretch;
    gap: var(--s4);
    height: 100%;
}

.fst-nav__tabs {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fst-nav__item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.fst-nav__tab {
    display: flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    font-family: var(--display);
    font-size: 21px;
    line-height: 1;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
    color: var(--fst-green-ink);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 6px 10px 0;
    text-decoration: none;
    cursor: pointer;
}

.fst-nav__tab:hover {
    border-bottom-color: var(--fst-pill);
}

.fst-nav__tab[aria-current="page"] {
    color: var(--fst-ink);
    border-bottom-color: var(--fst-green-band);
}

.fst-nav__tab .fst-icon,
.fst-nav__toggle .fst-icon {
    width: 15px;
    height: 15px;
}

/* Section icons (desktop): the first icon in a tab; the chevron stays last. */
.fst-nav__tab > .fst-icon:first-child {
    width: 17px;
    height: 17px;
    margin: -3px 5px 0 0;
    color: var(--fst-link);
}

.fst-nav__tab[aria-current="page"] > .fst-icon:first-child {
    color: var(--fst-green-band);
}

.fst-nav__toggle {
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    color: var(--fst-green-ink);
    padding: 3px 6px 0 0;
    margin-left: -6px;
    cursor: pointer;
}

.fst-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 24px rgba(35, 45, 20, .12);
}

.fst-nav__item.is-open > .fst-nav__sub,
html:not(.fst-js) .fst-nav__item:focus-within > .fst-nav__sub {
    display: block;
}

@media (hover: hover) {
    .fst-nav__item.has-menu:hover > .fst-nav__sub {
        display: block;
    }
}

.fst-nav__item.is-open .fst-nav__toggle .fst-icon,
.fst-nav__tab[aria-expanded="true"] .fst-icon {
    transform: rotate(180deg);
}

.fst-nav__sub a {
    display: block;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--fst-ink);
    text-decoration: none;
}

.fst-nav__sub a:hover {
    background: var(--fst-page);
    color: var(--fst-green-ink);
}

.fst-nav__heading {
    font-family: var(--display);
    font-size: 16px;
    letter-spacing: .02em;
    color: var(--fst-rail-text);
    padding: 10px 16px 2px;
}

.fst-nav__tools {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-left: auto;
}

.fst-nav__tools .search-form {
    width: 240px;
}

.fst-nav__tools .search-field {
    padding: 6px 10px;
}

.fst-nav__social {
    display: flex;
    gap: 2px;
}

.fst-nav__social a {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    color: var(--fst-muted-icon);
}

.fst-nav__social a:hover {
    color: var(--fst-green-ink);
    background: var(--fst-page);
}

/* Narrower desktops: social icons (also in About) go first, then the tab icons, so the bar never crowds. */
@media screen and (max-width: 1359px) {
    .fst-nav__social {
        display: none;
    }
}

@media screen and (max-width: 1199px) {
    .fst-nav__tab > .fst-icon:first-child {
        display: none;
    }
}

.fst-nav__menu {
    display: none;
}

/* Dark-mode switch (desktop); the same switch sits in the phone drawer. */
.fst-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 4px 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--fst-ink);
    cursor: pointer;
}

/* Phones: the bar slides away scrolling down, back scrolling up (script in functions.php). */
#main_menu_wrap {
    transition: transform .2s ease-out;
}

#main_menu_wrap.is-hidden {
    transform: translateY(-100%);
}

/* =====================
   PHONE MENU DRAWER
   ===================== */
.fst-scrim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--fst-scrim);
    opacity: 0;
    transition: opacity .2s ease-out;
}

.fst-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10001;
    box-sizing: border-box;
    width: min(85vw, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--fst-card);
    color: var(--fst-ink);
    border-right: 1px solid var(--fst-line);
    box-shadow: 8px 0 24px rgba(0, 0, 0, .18);
    padding: 0 var(--s4) var(--s6);
    transform: translateX(-100%);
    transition: transform .2s ease-out;
}

.fst-drawer[hidden],
.fst-scrim[hidden] {
    display: none;
}

.fst-drawer-open .fst-drawer {
    transform: none;
}

.fst-drawer-open .fst-scrim {
    opacity: 1;
}

html.fst-drawer-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    #main_menu_wrap,
    .fst-drawer,
    .fst-scrim {
        transition: none;
    }
}

@media screen and (min-width: 1020px) {
    .fst-drawer,
    .fst-scrim {
        display: none !important;
    }
}

.fst-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--menu-h);
    border-bottom: 1px solid var(--fst-line-soft);
}

.fst-drawer__title {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: .02em;
    color: var(--fst-body-muted);
}

.fst-drawer__close {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    background: none;
    border: 0;
    color: var(--fst-ink);
    cursor: pointer;
}

.fst-drawer .search-form {
    margin: var(--s4) 0 var(--s1);
}

.fst-drawer__h {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: .02em;
    color: var(--fst-body-muted);
    margin: var(--s5) 0 0;
}

.fst-drawer__h a {
    color: inherit;
    text-decoration: none;
}

.fst-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fst-drawer__list a {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    color: var(--fst-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fst-line-soft);
}

.fst-drawer__list a[aria-current] {
    color: var(--fst-green-ink);
    font-weight: 700;
}

.fst-drawer__list--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s4);
}

.fst-drawer__list--2col a {
    font-size: 15px;
}

.fst-drawer__sub {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fst-subtle);
    padding: var(--s3) 0 2px;
}

/* The rest of the categories, A–Z, folded under the top ten. */
.fst-allcats summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--fst-green-ink);
    border-bottom: 1px solid var(--fst-line-soft);
    cursor: pointer;
    list-style: none;
}

.fst-allcats summary::-webkit-details-marker {
    display: none;
}

.fst-allcats summary .fst-icon {
    width: 18px;
    height: 18px;
    transition: transform .15s ease-out;
}

.fst-allcats[open] summary .fst-icon {
    transform: rotate(180deg);
}

.fst-drawer__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--s6);
    padding: 14px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--fst-line);
    font: inherit;
    font-size: 16px;
    color: var(--fst-ink);
    cursor: pointer;
}

.fst-drawer__theme > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
}

.fst-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: var(--fst-subtle);
    transition: background-color .15s ease-out;
}

.fst-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s ease-out;
}

[data-fst-theme-toggle][aria-checked="true"] .fst-switch {
    background: var(--fst-green-band);
}

[data-fst-theme-toggle][aria-checked="true"] .fst-switch::after {
    transform: translateX(18px);
}

/* Tables pasted into posts (TablePress) follow the theme. */
html[data-theme="dark"] .tablepress th,
html[data-theme="dark"] .tablepress td {
    background-color: var(--fst-card) !important;
    color: var(--fst-ink) !important;
    border-color: var(--fst-line) !important;
}

html[data-theme="dark"] .tablepress thead th {
    background-color: var(--fst-meta) !important;
}

/* =====================
   PAGE SHELL
   Phones: one column (feed, right rail, left rail).
   1020px+: left rail + feed; the right rail's blocks sit under Categories.
   1360px+: left rail + feed + right rail.
   ===================== */
#container {
    box-sizing: border-box;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--s5) var(--gutter) 0;
}

.fst-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "feed"
        "right"
        "top"
        "more";
    column-gap: var(--gap);
}

.fst-feed {
    grid-area: feed;
    min-width: 0;
}

.fst-rail {
    min-width: 0;
}

.fst-rail--right {
    grid-area: right;
}

.fst-rail--top {
    grid-area: top;
    align-self: start;
}

.fst-rail--more {
    grid-area: more;
    align-self: start;
}

@media screen and (min-width: 1020px) {
    .fst-shell {
        grid-template-columns: var(--rail-left) minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "top   feed"
            "right feed"
            "more  feed"
            ".     feed";
    }

    .fst-rail--right {
        align-self: start;
    }
}

@media screen and (min-width: 1360px) {
    .fst-shell {
        grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "top  feed right"
            "more feed right"
            ".    feed right";
    }

    /* Stretch so the last block can stay pinned for the full height of the feed. */
    .fst-rail--right {
        align-self: stretch;
    }
}

@media screen and (min-width: 1360px) and (min-height: 760px) {
    .fst-rail--right > :last-child {
        position: sticky;
        top: calc(var(--menu-h) + var(--s3));
    }
}

/* =====================
   POST CARD
   ===================== */
.post,
#post-single {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: var(--s5);
    background-color: var(--fst-card);
    border-radius: var(--radius);
    border: 1px solid var(--fst-line);
}

.home_title {
    background-color: var(--fst-green-band);
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin: 0;
    padding: var(--s3) var(--s5) 10px;
    font-size: 30px;
    line-height: 1.1;
    text-wrap: balance;
}

.home_title a {
    text-decoration: none;
    color: #fff;
}

.cat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--s3);
    background-color: var(--fst-green-dark);
    color: #eef5e0;
    padding: var(--s1) var(--s5);
    font-size: 14px;
    line-height: 20px;
}

.cat a {
    color: #fff;
    text-decoration: none;
}

.cat a:hover {
    text-decoration: underline;
}

.fst-card__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.fst-card__date .fst-icon {
    width: 14px;
    height: 14px;
}

.fst-card__body,
#single-holder {
    overflow-wrap: anywhere;
}

.fst-card__body {
    padding: var(--s3) var(--s5);
}

.fst-card__body > :first-child,
#single-holder > :first-child {
    margin-top: 0;
}

.fst-card__body > :last-child,
#single-holder > :last-child {
    margin-bottom: 0;
}

.fst-card__body img,
#single-holder img {
    max-width: 100%;
    height: auto;
}

.meta {
    background: var(--fst-meta);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fst-meta-text);
    padding: var(--s2) var(--s5);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Card footer: the offer button leads; share and comments stay quiet. */
.fst-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s3);
}

.fst-claim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--display);
    font-size: 21px;
    line-height: 1;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    color: #fff !important;
    background-color: var(--fst-green-deep);
    border-radius: var(--radius);
    padding: 9px 14px 7px;
    text-decoration: none;
}

.fst-claim:hover {
    background-color: var(--fst-btn-hover);
}

/* Offers the visitor already opened go a muted olive: a quiet "you've been here" for daily regulars. */
.fst-claim:visited {
    background-color: #6b7a55;
}

.fst-claim .fst-icon {
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

.fst-share {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.fst-card__meta > .fst-share:first-child {
    margin-left: 0;
}

a.share-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    color: var(--fst-muted-icon) !important;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

a.share-btn .fst-icon {
    width: 17px;
    height: 17px;
}

a.share-btn:hover,
a.share-btn:focus-visible {
    color: #fff !important;
}

a.share-btn.email:hover,    a.share-btn.email:focus-visible    { background-color: #444; }
a.share-btn.facebook:hover, a.share-btn.facebook:focus-visible { background-color: #3b5998; }
a.share-btn.x:hover,        a.share-btn.x:focus-visible        { background-color: #0f1419; }
a.share-btn.reddit:hover,   a.share-btn.reddit:focus-visible   { background-color: #ff4500; }

.fst-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
}

.fst-card__actions:empty {
    display: none;
}

.fst-card__actions a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--fst-green-ink);
    font-weight: 700;
    text-decoration: none;
}

.fst-card__actions a:hover {
    text-decoration: underline;
}

.fst-card__actions .fst-icon {
    width: 14px;
    height: 14px;
}

/* Expired posts */
#post-single .expired,
.post .expired {
    background-color: var(--fst-expired-bg);
    color: var(--fst-expired-text);
    border-bottom: 1px solid rgba(0, 0, 0, .14);
}

#post-single .expired a,
.post .expired a {
    color: var(--fst-expired-link);
}

#post-single .expired.cat a[href*="/category/expired"],
.post .expired.cat a[href*="/category/expired"] {
    background-color: red;
    border-radius: var(--radius);
    color: #fff;
    margin: -4px;
    padding: 4px;
}

/* List page titles, empty results, pagination */
.search_title {
    background-color: var(--fst-green-band);
    border-radius: var(--radius);
    color: #fff;
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 var(--s5);
    padding: 14px var(--s5) 10px;
}

.fst-empty .search-form {
    max-width: 420px;
    margin-top: var(--s3);
}

.pagination {
    margin-bottom: var(--s6);
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pagination .page-numbers {
    display: inline-block;
    background-color: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    padding: 6px 12px;
    line-height: 20px;
    text-decoration: none;
}

.pagination .page-numbers.current {
    background-color: var(--fst-green-dark);
    border-color: var(--fst-green-dark);
    color: #fff;
}

.pagination .page-numbers.dots {
    background: none;
    border-color: transparent;
}

/* =====================
   HOT DEALS
   Inline copy after the first post (every list page with posts, under 1360px);
   rail copy in the right column.
   ===================== */
.fst-hotdeals .home_title {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.fst-hotdeals .home_title .fst-icon {
    width: 0.8em;
    height: 0.8em;
}

.hot-deals-widget .home_title,
.hot-deals-widget .home_title a:visited {
    color: #fff;
}

.fst-hotdeals__body {
    padding: var(--s3) var(--s5);
}

.fst-hotdeals--rail .home_title {
    font-size: 24px;
    padding: 10px var(--s3) var(--s2);
}

.fst-hotdeals--rail .fst-hotdeals__body {
    padding: var(--s1) var(--s3) var(--s2);
    font-size: 14px;
    line-height: 1.4;
}

/* Hold the list's space until the forum's list arrives (a moment after the page), so nothing below it jumps. */
.fst-hotdeals .xf_threads_entries:empty {
    min-height: 440px;
}

.fst-hotdeals--rail .xf_threads_entries:empty {
    min-height: 560px;
}

.fst-hotdeals .xfThreadsThread {
    padding: 6px 0;
    border-bottom: 1px solid var(--fst-line-soft);
}

.fst-hotdeals .xfThreadsThread:last-child {
    border-bottom: 0;
}

.fst-hotdeals__more {
    display: inline-block;
    margin-top: var(--s2);
    font-weight: 700;
    color: var(--fst-green-ink);
    text-decoration: none;
}

.fst-hotdeals__more .fst-icon,
.fst-cu__all .fst-icon {
    width: 15px;
    height: 15px;
    margin-left: 4px;
    vertical-align: -2px;
}

.fst-hotdeals__more:hover {
    text-decoration: underline;
}

@media screen and (min-width: 1360px) {
    .fst-hotdeals--inline {
        display: none;
    }
}

@media screen and (max-width: 1359px) {
    .fst-inline-deals .fst-hotdeals--rail {
        display: none;
    }
}

/* =====================
   RAILS
   ===================== */
.logo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: var(--s5);
    background-color: var(--fst-green-band);
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}

.fst-boxes,
.fst-boxes ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fst-boxes > li,
.fst-box {
    box-sizing: border-box;
    background-color: var(--fst-card);
    color: var(--fst-rail-text);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    margin-bottom: var(--s5);
    padding: 10px;
}

.fst-boxes > li > h2,
.fst-boxes > li > .sidebar_header,
.fst-box__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    color: var(--fst-rail-text);
    border-bottom: 1px solid var(--fst-line-soft);
    margin: -10px -10px 10px;
    padding: 10px 12px 7px;
}

.fst-boxes a {
    text-decoration: none;
}

.fst-boxes > li > ul > li {
    font-size: 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--fst-line-soft);
    padding: 7px 4px;
}

.fst-boxes > li > ul > li:last-child {
    border-bottom: 0;
}

.fst-boxes > li > ul > li a {
    color: var(--fst-rail-link);
}

.fst-boxes > li > ul > li a:hover {
    color: var(--fst-green-ink);
}

/* Last 10 Freebies Posted */
.fst-last10 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fst-boxes > li > .fst-last10 > li,
.fst-last10 > li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--fst-line-soft);
    padding: 7px 4px;
}

.fst-last10 > li:last-child {
    border-bottom: 0;
}

.fst-last10 a {
    flex: 1;
    min-width: 0;
    color: var(--fst-rail-link);
    text-decoration: none;
}

.fst-last10 a:hover {
    color: var(--fst-green-ink);
}

.fst-last10 time {
    flex: none;
    font-size: 12px;
    color: var(--fst-subtle);
    font-variant-numeric: tabular-nums;
}

.fst-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    align-self: center;
}

.fst-last10 .is-new .fst-dot {
    background: var(--fst-green-band);
}

.fst-last10 .is-new a {
    color: var(--fst-ink);
    font-weight: 700;
}

.fst-last10-note {
    margin: -4px 0 4px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fst-green-ink);
}

.fst-last10-count {
    flex: none;
    white-space: nowrap;
    margin-left: auto;
    margin-right: var(--s2);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
    background: var(--fst-green-deep);
    border-radius: 10px;
    padding: 0 8px;
}

/* A post reached from Last 10 briefly shows where you landed. */
.fst-card:target {
    box-shadow: 0 0 0 3px var(--fst-pill);
}

/* Coming up (left column box, phone row, /coming-up/ page) */
.fst-cu__day {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--fst-green-ink);
    margin: 12px 0 0;
    padding: 0 4px;
}

.fst-cu__day:first-child {
    margin-top: 0;
}

.fst-cu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fst-cu__item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: baseline;
    padding: 7px 4px;
    border-bottom: 1px solid var(--fst-line-soft);
    font-size: 14px;
    line-height: 1.35;
}

.fst-cu__list > .fst-cu__item:last-child {
    border-bottom: 0;
}

.fst-cu__when {
    font-size: 12px;
    color: var(--fst-subtle);
    font-variant-numeric: tabular-nums;
}

.fst-cu__what a {
    color: var(--fst-rail-link);
    text-decoration: none;
}

.fst-cu__what a:hover {
    color: var(--fst-green-ink);
}

.fst-cu__tag {
    display: inline-block;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    color: var(--fst-tag-text);
    background: var(--fst-tag-bg);
    border-radius: 3px;
    padding: 0 5px;
}

.fst-cu__add {
    position: relative;
    align-self: start;
}

.fst-cu__add summary {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -5px -4px 0 0;
    border-radius: var(--radius);
    color: var(--fst-green-ink);
    list-style: none;
    cursor: pointer;
}

.fst-cu__add summary::-webkit-details-marker {
    display: none;
}

.fst-cu__add summary:hover,
.fst-cu__add[open] summary {
    background: var(--fst-page);
}

.fst-cu__add .fst-icon {
    width: 17px;
    height: 17px;
}

.fst-cu__menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 4px 0;
    background: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(35, 45, 20, .12);
}

.fst-cu__menu a {
    padding: 9px 12px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--fst-ink);
    text-decoration: none;
}

.fst-cu__menu a:hover {
    background: var(--fst-page);
}

.fst-cu__all {
    display: inline-block;
    margin: 8px 4px 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fst-green-ink);
    text-decoration: none;
}

.fst-cu__all:hover {
    text-decoration: underline;
}

.fst-cu--page .fst-cu__item {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    font-size: 16px;
    padding: 10px 4px;
}

.fst-cu--page .fst-cu__when {
    font-size: 14px;
}

.fst-cu--page .fst-cu__day {
    font-size: 24px;
    margin-top: 20px;
}

.fst-cu-intro {
    color: var(--fst-body-muted);
}

/* The "when" line on a dated post */
.fst-when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fst-green-ink);
}

.fst-when span {
    font-weight: 400;
    color: var(--fst-subtle);
}

.fst-when .fst-icon {
    width: 16px;
    height: 16px;
}

/* Search */
.search-form {
    display: flex;
    gap: 6px;
    margin: 0;
}

.search-form label {
    display: flex;
    flex: 1;
    min-width: 0;
}

.search-field {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--fst-ink);
    background: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    padding: 7px 10px;
}

.search-field::placeholder {
    color: var(--fst-subtle);
}

.search-submit {
    flex: none;
    font-family: var(--display);
    font-size: 19px;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    background: var(--fst-green-deep);
    border: 0;
    border-radius: var(--radius);
    padding: 8px 12px 6px;
    cursor: pointer;
}

.search-submit:hover {
    background: var(--fst-btn-hover);
}

/* Categories */
.fst-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.fst-chips a {
    display: inline-block;
    white-space: nowrap;
    font-size: 13px;
    line-height: 20px;
    color: var(--fst-green-ink);
    background: var(--fst-meta);
    border-radius: var(--radius);
    padding: 4px 9px;
    text-decoration: none;
}

.fst-chips a:hover {
    background: var(--fst-pill);
}

.fst-chips a[aria-current] {
    background: var(--fst-green-dark);
    color: #fff;
}

.fst-catform select {
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--fst-ink);
    background: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    padding: 6px 8px;
}

/* The 160x600 ad tag draws nothing when the network doesn't fill it, so no empty box around it. */
.fst-boxes > li#ad-slot {
    background: none;
    border: 0;
    padding: 0;
    text-align: center;
}

#Facebook {
    text-align: center;
    line-height: 0;
}

#Facebook img {
    max-width: 100%;
    height: auto;
}

#Copyright h2 {
    border-bottom: 0;
    margin-bottom: -10px;
    font-size: 18px;
}

/* App box */
.fst-apps p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--fst-body-muted);
}

.fst-apps__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}

.fst-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 20px;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff !important;
    background: var(--fst-green-deep);
    border-radius: var(--radius);
    padding: 10px 10px 8px;
    text-decoration: none;
}

.fst-btn:hover {
    background: var(--fst-btn-hover);
}

/* =====================
   AD SPOTS (code lives in inc/ads.php)
   ===================== */
.fst-ad {
    box-sizing: border-box;
    margin: 0 0 var(--s5);
    padding: 6px 10px 10px;
    background: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    text-align: center;
}

.fst-ad__label {
    display: block;
    margin-bottom: 6px;
    text-align: left;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fst-subtle);
}

/* Reserve the unit's height so the page doesn't jump when the ad arrives.
   Responsive units fill at 250-312px on phones and desktops, so they get 280px. */
.fst-ad__slot {
    min-height: var(--fst-ad-h, 280px);
}

.fst-ad--rail-left-lower .fst-ad__slot {
    min-height: 0;
}

/* Phones: the rail spots would stack up at the end of the page; the between-posts ads cover phones. */
@media screen and (max-width: 1019px) {
    .fst-ad--rail-right,
    .fst-ad--rail-left {
        display: none;
    }
}

.fst-ad__slot > ins {
    margin: 0 auto;
}

.fst-rail .fst-ad {
    padding: 6px 11px 11px; /* 324px right rail: exactly 300px inside */
}

.fst-boxes > li.fst-adli,
.fst-boxes > li#ad-slot {
    background: none;
    border: 0;
    padding: 0;
}

.fst-boxes > li.fst-adli > .fst-ad,
.fst-boxes > li#ad-slot > .fst-ad {
    margin-bottom: 0;
}

/* Admin-only placeholders for empty spots */
.fst-ad__ph {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: min(100%, var(--fst-ad-w, 100%));
    min-height: var(--fst-ad-h, 120px);
    margin: 0 auto;
    padding: var(--s3);
    border: 2px dashed var(--fst-line);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fst-subtle);
}

.fst-ad__ph small {
    font-weight: 400;
}

.fst-single-offer:empty {
    display: none;
}

.fst-single-offer {
    margin: 0 0 var(--s3);
}

/* =====================
   SINGLE POSTS, PAGES, COMMENTS
   ===================== */
#single-holder {
    padding: var(--s5) var(--s6);
}

.comments {
    background-color: var(--fst-card);
    border: 1px solid var(--fst-line);
    border-radius: var(--radius);
    margin: 0 0 var(--s5);
}

.fst-comments__inner {
    padding: var(--s5) var(--s6);
}

#commentblock h2 {
    font-size: 30px;
    margin-top: 0;
}

#commentblock > ol {
    padding: 0;
    margin: 0;
}

.comments .commentlist li {
    list-style-type: none;
    margin-bottom: 30px;
}

.commentlist .avatar {
    border-radius: 400px;
    margin-right: 10px;
}

.subscribe-to-comments {
    clear: none !important;
}

input[type=text],
textarea {
    background: var(--fst-card);
    color: var(--fst-ink);
    border-radius: var(--radius);
    font-size: 12px;
    width: 230px;
    max-width: 100%;
    border: 1px solid var(--fst-line);
    padding: 10px 15px;
}

textarea {
    box-sizing: border-box;
    width: 100%;
}

#commentform input[type=submit],
.jetpack_subscription_widget button,
.jetpack_subscription_widget input[type=submit],
.wp-block-jetpack-subscriptions button {
    font-family: var(--display);
    font-size: 19px;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    background: var(--fst-green-deep);
    border: 0;
    border-radius: var(--radius);
    padding: 9px 16px 7px;
    cursor: pointer;
}

#commentform input[type=submit]:hover,
.jetpack_subscription_widget button:hover,
.jetpack_subscription_widget input[type=submit]:hover,
.wp-block-jetpack-subscriptions button:hover {
    background: var(--fst-btn-hover);
}

/* =====================
   PHONE BAR (under 1020px)
   ===================== */
.fst-mbar {
    display: none;
}

/* =====================
   LEGACY (kept for existing post content and plugins)
   ===================== */
#wpstats {
    display: none;
}

.footer_big {
    margin: 20px 0;
    padding: 0;
}

.footer_big > li {
    background-color: #b8a288;
    color: #fff;
    border-radius: var(--radius);
    margin-bottom: 0;
    margin-right: 1%;
    float: left;
    list-style-type: none;
    width: 30%;
    padding: 0 1% 1%;
}

#footer {
    color: #fff;
    font-weight: 700;
    padding: 30px;
}

#footer p {
    width: 200px;
    float: right;
    margin: 0;
    padding: 0;
}

#footer p a {
    color: #fff;
}

.twitter-share-button {
    margin-bottom: -4px;
}

.wp-pagenavi {
    width: 100%;
    margin-bottom: 30px;
}

.wp-pagenavi .first,
.wp-pagenavi .last,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .page,
.wp-pagenavi .pages,
.wp-pagenavi .previouspostslink,
.wp-pagenavi span {
    background-color: var(--fst-card);
    border-radius: var(--radius);
    border: 1px solid var(--fst-line);
    padding: 10px 15px;
}

.contentdate .date-month,
.contentdate .date-day {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
}

/* =====================
   RESPONSIVE
   ===================== */
@media screen and (max-width: 1019px) {
    :root {
        --gutter: 10px;
    }

    #container {
        padding-top: 0;
    }

    :root {
        --menu-h: 44px;
    }

    #main_menu {
        margin: 0;
        padding: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .fst-nav__tools {
        display: none;
    }

    /* Menu button + the five sections fit a 375px screen; About lives in the drawer on phones. */
    .fst-nav {
        gap: 0;
    }

    .fst-nav__menu {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 40px;
        padding: 0;
        background: none;
        border: 0;
        color: var(--fst-green-ink);
        cursor: pointer;
    }

    .fst-nav__menu .fst-icon {
        width: 22px;
        height: 22px;
    }

    .fst-nav__item--about {
        display: none;
    }

    .fst-nav__tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fst-nav__tabs::-webkit-scrollbar {
        display: none;
    }

    .fst-nav__tab {
        font-size: 18px;
        padding: 5px 4px 0;
    }

    /* Contests' sub-sections live on the Contests site on phones; About opens a full-width panel. */
    .fst-nav__toggle {
        display: none;
    }

    .fst-nav__sub {
        position: fixed;
        top: var(--menu-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--menu-h));
        overflow-y: auto;
        border-radius: 0;
    }

    html:not(.fst-js) .fst-nav__item--contests:focus-within > .fst-nav__sub {
        display: none;
    }

    .fst-nav__sub a {
        padding: 11px 16px;
        font-size: 16px;
    }

    .fst-mbar {
        display: block;
        padding: var(--s3) var(--gutter);
    }

    .fst-mbar__row {
        display: flex;
        align-items: center;
        gap: var(--s3);
        margin-bottom: 10px;
    }

    .fst-mbar__logo {
        flex: none;
        display: block;
        line-height: 0;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--fst-green-band);
    }

    .fst-mbar__logo img {
        display: block;
        width: auto;
        height: 56px;
    }

    .fst-mbar .search-form {
        flex: 1;
        min-width: 0;
    }

    .fst-mbar .search-field {
        padding: 10px;
        font-size: 16px; /* 16px stops iOS zooming on focus */
    }

    .fst-mbar .search-submit {
        padding: 12px 12px 10px;
    }

    .fst-last10-m {
        margin-top: 10px;
        background: var(--fst-card);
        border: 1px solid var(--fst-line);
        border-radius: var(--radius);
    }

    .fst-last10-m summary {
        display: flex;
        align-items: center;
        gap: var(--s2);
        font-family: var(--display);
        font-size: 20px;
        line-height: 1;
        letter-spacing: .02em;
        color: var(--fst-rail-text);
        padding: 12px 12px 9px;
        list-style: none;
        cursor: pointer;
    }

    .fst-last10-m summary::-webkit-details-marker {
        display: none;
    }

    .fst-last10-m summary .fst-last10-count {
        margin-right: 0;
    }

    .fst-last10-m summary .fst-last10-count[hidden] + .fst-icon {
        margin-left: auto;
    }

    .fst-last10-m[open] summary > .fst-icon:last-child {
        transform: rotate(180deg);
    }

    .fst-cu-m__count {
        margin-left: auto;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--fst-green-ink);
    }

    .fst-cu-m .fst-cu {
        border-top: 1px solid var(--fst-line-soft);
        padding: 8px 8px 0;
    }

    .fst-cu-m .fst-cu__item {
        padding: 10px 4px;
    }

    .fst-cu-m .fst-cu__all {
        margin: 4px 12px 12px;
    }

    .fst-last10-m .fst-last10 {
        border-top: 1px solid var(--fst-line-soft);
        padding: 0 8px 4px;
    }

    .fst-last10-m .fst-last10 > li {
        padding: 10px 4px;
    }

    /* The phone bar already has the logo, search, popular categories and Last 10. */
    .fst-rail--top .logo,
    .fst-rail--top #Recent,
    .fst-rail--top #ComingUp,
    .fst-rail--top .fst-chips {
        display: none;
    }

    .home_title {
        font-size: 26px;
        padding: 10px 14px 8px;
    }

    .cat,
    .fst-card__body,
    .fst-hotdeals__body,
    .meta {
        padding-left: 14px;
        padding-right: 14px;
    }

    #single-holder,
    .fst-comments__inner {
        padding: var(--s4) 14px;
    }

    a.share-btn {
        width: 40px;
        height: 40px;
    }

    .fst-card__actions a {
        padding: 10px 2px;
    }

    .fst-hotdeals--inline .xf_threads_entries:empty {
        min-height: 240px;
    }

    /* Phones: four Hot Deals, then "More hot deals", so the second freebie stays near the first. */
    .fst-hotdeals--inline .xfThreadsThread:nth-child(n+5),
    .fst-hotdeals--inline .fst-hotdeals__body li:nth-child(n+5) {
        display: none;
    }

    .fst-hotdeals__body {
        font-size: 15px;
        line-height: 1.45;
    }

    .search_title {
        font-size: 28px;
    }
}

/* Narrow phones (360px): one size down so all five sections still fit across. */
@media screen and (max-width: 374px) {
    .fst-nav__tab {
        font-size: 17px;
    }
}