/* ========================================
   BABY NAMES PAGE REDESIGN
   ======================================== */

.bn-page-wrap { max-width: 100%; }

/* === HERO === */
.bn-hero {
   background: linear-gradient(135deg, #FF1874 0%, #cc1a7a 40%, #7C3AED 100%);
   border-radius: 16px;
   padding: 40px 40px 36px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 24px;
   margin-bottom: 28px;
}
.bn-hero::before {
   content: '';
   position: absolute;
   top: -60px; right: -60px;
   width: 220px; height: 220px;
   border-radius: 50%;
   background: rgba(255,255,255,0.06);
   pointer-events: none;
}
.bn-hero-content { flex: 1; min-width: 0; }
.bn-hero-title {
   font-size: 28px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 8px;
   line-height: 1.25;
}
.bn-hero-desc {
   font-size: 15px;
   color: rgba(255,255,255,0.88);
   margin-bottom: 20px;
}
/* Force white on the hero title/description and any nested <p>/<span> the ACF
   field outputs (overrides global dark text + inline WYSIWYG colors). */
.bn-hero-title, .bn-hero-title * { color: #fff !important; }
.bn-hero-desc, .bn-hero-desc * { color: rgba(255,255,255,0.9) !important; }
.bn-hero-desc p { font-size: 15px; line-height: 1.5; margin: 0 0 8px; }
.bn-hero-desc p:last-child { margin-bottom: 0; }
.bn-hero-art { width: 180px; flex-shrink: 0; opacity: 0.9; }
.bn-hero-art svg { width: 100%; height: auto; }

/* Finder inside hero */
.bn-hero .baby-name-generator { background: transparent; padding: 0; box-shadow: none; border: none; }
.bn-hero .baby-name-generator > h2,
.bn-hero .baby-name-generator > p { display: none; }
.bn-hero .baby-select-option { background: rgba(255,255,255,0.12); border-radius: 12px; padding: 16px; }
.bn-hero .select-button {
   background: rgba(255,255,255,0.95) !important;
   color: #1E293B !important;
   border: 1px solid rgba(255,255,255,0.3) !important;
   border-radius: 8px !important;
   font-weight: 500 !important;
   font-size: 13px !important;
}
.bn-hero .select-button.has-selection { color: #FF1874 !important; font-weight: 600 !important; }
.bn-hero .bnf-search-btn {
   background: #fff !important;
   color: #FF1874 !important;
   border-color: #fff !important;
   font-weight: 700 !important;
}
.bn-hero .bnf-search-btn:hover { background: #FF1874 !important; color: #fff !important; }
.bn-hero .bnf-more-btn {
   background: rgba(255,255,255,0.15) !important;
   color: #fff !important;
   border-color: rgba(255,255,255,0.4) !important;
}
.bn-hero .bnf-more-btn:hover { background: rgba(255,255,255,0.25) !important; }

/* Native <select> finder (nicknames & surnames) inside the gradient hero —
   styled directly so it looks good even if Select2 doesn't initialize. */
.bn-hero .baby-name-generator select.form-control,
.bn-hero .baby-select-option select {
   width: 100% !important;
   height: 48px;
   background-color: rgba(255,255,255,0.96);
   border: 1px solid rgba(255,255,255,0.4);
   border-radius: 8px;
   padding: 0 38px 0 16px;
   font-size: 14px;
   font-weight: 500;
   color: #1E293B;
   line-height: 48px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF1874' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-size: 14px;
}
.bn-hero .baby-name-generator select.form-control:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Select2 finder (nicknames & surnames) inside the gradient hero */
.bn-hero .select2-container { width: 100% !important; }
.bn-hero .select2-container--default .select2-selection--single {
   background: rgba(255,255,255,0.95) !important;
   border: 1px solid rgba(255,255,255,0.35) !important;
   border-radius: 8px !important;
   height: 46px !important;
}
.bn-hero .select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 44px !important; color: #1E293B !important; font-size: 14px;
}
.bn-hero .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
.bn-hero .finding-names {
   background: #fff !important; color: var(--primary) !important;
   width: 100% !important; max-width: 280px;
   border-radius: 8px; font-weight: 700; padding: 12px 28px; margin: 16px auto 0;
}
.bn-hero .finding-names:hover { background: var(--primary-dark) !important; color: #fff !important; }
/* "OR" dividers in the quotes finder */
.bn-hero .col-or div { color: rgba(255,255,255,0.92); font-weight: 700; font-size: 13px; }
.bn-hero .baby-name-generator .row { align-items: center; }

/* === SECTION WRAPPERS === */
.bn-section { margin: 32px 0; }
.bn-section-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bn-section-hdr h2 { font-size: 20px; font-weight: 700; color: #1E293B; margin: 0; }
.bn-sec-badge {
   width: 36px; height: 36px;
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.bn-badge-alpha { background: #FFE4EF; color: #FF1874; }
.bn-section-hdr-row {
   display: flex; align-items: center;
   justify-content: space-between;
   margin-bottom: 20px; gap: 12px;
}
.bn-sec-title { font-size: 20px; font-weight: 700; color: #1E293B; margin: 0 0 4px; }
.bn-sec-sub   { font-size: 13px; color: #64748B; margin: 0; }
.bn-view-all-link {
   font-size: 13px; font-weight: 600; color: #FF1874;
   text-decoration: none; white-space: nowrap;
   border: 1.5px solid #FF1874;
   padding: 7px 16px; border-radius: 20px; transition: all .2s;
}
.bn-view-all-link:hover { background: #FF1874; color: #fff; text-decoration: none; }

/* === A-Z ALPHABET GRID === */
.bn-alpha-section {
   background: #fff; border-radius: 14px;
   padding: 20px 24px;
   box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.bn-alpha-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-alpha-link {
   width: 42px; height: 42px;
   display: flex; align-items: center; justify-content: center;
   border-radius: 8px;
   background: #fff9fb; border: 1.5px solid #fce4ef;
   color: #FF1874; font-weight: 700; font-size: 15px;
   text-decoration: none; transition: all .2s;
}
.bn-alpha-link:hover { background: #FF1874; color: #fff; border-color: #FF1874; text-decoration: none; }

/* === CATEGORY CARDS === */
.bn-cats-outer {
   margin: 32px 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   align-items: start;
}
.bn-cat-card {
   display: flex; align-items: flex-start; gap: 16px;
   background: #fff; border-radius: 14px;
   padding: 20px 20px;
   border: 1px solid #f0f0f4;
   box-shadow: 0 1px 6px rgba(0,0,0,.05);
   transition: box-shadow .2s;
   height: 100%;
}
.bn-cat-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.bn-cat-icon {
   width: 52px; height: 52px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-size: 22px; flex-shrink: 0; line-height: 1;
}
.bn-cat-body { flex: 1; min-width: 0; }
.bn-cat-body h3 { font-size: 16px; font-weight: 700; color: #1E293B; margin: 0 0 4px; }
.bn-cat-body > p { font-size: 13px; color: #64748B; margin: 0 0 14px; line-height: 1.5; }
.bn-cat-links {
   display: grid; grid-template-columns: 1fr 1fr;
   gap: 4px 14px; margin-bottom: 14px;
}
.bn-cat-links a {
   font-size: 13px; color: #1E293B; text-decoration: none;
   padding: 3px 0; display: flex; align-items: center; gap: 5px;
   transition: color .15s;
}
.bn-cat-links a::before { content: '›'; color: #FF1874; font-weight: 700; font-size: 16px; line-height: 1; }
.bn-cat-links a:hover { color: #FF1874; text-decoration: none; }
.bn-cat-view-all {
   display: inline-block; font-size: 13px; font-weight: 600;
   text-decoration: none; padding: 7px 18px; border-radius: 20px;
   border: 1.5px solid; transition: all .2s; background: transparent;
}
.bn-cat-view-all:hover { opacity: .85; text-decoration: none; background: rgba(0,0,0,.04); }

/* Browse More */
.bn-cat-hidden { display: none; grid-column: 1 / -1; }
.bn-cat-hidden.open {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}
.bn-browse-more-wrap { grid-column: 1 / -1; text-align: center; margin: 8px 0 4px; }
.bn-browse-more-btn {
   background: none; border: 1.5px solid #e2e8f0;
   padding: 10px 28px; border-radius: 24px;
   font-size: 14px; font-weight: 600; color: #1E293B;
   cursor: pointer; transition: all .2s;
}
.bn-browse-more-btn:hover { border-color: #FF1874; color: #FF1874; }
.bn-more-arrow { margin-left: 6px; }

/* === TRENDING NAMES === */
.bn-trending-section { margin: 36px 0; }
.bn-trending-carousel.owl-carousel { margin: 0; }
.bn-name-card {
   display: flex; flex-direction: column;
   align-items: center; justify-content: center;
   padding: 20px 16px; border-radius: 12px;
   text-align: center; text-decoration: none;
   transition: transform .2s, box-shadow .2s;
   border: 1.5px solid #f0f0f4; background: #fff;
   min-height: 90px; gap: 8px;
}
.bn-name-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.1); text-decoration: none; }
.bn-name-card.boy  { border-color: #DBEAFE; background: #EFF6FF; }
.bn-name-card.girl { border-color: #FCE7F3; background: #FDF2F8; }
.bn-name-text  { font-size: 16px; font-weight: 700; color: #1E293B; display: block; }
.bn-gender-badge {
   font-size: 11px; font-weight: 600;
   padding: 3px 10px; border-radius: 20px; display: inline-block;
}
.bn-name-card.boy  .bn-gender-badge { background: #DBEAFE; color: #1D4ED8; }
.bn-name-card.girl .bn-gender-badge { background: #FCE7F3; color: #BE185D; }
.bn-name-card:not(.boy):not(.girl) .bn-gender-badge { background: #F0FDF4; color: #15803D; }

/* === LATEST ARTICLES === */
.bn-articles-section { margin: 36px 0; }
.bn-articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.bn-article-card {
   display: flex; flex-direction: column;
   background: #fff; border-radius: 12px; overflow: hidden;
   border: 1px solid #f0f0f4; box-shadow: 0 1px 6px rgba(0,0,0,.05);
   text-decoration: none; transition: box-shadow .2s, transform .2s;
}
.bn-article-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-3px); text-decoration: none; }
.bn-art-thumb { width: 100%; height: 160px; overflow: hidden; background: #f8fafc; }
.bn-art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-art-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#fce7f3,#ede9fe); }
.bn-art-body { padding: 16px; flex: 1; }
.bn-art-cat {
   display: inline-block; font-size: 11px; font-weight: 700;
   color: #FF1874; background: #FFE4EF;
   padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
   text-transform: uppercase; letter-spacing: .4px;
}
.bn-art-title {
   font-size: 15px; font-weight: 700; color: #1E293B;
   margin: 0 0 10px; line-height: 1.4;
   display: -webkit-box; -webkit-line-clamp: 2;
   -webkit-box-orient: vertical; overflow: hidden;
}
.bn-art-meta { font-size: 12px; color: #64748B; display: flex; align-items: center; gap: 6px; }

/* === CTA BANNER === */
.bn-cta-banner {
   background: linear-gradient(135deg, #FF1874 0%, #7C3AED 100%);
   border-radius: 16px; padding: 40px 32px;
   text-align: center; margin: 36px 0 28px;
}
.bn-cta-inner h2 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.bn-cta-inner p  { font-size: 15px; color: rgba(255,255,255,.88); margin: 0 0 24px; }
.bn-cta-buttons  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bn-cta-btn-primary {
   background: #fff; color: #FF1874;
   font-size: 14px; font-weight: 700;
   padding: 12px 28px; border-radius: 30px;
   text-decoration: none; transition: opacity .2s;
}
.bn-cta-btn-primary:hover { opacity: .9; text-decoration: none; }
.bn-cta-btn-outline {
   background: transparent; color: #fff;
   font-size: 14px; font-weight: 700;
   padding: 12px 28px; border-radius: 30px;
   border: 2px solid rgba(255,255,255,.7);
   text-decoration: none; transition: all .2s;
}
.bn-cta-btn-outline:hover { background: rgba(255,255,255,.15); text-decoration: none; }

/* === POPULAR SEARCHES WIDGET === */
.ng-popular-searches { list-style: none; margin: 0; padding: 0; }
.ng-popular-searches li {
   border-bottom: 1px solid #f0f0f4;
}
.ng-popular-searches li:last-child { border-bottom: none; }
.ng-popular-searches li a {
   display: flex; align-items: center; justify-content: space-between;
   padding: 10px 0; font-size: 13.5px; font-weight: 500;
   color: #1E293B; text-decoration: none; transition: color .15s;
}
.ng-popular-searches li a::after {
   content: '→'; color: #FF1874; font-size: 14px; font-weight: 700;
   flex-shrink: 0;
}
.ng-popular-searches li a:hover { color: #FF1874; text-decoration: none; }

/* === A-Z & POPULAR NAME BLOCKS (restyled) === */
.bn-block {
   background: #fff;
   border: 1px solid #f0f0f4;
   border-radius: 14px;
   padding: 22px 24px;
   margin: 20px 0;
   box-shadow: 0 1px 8px rgba(0,0,0,.05);
}

/* Header inside block — clean accent bar, no boxed gradient */
.bn-block .common-title-hedings {
   background: transparent !important;
   border-left: none !important;
   border-radius: 0 !important;
   padding: 0 !important;
   margin: 0 0 16px !important;
}
.bn-block .common-title-hedings h1,
.bn-block .common-title-hedings h2 { margin: 0 0 4px; }
.bn-block .common-title-hedings p { font-size: 13px; color: var(--muted); }

/* A-Z tiles — pink theme, gender-tinted */
.bn-block .baby-names-abc { gap: 8px; padding: 4px 0 0; }
.bn-block .baby-names-abc a {
   width: 42px; height: 42px;
   border-radius: 10px;
   background: #fff9fb;
   border: 1.5px solid #fce4ef;
   color: var(--primary) !important;
   font-size: 15px;
}
.bn-block .baby-names-abc a:hover {
   background: var(--primary) !important;
   border-color: var(--primary) !important;
   color: #fff !important;
}
.bn-block .baby-names-abc.boy a {
   background: #f3f8ff; border-color: #dbeafe; color: #2563eb !important;
}
.bn-block .baby-names-abc.boy a:hover {
   background: #2563eb !important; border-color: #2563eb !important; color: #fff !important;
   box-shadow: 0 4px 8px rgba(37,99,235,.25);
}

/* Popular name list — tidy grid + gender colors */
.bn-block-popular #findname { padding: 4px 0 0; }
.bn-block-popular #findname a {
   background: #fafbfc;
   border: 1px solid #eef0f4;
   border-radius: 10px;
   padding: 11px 16px;
   font-weight: 600;
}
.bn-block-popular #findname a:hover { transform: translateX(3px); }

/* View All button — pill, gender accent */
.bn-block-popular .more-filter-button {
   border-radius: 24px !important;
   padding: 9px 26px !important;
   margin-top: 12px;
   display: inline-block;
}
.bn-block-boys  .more-filter-button { color: #2563eb !important; border-color: #2563eb !important; }
.bn-block-boys  .more-filter-button:hover { background: #2563eb !important; color: #fff !important; }

/* === SEARCH RESULTS HEADER + ACTIVE FILTERS === */
.bnf-search-results { margin: 8px 0 24px; }

.bnf-active-filters {
   display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
   background: #fff; border: 1px solid #f0f0f4; border-radius: 12px;
   padding: 12px 16px; margin-bottom: 16px;
}
.bnf-af-label { font-size: 13px; font-weight: 700; color: #64748B; margin-right: 2px; }
.bnf-af-tag {
   font-size: 12.5px; font-weight: 600; color: var(--primary);
   background: #FFE4EF; padding: 5px 12px; border-radius: 20px;
}
.bnf-af-clear {
   margin-left: auto; font-size: 12.5px; font-weight: 600;
   color: #64748B; text-decoration: none; border: 1.5px solid #e2e8f0;
   padding: 5px 14px; border-radius: 20px; transition: all .2s;
}
.bnf-af-clear:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

.bnf-sr-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bnf-sr-title { font-size: 22px; font-weight: 700; color: #1E293B; margin: 0; line-height: 1.3; }

/* === SINGLE BABY NAME DETAIL PAGE === */
article.baby_names .td-post-header { margin-bottom: 8px; }
article.baby_names .td-category { list-style: none; padding: 0; margin: 0 0 6px; display: flex; gap: 8px; flex-wrap: wrap; }
article.baby_names .td-category .entry-category a {
   font-size: 12px; font-weight: 700; color: var(--primary);
   background: #FFE4EF; padding: 3px 12px; border-radius: 20px; text-decoration: none;
}
article.baby_names .entry-title,
article.baby_names .td-post-title .entry-title {
   font-size: 28px; font-weight: 700; color: #1E293B; line-height: 1.25; margin: 4px 0 18px;
}
article.baby_names .td-post-featured-image { margin: 0 0 20px; }
article.baby_names .td-post-featured-image img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
article.baby_names .td-post-featured-image figcaption { font-size: 12px; color: #94a3b8; margin-top: 6px; }

/* Detail card (Name / Meaning / Gender / Religion …) */
article.baby_names .card {
   border: 1px solid #f0f0f4; border-radius: 14px; background: #fff;
   box-shadow: 0 1px 8px rgba(0,0,0,.05); overflow: hidden; margin: 0 0 24px;
}
article.baby_names .card-body { padding: 6px 24px; }
article.baby_names .list-group { margin: 0; padding: 0; list-style: none; }
article.baby_names .list-group-item {
   display: grid;
   grid-template-columns: 180px 12px 1fr;
   align-items: start;
   gap: 8px;
   padding: 14px 0;
   margin: 0;
   border: none;
   border-bottom: 1px solid #f0f0f4;
   background: transparent;
}
article.baby_names .list-group-item:last-child { border-bottom: none; }
article.baby_names .list-group-item .left {
   font-size: 14px; font-weight: 700; color: #64748B; margin: 0; line-height: 1.5;
}
article.baby_names .list-group-item .right { color: #cbd5e1; }
article.baby_names .list-group-item .catg-info {
   font-size: 14.5px; font-weight: 600; color: #1E293B; line-height: 1.5;
}
article.baby_names .catg-info a { color: var(--primary); text-decoration: none; }
article.baby_names .catg-info a:hover { text-decoration: underline; }
article.baby_names .catg-info p { margin: 0; display: inline; font-weight: 500; color: #475569; }

/* Long-form content below the card */
article.baby_names .td-post-content { margin: 8px 0 24px; line-height: 1.75; color: #334155; font-size: 15px; }
article.baby_names .td-post-content h2,
article.baby_names .td-post-content h3 { color: #1E293B; margin: 22px 0 10px; }
article.baby_names .td-post-content a { color: var(--primary); }

@media (max-width: 600px) {
   article.baby_names .entry-title { font-size: 23px; }
   article.baby_names .card-body { padding: 4px 16px; }
   article.baby_names .list-group-item { grid-template-columns: 120px 10px 1fr; gap: 6px; }
}

/* === NAME LISTING / SEARCH RESULTS GRID === */
.bnf-listing-section { margin: 24px 0; }

.bnf-listing-title {
   font-size: 20px; font-weight: 700; color: #1E293B;
   margin: 0 0 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bnf-sr-count {
   font-size: 12px; font-weight: 700; color: var(--primary);
   background: #FFE4EF; padding: 4px 12px; border-radius: 20px;
}

/* Gender tabs */
.bnf-gender-tabs {
   display: flex; gap: 8px; border: none;
   margin: 0 0 6px; padding: 0; list-style: none; flex-wrap: wrap;
}
.bnf-gender-tabs .nav-item { margin: 0; }
.bnf-gender-tabs .nav-link {
   border: 1.5px solid #f0e2ea; border-radius: 24px;
   padding: 7px 20px; font-size: 13px; font-weight: 600;
   color: #64748B; background: #fff; transition: all .2s; cursor: pointer;
}
.bnf-gender-tabs .nav-link:hover { border-color: var(--primary); color: var(--primary); }
.bnf-gender-tabs .nav-link.active {
   background: var(--primary); border-color: var(--primary); color: #fff;
   box-shadow: 0 3px 10px rgba(255,24,116,.25);
}

/* Names grid */
.bnf-sr-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 10px;
}
.bnf-name-card {
   display: flex; align-items: center; justify-content: space-between; gap: 8px;
   padding: 13px 16px; border-radius: 11px;
   background: #fff; border: 1.5px solid #f0f0f4;
   text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bnf-name-card:hover {
   transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.09);
   text-decoration: none; border-color: #e4d5de;
}
.bnf-name-text { font-size: 15px; font-weight: 600; color: #1E293B; line-height: 1.3; }
.bnf-name-gender {
   flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
}
.bnf-name-gender svg { width: 14px; height: 14px; }
/* gender accents */
.bnf-name-card.boy    { background: #f3f8ff; border-color: #dbeafe; }
.bnf-name-card.boy    .bnf-name-gender { background: #dbeafe; color: #2563eb; }
.bnf-name-card.girl   { background: #fdf2f8; border-color: #fce7f3; }
.bnf-name-card.girl   .bnf-name-gender { background: #fce7f3; color: #be185d; }
.bnf-name-card.unisex .bnf-name-gender { background: #ede9fe; color: #7c3aed; }
.bnf-name-card:hover .bnf-name-text { color: var(--primary); }

/* Pagination */
.bnf-pagination { margin: 26px 0 6px; }
.bnf-pagination .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.bnf-pagination .page-link {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 38px; height: 38px; padding: 0 12px;
   border: 1.5px solid #eef0f4; border-radius: 9px;
   color: #1E293B; font-size: 14px; font-weight: 600;
   text-decoration: none; transition: all .2s; background: #fff;
}
.bnf-pagination .page-link:hover { border-color: var(--primary); color: var(--primary); }
.bnf-pagination .page-item.active .page-link {
   background: var(--primary); border-color: var(--primary); color: #fff;
}
.bnf-pagination .page-item.disabled .page-link {
   opacity: .45; pointer-events: none;
}

/* No results */
.bnf-no-results {
   text-align: center; padding: 50px 20px;
   background: #fff; border: 1px solid #f0f0f4; border-radius: 14px;
}
.bnf-no-results-icon { font-size: 40px; margin-bottom: 10px; }
.bnf-no-results h3 { font-size: 18px; font-weight: 700; color: #1E293B; margin: 0 0 6px; }
.bnf-no-results p { font-size: 14px; color: #64748B; margin: 0; }
.bnf-no-results a { color: var(--primary); font-weight: 600; }

/* === HOME — never underline card links (incl. on hover) === */
.explorer-card, .explorer-card:hover,
.finder-card, .finder-card:hover,
.religion-card, .religion-card:hover,
.collection-card, .collection-card:hover,
.trending-card, .trending-card:hover,
.blog-card, .blog-card:hover,
.explore-link, .explore-link:hover,
.hero-cta-btn, .hero-cta-btn:hover,
.view-more-btn, .view-more-btn:hover,
.view-all, .view-all:hover,
.final-cta-btn, .final-cta-btn:hover,
.founder-link, .founder-link:hover,
.explore-btn, .explore-btn:hover {
   text-decoration: none !important;
}

/* === HOME HERO — Name Explorer finder in the right column === */
.hero-finder { min-width: 0; }
.hero-finder .baby-name-generator {
   margin: 0;
   max-width: 100%;
   box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.hero-finder .baby-name-generator h2 { font-size: 18px; }

/* Mobile submenu toggle — tap the parent/arrow to open, arrow flips up */
.navbar-content li.submenu-open > a::after { transform: rotate(180deg); }

@media (max-width: 768px) {
   /* Submenus open on tap (.submenu-open), not on unreliable touch-hover */
   .navbar-content li:hover > .sub-menu { display: none; }
   .navbar-content li.submenu-open > .sub-menu { display: flex; }

   /* CMS logo: keep it from overflowing the mobile header next to the hamburger */
   .logo-custom .custom-logo { max-height: 40px; }
}
@media (max-width: 480px) {
   .logo-custom .custom-logo { max-height: 34px; }
}

/* === HEADER / MENU / BREADCRUMB LEFT ALIGNMENT ===
   Force the logo bar, menu bar and content container to identical horizontal
   geometry (same max-width, centering, padding and box-sizing) so their left
   edges line up. Then zero the first menu link's left padding so the menu text
   starts flush with the logo, breadcrumb and content. */
@media (min-width: 769px) {
   .header-top,
   .navbar-content,
   .td-container {
      width: 100% !important;
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box !important;
   }
   /* Menu bar should fill 1200px (not shrink-wrap to the menu items) so its
      left edge matches the logo, breadcrumb and content. */
   .navbar-content > ul { width: 100%; }
   .navbar-content > ul > li:first-child > a { padding-left: 0 !important; }
}

/* ============================================================
   NICKNAMES / SURNAMES / QUOTES FINDER PAGES
   ============================================================ */

/* A-Z name blocks on nicknames & surnames landings.
   Turn the cramped flex row into a clean white card with a pink A-Z tile grid. */
.baby-common-views {
   display: block !important;
   background: #fff;
   border: 1px solid #f0f0f4;
   border-radius: 14px;
   padding: 20px 22px;
   margin-bottom: 16px;
   box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.baby-common-views:hover { background: #fff; border-color: #f0f0f4; }
.baby-girl-names-one { margin-bottom: 14px; gap: 10px; }
.ser-vi-textnu { font-size: 16px; font-weight: 700; color: #1E293B; }

.baby-girl-names-abc { display: flex; flex-wrap: wrap; gap: 8px; }
.baby-girl-names-abc a {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 42px; height: 42px; padding: 0 8px;
   border-radius: 10px;
   background: #fff9fb; border: 1.5px solid #fce4ef;
   color: var(--primary) !important; font-weight: 700; font-size: 14px;
   text-decoration: none; transition: all .2s;
}
.baby-girl-names-abc a:hover {
   background: var(--primary); border-color: var(--primary);
   color: #fff !important; text-decoration: none;
   transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255,24,116,.22);
}
.baby-girl-names-abc a .t-12 { color: inherit; background: none; padding: 0; }
.baby-girl-names-abc a.disabled-link { opacity: .35; pointer-events: none; }

/* Result table (nicknames & surnames listings) → uniform card-style cells */
table.table-bordered {
   width: 100%;
   table-layout: fixed;
   border-collapse: separate;
   border-spacing: 10px;
   border: none;
   margin: 4px 0 18px;
}
table.table-bordered td,
table.table-bordered th {
   width: 50%;
   border: 1px solid #f0f0f4 !important;
   border-radius: 11px;
   background: #fff;
   padding: 13px 16px;
   font-size: 15px;
   font-weight: 600;
   color: #1E293B;
   vertical-align: middle;
   word-break: break-word;
   transition: background .15s, border-color .15s;
}
table.table-bordered td:hover {
   border-color: #e4d5de !important;
   background: #fafbfc;
}
/* When a cell still contains a link (e.g. other listings), keep it themed. */
table.table-bordered td a {
   color: inherit;
   text-decoration: none;
   display: block;
}
table.table-bordered td a:hover { color: var(--primary); }

@media (max-width: 600px) {
   table.table-bordered td,
   table.table-bordered th { font-size: 14px; padding: 11px 12px; }
}

/* Empty-state notices */
.alert-warning,
.no-results {
   background: #fff;
   border: 1px solid #f0f0f4;
   border-left: 4px solid var(--primary);
   border-radius: 12px;
   padding: 20px 22px;
   color: #475569;
   font-size: 15px;
   margin: 16px 0;
}
.no-results h2 { font-size: 18px; font-weight: 700; color: #1E293B; margin: 0; }

/* Quotes — alphabet A-Z filter */
.alphabet-filter {
   display: flex; flex-wrap: wrap; gap: 8px;
   margin: 8px 0 22px;
}
.alphabet-filter a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 40px; height: 40px; border-radius: 9px;
   background: #fff9fb; border: 1.5px solid #fce4ef;
   color: var(--primary); font-weight: 700; font-size: 14px;
   text-decoration: none; transition: all .2s;
}
.alphabet-filter a:hover,
.alphabet-filter a.active {
   background: var(--primary); color: #fff; border-color: var(--primary);
   text-decoration: none;
}
.alphabet-filter a.active { box-shadow: 0 3px 8px rgba(255,24,116,.25); }

/* Quotes AJAX term pagination (authors / profession / topic) — plain <a> links */
.alphabet-instance .pagination {
   display: flex; flex-wrap: wrap; gap: 6px;
   justify-content: center; align-items: center;
   list-style: none; padding: 0; margin: 22px 0 8px;
}
.alphabet-instance .pagination a {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 38px; height: 38px; padding: 0 12px;
   border: 1.5px solid #eef0f4; border-radius: 9px;
   color: #1E293B; font-size: 14px; font-weight: 600;
   text-decoration: none; background: #fff; transition: all .2s;
}
.alphabet-instance .pagination a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.alphabet-instance .pagination a.active {
   background: var(--primary); border-color: var(--primary); color: #fff;
   box-shadow: 0 3px 8px rgba(255,24,116,.25);
}

/* Quotes — masonry cards */
.masonry { column-width: 280px; column-gap: 18px; margin: 12px 0; }
.masonry .card.masonry-item { break-inside: avoid; }
.card.masonry-item {
   border: 1px solid #f0f0f4; border-radius: 14px; overflow: hidden;
   background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.05);
   transition: box-shadow .2s, transform .2s; margin-bottom: 18px;
}
.card.masonry-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.card.masonry-item .card-img-top { width: 100%; height: auto; display: block; }
.card.masonry-item .card-body { padding: 16px 18px; }
.card.masonry-item .card-title { margin-bottom: 12px; }
/* Quote text — the prominent element, larger than the meta lines */
.card.masonry-item .card-title h5 { font-size: 20px; font-weight: 700; color: #1E293B; line-height: 1.4; margin: 0; }
.card.masonry-item .card-title h5 a { color: inherit; text-decoration: none; }
.card.masonry-item .card-title h5 a:hover { color: var(--primary); }

/* Author + "Also featured in" meta — smaller than the quote text */
.card.masonry-item .card-body a { color: var(--primary); text-decoration: none; font-weight: 600; }
.card.masonry-item .card-body a:hover { text-decoration: underline; }
.card.masonry-item .card-body .text-primary,
.card.masonry-item .card-body .text-secondary,
.card.masonry-item .card-body .text-info,
.card.masonry-item .quote-meta-authors,
.card.masonry-item .quote-meta-topics { font-size: 13px; line-height: 1.5; }

.quote-meta-authors { margin: 4px 0 6px; }
.quote-meta-authors a { color: var(--primary); text-decoration: none; font-weight: 600; }
.quote-meta-topics { color: #64748B; }
.quote-meta-topics span { font-weight: 600; }
.quote-meta-topics a { color: var(--purple); text-decoration: none; }
.quote-meta-topics a:hover { text-decoration: underline; }
.quote-share { padding-top: 10px; }

/* paginate_links() list output (quotes archive) */
.bnf-pagination ul.page-numbers {
   display: flex; gap: 6px; list-style: none; padding: 0; margin: 0;
   justify-content: center; flex-wrap: wrap;
}
/* Buttons only (the <ul> also carries .page-numbers, so scope to <li> children). */
.bnf-pagination li .page-numbers {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 38px; height: 38px; padding: 0 12px;
   border: 1.5px solid #eef0f4; border-radius: 9px;
   color: #1E293B; font-size: 14px; font-weight: 600;
   text-decoration: none; background: #fff; transition: all .2s;
}
.bnf-pagination li a.page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.bnf-pagination li .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.bnf-pagination li .page-numbers.dots { border: none; background: none; }

/* ============================================================
   CATEGORY / BLOG ARCHIVE (post-card grid + Latest Post sidebar)
   ============================================================ */
.cat-archive-header { margin: 6px 0 22px; }
.cat-archive-title { font-size: 26px; font-weight: 700; color: #1E293B; margin: 0 0 12px; }
.cat-archive-desc { font-size: 15px; line-height: 1.7; color: #475569; }
.cat-archive-desc a { color: var(--primary); }

.post-cards-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px;
   width: 100%;
}
/* Ad Inserter injects <div class="code-block"> ad blocks between the post
   cards. As grid items they eat cells and break the 3-column flow, so take any
   non-card child out of the grid entirely (display:none removes it from grid
   auto-placement, letting the cards flow cleanly 3-up). */
.post-cards-grid > *:not(.post-card) {
   display: none !important;
}
.post-card {
   background: #fff;
   border: 1px solid #f0f0f4;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 1px 8px rgba(0,0,0,.05);
   transition: box-shadow .2s, transform .2s;
   display: flex;
   flex-direction: column;
}
.post-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.1); transform: translateY(-3px); }
.post-card-thumb {
   position: relative; display: block;
   aspect-ratio: 16 / 11; background: #f1f5f9; overflow: hidden;
}
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.post-card:hover .post-card-thumb img { transform: scale(1.04); }
.post-card-thumb-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; }
.post-card-fav {
   position: absolute; top: 10px; right: 10px;
   width: 30px; height: 30px; border-radius: 50%;
   background: rgba(255,255,255,0.9); color: var(--primary);
   display: flex; align-items: center; justify-content: center;
   font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.post-card-body { padding: 16px 16px 18px; flex: 1; }
.post-card-title { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; }
.post-card-title a { color: #1E293B; text-decoration: none; }
.post-card-title a:hover { color: var(--primary); }
.post-card-cat { font-size: 13px; font-weight: 700; font-style: italic; color: #64748B; }

/* === "In This Article" — Table of Contents Plus, full width === */
#toc_container,
.toc_container {
   width: 100% !important;
   max-width: 100% !important;
   box-sizing: border-box;
   display: block;
   background: #fafbfc;
   border: 1px solid #eef0f4;
   border-radius: 12px;
   padding: 16px 20px;
   margin: 0 0 22px;
}
#toc_container .toc_title { font-size: 15px; font-weight: 700; color: #1E293B; }
#toc_container ul.toc_list { font-size: 14px; }
#toc_container ul.toc_list a { color: var(--primary); text-decoration: none; }
#toc_container ul.toc_list a:hover { text-decoration: underline; }

/* === SINGLE POST (details page) === */
.single-article { background: transparent; }
.single-cat-badge {
   display: inline-block; font-size: 12px; font-weight: 700;
   color: var(--primary); background: #FFE4EF;
   padding: 4px 14px; border-radius: 20px; text-decoration: none;
   text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px;
}
.single-cat-badge:hover { background: var(--primary); color: #fff; }
.single-title { font-size: 30px; font-weight: 700; color: #1E293B; line-height: 1.25; margin: 0 0 14px; }
.single-meta {
   display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
   font-size: 13px; color: #94a3b8; margin-bottom: 20px;
}
.single-meta-author { color: var(--primary); font-weight: 600; }
.single-meta-sep { color: #cbd5e1; }
.single-featured { margin: 0 0 24px; }
.single-featured img { width: 100%; height: auto; border-radius: 14px; display: block; }
.single-content { font-size: 16px; line-height: 1.8; color: #334155; }
.single-content p { margin: 0 0 18px; }
.single-content h2 { font-size: 22px; font-weight: 700; color: #1E293B; margin: 28px 0 12px; }
.single-content h3 { font-size: 18px; font-weight: 700; color: #1E293B; margin: 24px 0 10px; }
.single-content a { color: var(--primary); }
.single-content img { max-width: 100%; height: auto; border-radius: 10px; }
.single-content ul, .single-content ol { margin: 0 0 18px 22px; }
.single-content li { margin-bottom: 8px; }
.single-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.single-content table td, .single-content table th { border: 1px solid #e8ecf1; padding: 10px 12px; }
.single-content blockquote {
   border-left: 4px solid var(--primary); background: #fff5f8;
   margin: 0 0 18px; padding: 12px 18px; border-radius: 0 8px 8px 0; color: #475569;
}
.single-tags { margin: 22px 0 0; font-size: 13px; }
.single-tags span { font-weight: 700; color: #64748B; margin-right: 6px; }
.single-tags a {
   display: inline-block; background: #f1f5f9; color: #475569;
   padding: 4px 12px; border-radius: 20px; margin: 0 6px 6px 0;
   text-decoration: none; font-weight: 600;
}
.single-tags a:hover { background: var(--primary); color: #fff; }
.single-share { margin: 18px 0 0; }
.single-nav {
   display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
   margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #f0f0f4;
}
.single-nav a { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 14px; }
.single-nav a:hover { text-decoration: underline; }
.single-nav-next { margin-left: auto; text-align: right; }

/* Latest Post sidebar */
.latest-post-widget { background: transparent; }
.latest-post-title {
   font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
   color: #1E293B; margin: 0 0 16px; padding-bottom: 10px;
   border-bottom: 2px solid #f0e2ea; position: relative;
}
.latest-post-title::after {
   content: ''; position: absolute; left: 0; bottom: -2px;
   width: 60px; height: 2px; background: var(--primary);
}
.latest-post-item {
   display: flex; gap: 12px; align-items: flex-start;
   padding: 12px 0; border-bottom: 1px solid #f0f0f4; text-decoration: none;
}
.latest-post-item:last-child { border-bottom: none; }
.latest-post-thumb {
   flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
   background: #f1f5f9;
}
.latest-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-post-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.latest-post-name { font-size: 14px; font-weight: 600; color: #1E293B; line-height: 1.4; }
.latest-post-item:hover .latest-post-name { color: var(--primary); }
.latest-post-meta { font-size: 12px; color: #94a3b8; display: flex; align-items: center; gap: 10px; }
.latest-post-meta em { color: var(--primary); font-weight: 600; }

/* Keep 3 columns on desktop/laptop; drop only on small screens. */
@media (max-width: 680px) {
   .post-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 460px) {
   .post-cards-grid { grid-template-columns: 1fr; }
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
   .bn-cats-outer { grid-template-columns: 1fr; }
   .bn-cat-hidden.open { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
   .bn-hero { flex-direction: column; padding: 28px 20px; }
   .bn-hero-art { display: none; }
   .bn-hero-title { font-size: 22px; }
   .bn-cat-icon { width: 44px; height: 44px; font-size: 18px; }
   .bn-cat-links { grid-template-columns: 1fr; }
   .bn-articles-grid { grid-template-columns: 1fr; }
   .bn-alpha-link { width: 36px; height: 36px; font-size: 13px; }
   .bn-section-hdr-row { flex-direction: column; align-items: flex-start; }
   .bn-block { padding: 18px 16px; }
   .bn-block .baby-names-abc a { width: 36px; height: 36px; font-size: 13px; }
}
@media (max-width: 480px) {
   .bn-articles-grid { grid-template-columns: 1fr; }
   .bn-cta-banner { padding: 28px 20px; }
   .bnf-sr-grid { grid-template-columns: repeat(2, 1fr); }
   .bnf-name-text { font-size: 14px; }
}