/***
Pers theme - homepage components (hero, stats, popular categories,
section headers, trust strip, CTA banner)

Color rule: every accent in this file reads var(--pers-primary) /
var(--pers-secondary) (and their computed hover/border/soft/dark
shades), set globally by pers_color_vars_css() in functions.php.
That function resolves whichever scheme is active - one of the 5
static presets (blue/red/gold/green/yellow) or the admin's custom
picker - so this stylesheet never needs to change when a buyer picks
a different scheme for their own site. Do not add a hardcoded hex
color to this file; add a var(--pers-...) reference instead.
***/

/* =========================================================
   HERO
   ========================================================= */
.pers-hero {
    position: relative;
    padding: 56px 0 44px;
    background: linear-gradient(135deg, var(--pers-primary) 0%, var(--pers-primary-dark) 100%);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.pers-hero-title {
    margin: 0 0 12px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}
.pers-hero-title .pers-hero-accent { color: var(--pers-secondary); }
.pers-hero-subtitle {
    margin: 0 0 28px;
    font-size: 16px;
    color: rgba(255,255,255,.9);
}

/* search card */
.pers-hero-search {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(16,24,40,.22);
    overflow: hidden;
    text-align: left;
}
.pers-hero-tabs-wrap {
    background: #fbfcfd;
    border-bottom: 1px solid #eef0f4;
    padding: 8px 16px 0;
}
.pers-hero-tabs-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #98a2b3;
    margin-bottom: 2px;
}
.pers-hero-tabs {
    display: flex;
    border-bottom: 0;
    background: none;
    overflow-x: auto;
}
.pers-hero-tabs a {
    flex: 1 1 0;
    padding: 15px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #667085;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.pers-hero-tabs a .fa { margin-right: 5px; }
.pers-hero-tabs a:hover { text-decoration: none; color: var(--pers-primary); }
.pers-hero-tabs a.active {
    color: var(--pers-primary);
    border-bottom-color: var(--pers-primary);
    background: #fff;
}
.pers-hero-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 16px;
    gap: 10px;
}
.pers-hero-fields select,
.pers-hero-fields input[type="text"] {
    height: 46px;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    flex: 1 1 160px;
}
.pers-hero-fields select:focus,
.pers-hero-fields input[type="text"]:focus {
    border-color: var(--pers-primary);
    outline: none;
}
.pers-hero-fields .pers-hero-keyword { flex: 2 1 260px; }
.pers-hero-fields button {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    background: var(--pers-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(16,24,40,.12);
}
.pers-hero-fields button:hover { background: var(--pers-primary-hover); }
.pers-hero-fields button .fa { margin-right: 6px; }

/* stats strip */
.pers-hero-stats {
    max-width: 900px;
    margin: 24px auto 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.pers-hero-stat {
    flex: 1 1 140px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
}
.pers-hero-stat .pers-stat-num { font-size: 20px; font-weight: 800; color: #fff; display: block; }
.pers-hero-stat .pers-stat-label { font-size: 12px; color: rgba(255,255,255,.85); }

@media (max-width: 767px) {
    .pers-hero { padding: 32px 0 28px; }
    .pers-hero-title { font-size: 28px; }
    .pers-hero-tabs a { font-size: 12px; padding: 10px 6px; }
    .pers-hero-fields { flex-direction: column; }
    .pers-hero-fields .pers-hero-keyword { flex: 1 1 auto; }
}

/* =========================================================
   SECTION HEADER (eyebrow + headline + subhead + View all)
   used above Popular Categories, Featured listings, and every
   pers_home_category_section() row.
   ========================================================= */
.pers-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.pers-section-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pers-secondary);
    margin-bottom: 6px;
}
.pers-section-eyebrow .fa { margin-right: 5px; }
.pers-section-title,
#sections .pers-section-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    max-width: 640px;
    color: #101828 !important;
}
.pers-section-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 560px;
    color: #475467 !important;
}
.pers-view-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--pers-primary);
    color: var(--pers-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    /* owl-carousel's prev/next arrows (see .owl-buttons div in style.css)
       are position:absolute; top:-42px relative to .pers-home-carousel,
       i.e. they float in the 42px directly above the carousel - exactly
       where this pill also sits in the same header row. z-index keeps
       the pill clickable/readable; the margin-top pushed onto the
       carousel below (see .pers-section-head + .pers-home-grid) is what
       actually stops the visual overlap. */
    z-index: 2;
}
.pers-view-all:hover {
    text-decoration: none;
    background: var(--pers-primary);
    color: #fff !important;
}
/* Give the owl-carousel arrows their own clear strip below the section
   header instead of overlapping the "View all" pill sitting above them
   at the same top-right corner. !important because pers-cards.css's
   .pers-home-carousel.row rule (2 classes) is close in specificity and
   loads first, and this needs to win unambiguously regardless of load
   order or any future CSS added between them. */
.pers-section-head + .pers-home-grid .pers-home-carousel {
    margin-top: 52px !important;
}

/* =========================================================
   POPULAR CATEGORIES - 4 card grid
   ========================================================= */
.pers-popcats { margin: 0 0 8px; }
.pers-popcat-card {
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 10px;
    padding: 18px 18px 16px;
    height: 100%;
    margin-bottom: 20px;
}
.pers-popcat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pers-primary-soft);
    color: var(--pers-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 10px;
}
.pers-popcat-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #101828;
}
.pers-popcat-card h3 a,
.pers-popcat-card h3 a:visited { color: #101828; }
.pers-popcat-card h3 a:hover { color: var(--pers-primary); text-decoration: none; }
.pers-popcat-card ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.pers-popcat-card ul li { margin-bottom: 6px; }
.pers-popcat-card ul li a,
.pers-popcat-card ul li a:visited {
    font-size: 13px;
    color: #475467;
}
.pers-popcat-card ul li a:hover { color: var(--pers-primary); text-decoration: none; }
.pers-popcat-more,
.pers-popcat-more:visited {
    font-size: 13px;
    font-weight: 600;
    color: var(--pers-secondary);
}
.pers-popcat-more:hover { text-decoration: none; opacity: .85; }
.pers-popcat-more .fa { margin-left: 3px; }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.pers-trust-strip {
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 28px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.pers-trust-item {
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pers-trust-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e8ebf0;
    color: var(--pers-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.pers-trust-item h4 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
}
.pers-trust-item p {
    margin: 0;
    font-size: 12px;
    color: #667085;
}

/* =========================================================
   BOTTOM CTA BANNER
   ========================================================= */
.pers-cta-banner {
    background: linear-gradient(135deg, var(--pers-primary) 0%, var(--pers-primary-dark) 100%);
    border-radius: 14px;
    padding: 26px 28px;
    margin: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    color: #fff;
}
.pers-cta-banner h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
.pers-cta-banner p { margin: 0; font-size: 13px; color: rgba(255,255,255,.9); }
.pers-cta-banner .pers-cta-btn {
    flex: 0 0 auto;
    display: inline-block;
    padding: 12px 26px;
    border-radius: 8px;
    background: var(--pers-secondary);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
}
.pers-cta-banner .pers-cta-btn:hover {
    background: var(--pers-secondary-hover);
    text-decoration: none;
    color: #fff !important;
}

@media (max-width: 767px) {
    .pers-cta-banner { text-align: center; justify-content: center; }
}

/* =========================================================
   FOOTER - 4 column layout (brand, categories, info, follow)
   Overrides the plain "Information"/"Follow us" 2-column list
   that .footer-top's inherited styles produce, without touching
   the .footer-top/.footer-bottom backgrounds themselves (those
   stay scheme-driven via .bg and pers_layout_colors_css()).
   ========================================================= */
.pers-footer-grid { padding: 36px 0 24px; }
.pers-footer-logo img { height: 32px; }
.pers-footer-brand p {
    margin: 12px 0 0;
    font-size: 13px;
    opacity: .85;
    max-width: 240px;
}
.pers-footer-col h4 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
}
.pers-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pers-footer-col ul li { margin-bottom: 9px; }
.pers-footer-col ul li a {
    font-size: 13px;
    opacity: .85;
}
.pers-footer-col ul li a:hover { opacity: 1; text-decoration: none; }
.pers-footer-fb { margin-top: 14px; }

@media (max-width: 767px) {
    .pers-footer-brand,
    .pers-footer-col { margin-bottom: 26px; }
}

/* =========================================================
   ANNOUNCEMENT BAR + NAV QUICKLINKS
   ========================================================= */
.pers-announcement-bar {
    text-align: center;
    font-size: 12px;
    padding: 7px 0;
    color: #fff;
}
.pers-quicklink { display: flex; align-items: center; }
.pers-quicklink > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 12px !important;
    font-size: 13px;
}
.pers-quicklink .fa { font-size: 15px; }

/* =========================================================
   HEADER / NAVBAR polish
   ========================================================= */
.navbar.navbar-default.navbar-static-top {
    border: 0;
    box-shadow: 0 1px 0 rgba(16,24,40,.06);
    min-height: 72px;
}
.navbar.navbar-default .navbar-header { min-height: 72px; display: flex; align-items: center; }
.navbar.navbar-default a.navbar-brand { display: flex; align-items: center; height: 72px; }
.navbar.navbar-default .navbar-collapse { border: 0; box-shadow: none; }
.pers-main-nav.nav > li > a,
#navright.nav > li > a {
    padding-top: 26px;
    padding-bottom: 26px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
}
.pers-main-nav.nav > li > a:hover,
.pers-main-nav.nav > li > a:focus {
    background: transparent;
    color: var(--pers-primary, #3492e1);
}
.pers-main-nav .dropdown-menu {
    border: 1px solid #eef0f4;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16,24,40,.12);
    padding: 6px;
    margin-top: 4px;
}
.pers-main-nav .dropdown-menu > li > a {
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 12px;
}
.pers-main-nav .dropdown-menu > li > a:hover {
    background: var(--pers-primary-soft, #f2f6fb);
    color: var(--pers-primary, #3492e1);
}
.navbar li.publish > a {
    background: var(--pers-secondary, #f3821d);
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 13px;
    margin: 18px 0 !important;
}
.navbar li.publish > a:hover { background: var(--pers-secondary-hover, #d96f14); color: #fff !important; }
#navright.nav > li > a:hover { color: var(--pers-primary, #3492e1); }
.pers-quicklink > a { color: #344054; font-weight: 600; }
.pers-quicklink > a:hover { color: var(--pers-primary, #3492e1); }

/* Vertically centre everything in the row-1 account bar (My Ads, Login,
   Register, language, Publish button) - the button has more height than
   the plain text links, so without this they sit on mismatched baselines. */
.pers-navbar-row1 #navright.nav { display: flex; align-items: center; }
.pers-navbar-row1 #navright.nav > li { float: none; }
.pers-navbar-row1 #navright.nav > li > a { padding-top: 0; padding-bottom: 0; line-height: 64px; }
.pers-navbar-row1 #navright .pers-quicklink > a { line-height: normal; }
.pers-navbar-row1 #navright li.publish > a { line-height: normal; }

/* Two-row header: row1 = logo + account actions, row2 = categories.
   The whole header (both rows together) sticks to the top on scroll -
   see the script in header.php that toggles .pers-stuck on the wrapper
   #persStickyHeader and sizes #persStickySpacer to prevent a jump. */
.pers-navbar-row1 { min-height: 64px; margin-bottom: 0; }
.pers-navbar-row1 .navbar-header,
.pers-navbar-row1 a.navbar-brand { min-height: 64px; height: 64px; }
.pers-navbar-row2 {
    min-height: 46px;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(16,24,40,.06);
}
.pers-navbar-row2 .pers-main-nav.nav > li > a { padding-top: 13px; padding-bottom: 13px; }

/* Centre the category nav in row 2. Bootstrap floats .navbar-nav and its
   list items left; override both and drive the layout with flex so the
   whole menu sits centred in the bar. */
.pers-navbar-row2 .navbar-collapse { float: none; }
.pers-navbar-row2 .pers-main-nav.nav {
    float: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}
.pers-navbar-row2 .pers-main-nav.nav > li { float: none; }

#persStickyHeader { background: #fff; }
#persStickyHeader.pers-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: 0 4px 14px rgba(16,24,40,.12);
}
.pers-sticky-spacer { display: none; }
.pers-sticky-spacer.pers-active { display: block; }

/* "New" category badge */
.pers-new-badge {
    display: inline-block;
    background: var(--pers-secondary, #f3821d);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 1px 5px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 2px;
    position: relative;
    top: -1px;
}

/* =========================================================
   SOCIAL ICONS - selectable style system
   One markup, five looks. The wrapper carries .pers-social plus a
   .pers-social-{style} modifier (set from the admin "Social icon style"
   preference). Each link sets its own brand colour via the
   --pers-social-brand custom property inline in footer.php, so a single
   set of rules recolours every network correctly.
   ========================================================= */
.pers-social { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pers-social a,
.pers-social-style-preview span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    line-height: 1;
    transition: transform .12s ease, opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.pers-social a svg,
.pers-social-style-preview span svg { display: block; }
.pers-social a:hover { transform: translateY(-2px); text-decoration: none; }

/* 1) Filled square - solid brand-colour tile, white glyph */
.pers-social-filled a,
.pers-social-filled.pers-social-style-preview span {
    background: var(--pers-social-brand, #333);
    color: #fff;
    border-radius: 6px;
}
.pers-social-filled a:hover { opacity: .9; }

/* 2) Rounded square - same as filled but softer, larger radius */
.pers-social-rounded a,
.pers-social-rounded.pers-social-style-preview span {
    background: var(--pers-social-brand, #333);
    color: #fff;
    border-radius: 12px;
}
.pers-social-rounded a:hover { opacity: .9; }

/* 3) Circle - solid brand-colour disc */
.pers-social-circle a,
.pers-social-circle.pers-social-style-preview span {
    background: var(--pers-social-brand, #333);
    color: #fff;
    border-radius: 50%;
}
.pers-social-circle a:hover { opacity: .9; }

/* 4) Plain - just the glyph in its brand colour, no box at all */
.pers-social-plain a,
.pers-social-plain.pers-social-style-preview span {
    background: none;
    color: var(--pers-social-brand, #333);
    width: auto;
    height: 38px;
    padding: 0 4px;
}
.pers-social-plain a:hover { opacity: .75; }

/* 5) Outline - brand-colour glyph and border, transparent fill,
   inverting to a filled tile on hover */
.pers-social-outline a,
.pers-social-outline.pers-social-style-preview span {
    background: none;
    color: var(--pers-social-brand, #333);
    border: 1.5px solid currentColor;
    border-radius: 8px;
}
.pers-social-outline a:hover {
    background: var(--pers-social-brand, #333);
    color: #fff;
}

/* When the footer surface is dark and a network's brand colour is also
   dark (X and TikTok are black), a solid-black tile can disappear. On
   the plain/outline styles those glyphs would vanish against a dark
   footer - so give the near-black brands a light fallback there. The
   filled/rounded/circle styles keep the true brand colour since the
   white glyph still reads on black. */
.pers-social-plain a.tw,
.pers-social-plain a.tk,
.pers-social-outline a.tw,
.pers-social-outline a.tk { --pers-social-brand: currentColor; color: inherit; }

/* ---- admin style-picker preview cards ---- */
/* Note: the admin style-picker preview cards
   (.pers-social-style-*) are styled by an inline <style> block in
   admin/settings.php, because the admin page does not load this
   stylesheet. The rules below cover only the live footer icons. */