/* ==========================================
   Local Fonts
   ========================================== */

@font-face {
    font-family: "Poppins";
    src: url("../assets/fonts/poppins/Poppins-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../assets/fonts/poppins/Poppins-Bold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* ==========================================
   Typography
   ========================================== */

body{
    font-family:"Poppins",sans-serif;
    font-size:16px;
    line-height:1.7;
    font-weight:400;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:"Poppins",sans-serif;
    font-weight:700;
    line-height:1.2;
    color:var(--ffn-text-heading);
    margin:0 0 .8em;
}

h1{
    font-size:clamp(2.4rem,4vw,3.4rem);
}

h2{
    font-size:clamp(1.8rem,2.5vw,2.4rem);
}

h3{
    font-size:clamp(1.35rem,2vw,1.75rem);
}

h4{
    font-size:1.2rem;
}

h5{
    font-size:1.05rem;
}

h6{
    font-size:1rem;
}

/* ==========================================
   FFN Color Variables
   ========================================== */

:root {

    /* Core palette */
    --ffn-ink: #080913;
    --ffn-graphite: #2A2A2A;
    --ffn-white: #FFFFFF;
    --ffn-off-white: #F5F5F5;

    /* Brand accents */
    --ffn-royal: #2121B6;
    --ffn-magenta: #981892;
    --ffn-golden-bronze: #B59A30;

    /* Background */
    --ffn-bg-dark: var(--ffn-ink);
    --ffn-bg-light: var(--ffn-white);

    /* Surface */
    --ffn-surface: #1E1E1E;
    --ffn-surface-hover: #2A2A2A;
    --ffn-surface-light: var(--ffn-off-white);

    /* Text */
    --ffn-text-dark: var(--ffn-graphite);
    --ffn-text-heading: var(--ffn-ink);
    --ffn-text-light: var(--ffn-white);
    --ffn-text-muted: #777777;

    /* Brand defaults */
    --ffn-accent: var(--ffn-royal);
    --ffn-accent-hover: var(--ffn-magenta);
    --ffn-premium: var(--ffn-golden-bronze);

    /* Borders */
    --ffn-border: rgba(8, 9, 19, .14);
    --ffn-border-light: #E6E6E6;

    /* Radius - sharp cards, slightly softened badges/chips */
    --ffn-radius: 0;
    --ffn-radius-small: 4px;

    /* Shadow - keep FFN surfaces flat by default */
    --ffn-shadow: none;

    /* Transition */
    --ffn-transition: all .25s ease;

}


/* ==========================================
   FFN Status / Membership Badges
   ========================================== */

.ffn-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:8px 0 12px;
}

.ffn-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border:1px solid transparent;
    border-radius:var(--ffn-radius-small);
    font-size:11px;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--ffn-white) !important;
    text-decoration:none !important;
    transition:var(--ffn-transition);
}

/* Linked badges may lead to archives later. */
a.ffn-badge{
    cursor:pointer;
}

.ffn-badge:hover,
.ffn-badge:focus,
.ffn-badge:visited,
.ffn-badge:active{
    color:var(--ffn-white) !important;
    text-decoration:none !important;
}

/* ------------------------------------------
   Citizen System = Royal Blue
   supports both .ffn-badge-citizen and .ffn-badge.citizen
   ------------------------------------------ */

.ffn-badge-citizen,
.ffn-badge-verified,
.ffn-badge.citizen,
.ffn-badge.verified{
    background:var(--ffn-royal) !important;
    border-color:var(--ffn-royal) !important;
    color:var(--ffn-white) !important;
}

.ffn-badge-citizen:hover,
.ffn-badge-citizen:focus,
.ffn-badge-verified:hover,
.ffn-badge-verified:focus,
.ffn-badge.citizen:hover,
.ffn-badge.citizen:focus,
.ffn-badge.verified:hover,
.ffn-badge.verified:focus{
    background:var(--ffn-magenta) !important;
    border-color:var(--ffn-magenta) !important;
}

/* ------------------------------------------
   Profile ownership / listing origin
   ------------------------------------------ */

.ffn-badge-owner-verified{
    background:var(--ffn-royal) !important;
    border-color:var(--ffn-royal) !important;
    color:var(--ffn-white) !important;
}

.ffn-badge-indexed{
    background:var(--ffn-graphite) !important;
    border-color:var(--ffn-graphite) !important;
    color:var(--ffn-white) !important;
}

/* ------------------------------------------
   Creator / Content Role = Dark Magenta
   supports both .ffn-badge-creator and .ffn-badge.creator
   ------------------------------------------ */

.ffn-badge-creator,
.ffn-badge.creator{
    background:var(--ffn-magenta) !important;
    border-color:var(--ffn-magenta) !important;
    color:var(--ffn-white) !important;
}

.ffn-badge-creator:hover,
.ffn-badge-creator:focus,
.ffn-badge.creator:hover,
.ffn-badge.creator:focus{
    background:var(--ffn-royal) !important;
    border-color:var(--ffn-royal) !important;
}

/* ------------------------------------------
   Elite / Premium / Hall of Fame = Golden Bronze
   ------------------------------------------ */

.ffn-badge-elite,
.ffn-badge-premium,
.ffn-badge-hall-of-fame,
.ffn-badge.elite,
.ffn-badge.premium,
.ffn-badge.hall-of-fame{
    background:var(--ffn-premium) !important;
    border-color:var(--ffn-premium) !important;
    color:var(--ffn-white) !important;
}

.ffn-badge-elite:hover,
.ffn-badge-elite:focus,
.ffn-badge-premium:hover,
.ffn-badge-premium:focus,
.ffn-badge-hall-of-fame:hover,
.ffn-badge-hall-of-fame:focus,
.ffn-badge.elite:hover,
.ffn-badge.elite:focus,
.ffn-badge.premium:hover,
.ffn-badge.premium:focus,
.ffn-badge.hall-of-fame:hover,
.ffn-badge.hall-of-fame:focus{
    filter:brightness(.9);
}

/* ------------------------------------------
   Adult / Mature = Graphite
   ------------------------------------------ */

.ffn-badge-adult,
.ffn-badge.adult,
.ffn-badge.mature{
    background:var(--ffn-graphite) !important;
    border-color:var(--ffn-graphite) !important;
    color:var(--ffn-white) !important;
}

.ffn-badge-adult:hover,
.ffn-badge-adult:focus,
.ffn-badge.adult:hover,
.ffn-badge.adult:focus,
.ffn-badge.mature:hover,
.ffn-badge.mature:focus{
    background:var(--ffn-ink) !important;
    border-color:var(--ffn-ink) !important;
}

/* ------------------------------------------
   Retired / Inactive = Muted Grey
   ------------------------------------------ */

.ffn-badge-retired,
.ffn-badge.retired,
.ffn-badge.inactive{
    background:#8A8A8A !important;
    border-color:#8A8A8A !important;
    color:var(--ffn-white) !important;
}

.ffn-badge-retired:hover,
.ffn-badge-retired:focus,
.ffn-badge.retired:hover,
.ffn-badge.retired:focus,
.ffn-badge.inactive:hover,
.ffn-badge.inactive:focus{
    filter:brightness(.9);
}


/* ==========================================
   FFN Categories / Tag Chips
   ========================================== */

.ffn-categories{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:8px 0 12px;
}

.ffn-category{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border:1px solid var(--ffn-border-light);
    border-radius:var(--ffn-radius-small);
    background: var(--ffn-magenta);
    border-color: var(--ffn-magenta);
    color: var(--ffn-white) !important;
    font-size:11px;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-decoration:none !important;
    transition:var(--ffn-transition);
}

.ffn-category:hover,
.ffn-category:focus{
    background: var(--ffn-royal);
    border-color: var(--ffn-royal);
    color: var(--ffn-white) !important;
    text-decoration:none !important;
}

/* Optional helper classes if individual category chips need brand roles later. */
.ffn-category-creator{
    background:var(--ffn-magenta);
    border-color:var(--ffn-magenta);
    color:var(--ffn-white) !important;
}

.ffn-category-citizen{
    background:var(--ffn-royal);
    border-color:var(--ffn-royal);
    color:var(--ffn-white) !important;
}


/* ==========================================
   FFN Main Link Button
   ========================================== */

.ffn-main-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 2px solid var(--ffn-royal);
    border-radius: var(--ffn-radius);
    background: transparent;
    color: var(--ffn-royal) !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-decoration: none !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: var(--ffn-transition);
}

.ffn-main-link-button:hover,
.ffn-main-link-button:focus {
    background: var(--ffn-royal);
    border-color: var(--ffn-royal);
    color: var(--ffn-white) !important;
    text-decoration: none !important;
}

.ffn-main-link-button:visited{
    color: var(--ffn-royal) !important;
}

.ffn-main-link-button:active{
    color: var(--ffn-white) !important;
}


/* ==========================================
   FFN Social Links
   ========================================== */

.ffn-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ffn-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--ffn-graphite);
    border: 1px solid var(--ffn-graphite);
    border-radius: var(--ffn-radius-small);
    color: var(--ffn-white) !important;
    text-decoration: none !important;
    transition: var(--ffn-transition);
}

.ffn-social-link i,
.ffn-social-link svg,
.ffn-social-link span {
    font-size: 18px;
    color: inherit !important;
    fill: currentColor;
    line-height: 1;
}

.ffn-social-link:hover,
.ffn-social-link:focus {
    background: var(--ffn-magenta);
    border-color: var(--ffn-magenta);
    color: var(--ffn-white) !important;
    transform: none;
}

.ffn-social-link:hover i,
.ffn-social-link:hover svg,
.ffn-social-link:hover span,
.ffn-social-link:focus i,
.ffn-social-link:focus svg,
.ffn-social-link:focus span {
    color: var(--ffn-white) !important;
    fill: currentColor;
}

/* ==========================================
   Retired Notice
   ========================================== */
   
.ffn-retired-notice{
    font-size:13px;
    color:#777777;
    border:1px solid var(--ffn-border-light);
    background:var(--ffn-off-white);
    padding:10px 12px;
    border-radius:var(--ffn-radius-small);
}

/* ==========================================
   Directory Grid
   ========================================== */
   
.ffn-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.ffn-directory-search {
    margin: 0 0 32px;
    padding: 24px;
    background: var(--ffn-white);
    border: 1px solid var(--ffn-border-light);
}

.ffn-directory-search-label {
    display: block;
    margin: 0 0 10px;
    color: var(--ffn-text-heading);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.ffn-directory-search-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.ffn-directory-search-field {
    flex: 1 1 320px;
    min-width: 0;
    padding: 12px 14px;
    color: var(--ffn-text-heading);
    background: var(--ffn-white);
    border: 1px solid var(--ffn-border);
    border-radius: 0;
    font: inherit;
}

.ffn-directory-search-field:focus {
    outline: 2px solid var(--ffn-royal);
    outline-offset: 1px;
    border-color: var(--ffn-royal);
}

.ffn-directory-search-button,
.ffn-directory-search-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 20px;
    border: 1px solid var(--ffn-royal);
    border-radius: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

.ffn-directory-search-button {
    color: var(--ffn-white);
    background: var(--ffn-royal);
}

.ffn-directory-search-reset {
    color: var(--ffn-royal) !important;
    background: transparent;
}

.ffn-directory-search-button:hover,
.ffn-directory-search-button:focus,
.ffn-directory-search-reset:hover,
.ffn-directory-search-reset:focus {
    color: var(--ffn-white) !important;
    background: var(--ffn-magenta);
    border-color: var(--ffn-magenta);
}

.ffn-directory-search-summary,
.ffn-directory-search-empty {
    margin: 0 0 24px;
    color: var(--ffn-text-body);
}

.ffn-directory-pagination {
    margin: 36px 0 0;
}

.ffn-directory-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ffn-directory-pagination .page-numbers li {
    margin: 0;
    padding: 0;
}

.ffn-directory-pagination a.page-numbers,
.ffn-directory-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    color: var(--ffn-royal) !important;
    background: var(--ffn-white);
    border: 1px solid var(--ffn-border-light);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.ffn-directory-pagination a.page-numbers:hover,
.ffn-directory-pagination a.page-numbers:focus,
.ffn-directory-pagination span.page-numbers.current {
    color: var(--ffn-white) !important;
    background: var(--ffn-royal);
    border-color: var(--ffn-royal);
}

.ffn-directory-card {
    display: flex;
    flex-direction: column;
    background: var(--ffn-white);
    border: 1px solid var(--ffn-border-light);
    border-radius: var(--ffn-radius);
    box-shadow: var(--ffn-shadow);
    overflow: hidden;
    text-align: center;
}

.ffn-directory-card:hover,
.ffn-directory-card:focus-within {
    border-color: var(--ffn-royal);
}

.ffn-directory-card-image{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:var(--ffn-off-white);
    margin:0;
    padding:0;
}

.ffn-directory-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.ffn-directory-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 22px 18px 24px;
}

.ffn-directory-card-title {
    margin: 0 0 12px;
    padding: 0;
    color: var(--ffn-text-heading);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
}

.ffn-directory-card-title a {
    color: var(--ffn-text-heading) !important;
    text-decoration: none !important;
}

.ffn-directory-card-title a:hover,
.ffn-directory-card-title a:focus {
    color: var(--ffn-magenta) !important;
}

.ffn-directory-card .ffn-badges {
    justify-content: center;
    margin: 0 0 18px;
}

.ffn-directory-card .ffn-categories {
    justify-content: center;
    margin: 0 0 18px;
}

.ffn-directory-card-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:82%;
    margin-top:auto;
    padding:12px 18px;
    border:2px solid var(--ffn-royal);
    border-radius:0;
    background:transparent;
    color:var(--ffn-royal) !important;
    font-size:13px;
    line-height:1;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    text-decoration:none !important;
    transition:var(--ffn-transition);
}

.ffn-directory-card-button:hover,
.ffn-directory-card-button:focus,
.ffn-directory-card-button:active{
    background:var(--ffn-royal);
    border-color:var(--ffn-royal);
    color:var(--ffn-white) !important;
    text-decoration:none !important;
}

.ffn-directory-card-button:visited{
    color:var(--ffn-royal) !important;
}

.ffn-directory-card-button:hover:visited,
.ffn-directory-card-button:focus:visited,
.ffn-directory-card-button:active:visited{
    color:var(--ffn-white) !important;
}

/* ==========================================
   Browse by Category Tiles
   ========================================== */

.ffn-category-tiles{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    margin:30px 0;
}

.ffn-category-tile{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:160px;
    padding:24px 20px;
    border:1px solid var(--ffn-border-light);
    background:var(--ffn-white);
    color:var(--ffn-text-heading) !important;
    text-align:center;
    text-decoration:none !important;
    transition:var(--ffn-transition);
}

.ffn-category-tile:hover,
.ffn-category-tile:focus{
    background:var(--ffn-royal);
    border-color:var(--ffn-royal);
    color:var(--ffn-white) !important;
    text-decoration:none !important;
}

.ffn-category-tile-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
}

.ffn-category-tile-name{
    display:block;
    font-size:22px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.ffn-category-tile-count{
    display:block;
    margin-top:10px;
    font-size:12px;
    font-weight:600;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ffn-text-muted);
}

.ffn-category-tile:hover .ffn-category-tile-count,
.ffn-category-tile:focus .ffn-category-tile-count{
    color:var(--ffn-white);
}

@media (max-width:980px){

    .ffn-category-tiles{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:640px){

    .ffn-category-tiles{
        grid-template-columns:1fr;
    }

}
/* ------------------------------------------
   Directory Card Layout
   ------------------------------------------ */

.ffn-directory-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
}

.ffn-directory-card .ffn-badges{
    justify-content:center;
    min-height:34px;
    margin:0 0 10px;
}

.ffn-directory-card .ffn-categories{
    justify-content:center;
    min-height:34px;
    margin:0 0 18px;
}

.ffn-directory-card-button{
    margin-top:auto;
}

@media (max-width: 980px) {
    .ffn-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ffn-directory-grid {
        grid-template-columns: 1fr;
    }

    .ffn-directory-search-controls {
        flex-direction: column;
    }

    .ffn-directory-search-field,
    .ffn-directory-search-button,
    .ffn-directory-search-reset {
        width: 100%;
        flex-basis: auto;
    }
}