/* ==========================================================================
   King Knows — "Fortune" editorial theme mix
   Loaded after style.css / responsive.css, so equal-specificity selectors
   below win the cascade without needing !important. This file is additive:
   it does not remove anything from style.css, it restyles it.
   ========================================================================== */

:root {
  --kk-black:        #0d0d0d;
  --kk-red:           #c8102e;
  --kk-red-dark:       #96081f;
  --kk-white:         #ffffff;
  --kk-offwhite:      #f7f5f1;
  --kk-hairline:      #e4e1da;
  --kk-text:          #1a1a1a;
  --kk-text-muted:    #5c5c5c;
  --kk-serif:         'Merriweather', Georgia, serif;
  --kk-sans:          'Nunito', 'Helvetica Neue', Arial, sans-serif;
}

/* -------------------------------------------------------------------- */
/* Global type + links                                                  */
/* -------------------------------------------------------------------- */

html { color: var(--kk-text); }
body { background: var(--kk-white); }

a { color: var(--kk-red); }
a:hover { color: var(--kk-red-dark); }

h1, h2.h1 { font-family: var(--kk-serif); font-weight: 700; color: var(--kk-black); letter-spacing: -0.01em; }
h2, h3.h2 { font-family: var(--kk-serif); font-weight: 700; color: var(--kk-black); }
h3, h4 { font-family: var(--kk-sans); font-weight: 800; color: var(--kk-black); }

input:focus, select:focus, textarea:focus { border-color: var(--kk-black); }
input:active, select:active, textarea:active { border-color: var(--kk-black); }

/* -------------------------------------------------------------------- */
/* Buttons                                                              */
/* -------------------------------------------------------------------- */

button, .btn { background: var(--kk-black); border-radius: 2px; font-family: var(--kk-sans); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; }
.btn.btn-primary { background: var(--kk-red); border-color: var(--kk-red); }
.btn.btn-primary:hover, a.btn.btn-primary:hover { background: var(--kk-red-dark); border-color: var(--kk-red-dark); }
.btn.btn-secondary { border-color: var(--kk-black); color: var(--kk-black); }
.btn.btn-secondary:hover, a.btn.btn-secondary:hover { border-color: var(--kk-red); color: var(--kk-red); background: transparent; }
.btn.btn-loading:before, .btn.btn-loading-nofa { }

.doublebutton a.active { background: var(--kk-black); border-color: var(--kk-black); }

.paginate a, .paginate span { border-color: var(--kk-hairline); color: var(--kk-black); font-family: var(--kk-sans); border-radius: 2px; }
.paginate a:hover { border-color: var(--kk-red); color: var(--kk-red); }
.paginate span.searchPaginationSelected { background: var(--kk-black); border-color: var(--kk-black); color: var(--kk-white); }

.btn.see_by { border-color: var(--kk-hairline); color: var(--kk-black); }
.see_by ul { border-color: var(--kk-black); }
.see_by ul a:hover { color: var(--kk-red); }

#related-searches a { border-color: var(--kk-hairline); color: var(--kk-text-muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
#related-searches a:hover { border-color: var(--kk-red); color: var(--kk-red); }

/* -------------------------------------------------------------------- */
/* Masthead / header                                                    */
/* -------------------------------------------------------------------- */

header { background: var(--kk-black); border-bottom: 3px solid var(--kk-red); padding-top: 16px; padding-bottom: 16px; }
body:not(.home) header { border-bottom: 3px solid var(--kk-red); }
body.home header, body.home section.home-search, body.home section.header-ad { background: var(--kk-black); }

header #logo a { color: var(--kk-white); font-family: var(--kk-serif); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
header #logo img { filter: brightness(0) invert(1); }

header .nav a { color: var(--kk-white); font-family: var(--kk-sans); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; font-weight: 800; border-radius: 2px; }
header .nav a:hover { border-color: var(--kk-red); color: var(--kk-red); background: transparent; }
header .nav a.publish { background: var(--kk-red); border-color: var(--kk-red); color: var(--kk-white); }
header .nav a.publish:hover { box-shadow: none; background: var(--kk-red-dark); border-color: var(--kk-red-dark); }
header .nav .my-account > strong { color: var(--kk-white); }
header .nav .my-account > span { color: #bbb; }
header .nav a.logout2 { color: #bbb; }
header .nav a.logout2:hover { background: rgba(255,255,255,0.1); color: var(--kk-white); }
.menu-icon span { background: var(--kk-white); }

body.home section.home-search {
  position: relative;
  background-color: var(--kk-black);
  background-image: linear-gradient(180deg, rgba(10,10,10,0.35), rgba(10,10,10,0.88)), url('../images/sections/masthead.jpg');
  background-size: cover;
  background-position: center;
}
section.home-search { padding-top: 30px; padding-bottom: 34px; }
section.home-search h1 { color: var(--kk-white); font-size: 34px; line-height: 38px; margin: 0 0 18px 0; }
.main-search > .cell label { color: #ddd; font-family: var(--kk-sans); text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; font-weight: 800; }
.main-search > .cell input[type="text"] { border-color: transparent; }
.main-search > .cell button { background: var(--kk-red); border-color: var(--kk-red); }
.main-search > .cell button:hover { background: var(--kk-red-dark); border-color: var(--kk-red-dark); }

div.breadcrumb, ul.breadcrumb li { color: var(--kk-text-muted); font-family: var(--kk-sans); }
div.breadcrumb a { color: var(--kk-text-muted); }
div.breadcrumb a:hover { color: var(--kk-red); }

/* -------------------------------------------------------------------- */
/* Homepage — "Explore Sections" rail (was the boxy #home-cats grid)    */
/* -------------------------------------------------------------------- */

#home-cats { background: var(--kk-offwhite); border-radius: 0; border-top: 1px solid var(--kk-hairline); border-bottom: 1px solid var(--kk-hairline); padding: 20px 13px 14px 25px; }
#home-cats h2 { font-family: var(--kk-sans); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; font-weight: 800; color: var(--kk-text-muted); margin: 0 0 14px 0; }
#home-cats .wrap { display: flex; flex-wrap: wrap; }
#home-cats a { float: none; width: auto; height: auto; display: flex; align-items: center; gap: 8px; padding: 9px 16px; margin: 0 8px 8px 0; background: var(--kk-white); border: 1px solid var(--kk-black); border-radius: 999px; transition: 0.15s; }
#home-cats a:hover { background: var(--kk-black); }
#home-cats a:hover strong, #home-cats a:hover .icon { color: var(--kk-white) !important; }
#home-cats a .icon { width: auto; display: inline-block; margin: 0; color: var(--kk-red); }
#home-cats a .icon i { font-size: 15px; line-height: 15px; }
#home-cats a strong { width: auto; display: inline; max-height: none; overflow: visible; font-family: var(--kk-sans); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; font-weight: 800; color: var(--kk-black); }

/* -------------------------------------------------------------------- */
/* Homepage — "Trending Locations" sidebar                              */
/* -------------------------------------------------------------------- */

#home-regs h2 { font-family: var(--kk-sans); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; font-weight: 800; color: var(--kk-text-muted); }
#home-regs a { color: var(--kk-text); border-bottom: 1px solid var(--kk-hairline); display: block; padding: 6px 0; }
#home-regs a:hover { color: var(--kk-red); text-decoration: none; }
#home-regs a i { color: var(--kk-red); }

/* -------------------------------------------------------------------- */
/* Editorial listing cards (News articles + Directory listings)         */
/* -------------------------------------------------------------------- */

.home-latest h2, .latest_ads h1 { font-family: var(--kk-sans); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; font-weight: 800; color: var(--kk-text-muted); border-top: 3px solid var(--kk-black); padding-top: 10px; }
body.search h1 { font-family: var(--kk-serif); }

.listing-grid .listing-card { border: none; border-bottom: 1px solid var(--kk-hairline); border-radius: 0; background: var(--kk-white); }
.listing-grid .listing-card .listing-thumb { border-bottom: none; }
.listing-grid .listing-card img { border-radius: 0; }

.listing-grid .listing-basicinfo a { font-family: var(--kk-serif); font-weight: 700; font-size: 18px; line-height: 22px; white-space: normal; color: var(--kk-black); -webkit-line-clamp: 3; }
.listing-grid .listing-basicinfo a:hover { color: var(--kk-red); text-decoration: none; }

/* Bring back the category eyebrow + date meta row that stock Sigma hides
   in grid view — this is the "section tag over a bold headline" look. */
.listing-grid .category { display: block; order: -1; font-family: var(--kk-sans); text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; font-weight: 800; color: var(--kk-red); margin: 0 0 6px 0; }
.listing-grid .date { display: block; font-family: var(--kk-sans); font-size: 12px; color: var(--kk-text-muted); margin: 6px 0 0 0; }
.listing-grid .location { display: none; }
.listing-grid .listing-data { display: flex; flex-direction: column; }
.listing-grid .listing-details { order: 2; }

.listing-list a { font-family: var(--kk-serif); font-weight: 700; font-size: 19px; color: var(--kk-black); }
.listing-list a:hover { color: var(--kk-red); }
.listing-list .listing-details { text-transform: uppercase; letter-spacing: 0.04em; }
.listing-list .listing-details span.category { color: var(--kk-red); font-weight: 800; }
.listing-card .currency-value { color: var(--kk-black); }
.listing-card .listing-attributes a { color: var(--kk-text-muted); }

/* Hero treatment: the first card in the homepage "Latest" grid reads as
   a lead story — wide image, larger serif headline, excerpt visible. */
.home-latest .listing-grid .listing-card:first-child {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 24px 0;
  border-bottom: 3px solid var(--kk-black);
  padding-bottom: 20px;
}
.home-latest .listing-grid .listing-card:first-child .listing-thumb {
  width: 58%;
  float: none;
  max-height: 380px;
  overflow: hidden;
}
.home-latest .listing-grid .listing-card:first-child .listing-thumb img { height: 100%; object-fit: cover; }
.home-latest .listing-grid .listing-card:first-child .listing-detail { width: 42%; float: none; padding: 0 0 0 28px; display: flex; align-items: center; }
.home-latest .listing-grid .listing-card:first-child .listing-data { padding: 0; }
.home-latest .listing-grid .listing-card:first-child .listing-basicinfo a { font-size: 32px; line-height: 36px; -webkit-line-clamp: unset; }
.home-latest .listing-grid .listing-card:first-child .listing-basicinfo .desc { display: block; color: var(--kk-text-muted); margin-top: 10px; }
.home-latest .listing-grid .listing-card:first-child .category { font-size: 12px; }

/* -------------------------------------------------------------------- */
/* Section banners — decorative header image on News/Directory category */
/* pages, one per King Knows section. Placeholder art generated in-house */
/* (no external source), to be swapped for real photography pre-launch. */
/* -------------------------------------------------------------------- */

.kn-section-banner {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  margin: 0 0 -1px 0;
}
.kn-section-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.05), rgba(10,10,10,0.55));
}
.kn-section-banner .wrapper { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: 16px; z-index: 1; }
.kn-section-eyebrow {
  color: var(--kk-white);
  text-transform: uppercase;
  font-family: var(--kk-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 800;
  background: var(--kk-red);
  padding: 5px 12px;
  display: inline-block;
}
.kn-section-banner-hotels      { background-image: url('../images/sections/hotels.jpg'); }
.kn-section-banner-property    { background-image: url('../images/sections/property.jpg'); }
.kn-section-banner-jobs        { background-image: url('../images/sections/jobs.jpg'); }
.kn-section-banner-marketplace { background-image: url('../images/sections/marketplace.jpg'); }
.kn-section-banner-events      { background-image: url('../images/sections/events.jpg'); }
.kn-section-banner-travel      { background-image: url('../images/sections/travel.jpg'); }
.kn-section-banner-lifestyle   { background-image: url('../images/sections/lifestyle.jpg'); }
.kn-section-banner-business    { background-image: url('../images/sections/business.jpg'); }

@media screen and (max-width: 767px) {
  .kn-section-banner { height: 140px; }
}

/* -------------------------------------------------------------------- */
/* Search sidebar / refine                                              */
/* -------------------------------------------------------------------- */

#sidebar .filters { background: var(--kk-offwhite); border-radius: 0; }
#sidebar h3 { font-family: var(--kk-sans); text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; color: var(--kk-text-muted); }
#sidebar .btn.btn-primary { background: var(--kk-black); border-color: var(--kk-black); }
#sidebar .btn.btn-primary:hover { background: var(--kk-red); border-color: var(--kk-red); }
.refine a { color: var(--kk-text); }
.refine a:hover, #sidebar a:hover { color: var(--kk-red); }
.widget-box { background: var(--kk-offwhite); }
.widget-box li a:hover { background: var(--kk-black); color: var(--kk-white); }

/* -------------------------------------------------------------------- */
/* Item detail page                                                     */
/* -------------------------------------------------------------------- */

#item-content h1 { font-family: var(--kk-serif); font-size: 42px; line-height: 46px; }
.item-header { border-top-color: var(--kk-hairline); border-bottom-color: var(--kk-hairline); }
.item-photos .thumbs img:hover { border-color: var(--kk-red); }
.item #comments { background: var(--kk-offwhite); }
.item #comments .reply-text:hover { color: var(--kk-red); }
.admin-options a:hover { border-color: var(--kk-black); }

/* -------------------------------------------------------------------- */
/* King Knows News / Directory plugin cards                             */
/* (the plugin echoes its own inline styles — these rules are a safety  */
/* net if that markup changes, and style the wrapping context around    */
/* it)                                                                  */
/* -------------------------------------------------------------------- */

.kn-featured-business, .kn-related-businesses .kn-featured-business { font-family: var(--kk-sans); }
#properties .kn-featured-business { margin: 16px 0; }
.kn-related-businesses h3 { font-family: var(--kk-sans); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; font-weight: 800; color: var(--kk-text-muted); border-top: 3px solid var(--kk-black); padding-top: 10px; margin-bottom: 14px; }

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

footer { background: var(--kk-black); }
footer .box > a { color: rgba(255,255,255,0.75); font-family: var(--kk-sans); text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; }
footer .box > a:hover { color: var(--kk-white); }
footer .copy, footer .language { color: rgba(255,255,255,0.5); }
footer .copy a, footer .language a { color: rgba(255,255,255,0.6); }
footer .language a.active { color: var(--kk-red); }

/* -------------------------------------------------------------------- */
/* Flash / error accents pulled to the red family for brand consistency */
/* -------------------------------------------------------------------- */

.flashmessage-error { background-color: var(--kk-red-dark); border-color: var(--kk-red); }
.flashmessage-ok { background-color: #2f6b3a; border-color: #1f4a27; }

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */

@media screen and (max-width: 980px) {
  .home-latest .listing-grid .listing-card:first-child .listing-thumb,
  .home-latest .listing-grid .listing-card:first-child .listing-detail { width: 100%; }
  .home-latest .listing-grid .listing-card:first-child .listing-detail { padding: 16px 0 0 0; }
}

@media screen and (max-width: 767px) {
  header { position: fixed; }
  header .nav { background: var(--kk-black); }
  header .nav a, header .nav a.active { color: var(--kk-white); border-bottom-color: rgba(255,255,255,0.1); }
  header .nav a:hover, header .nav a.active, header .nav a.publish, header .nav a.publish:hover { background: var(--kk-black); color: var(--kk-red); }
  .home-latest .listing-grid .listing-card:first-child .listing-basicinfo a { font-size: 24px; line-height: 28px; }
}