/**
 * Vendor content singles + WCFM store presentation.
 * Fixes square-logo-as-banner crop; frames article featured images;
 * styles article ↔ store ↔ hub navigation.
 */

/* ── Store banner: stop cropping square logos as wide covers ─────────────── */
body.wcfm-store-page #wcfmmp-store .banner_img,
body.wcfmmp-store-page #wcfmmp-store .banner_img {
  height: 280px !important;
  max-height: 280px !important;
  overflow: hidden !important;
  background: #0a2342 !important;
  background-size: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.wcfm-store-page #wcfmmp-store .banner_img img,
body.wcfmmp-store-page #wcfmmp-store .banner_img img {
  width: 100% !important;
  height: 100% !important;
  max-height: 280px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* When a real landscape banner is used, cover looks better — prefer contain
   until operators upload 1200×628 assets; logo-on-navy remains readable. */

body.wcfm-store-page #wcfmmp-store .header_area,
body.wcfmmp-store-page #wcfmmp-store .header_area {
  background: #fcfbf9;
}

body.wcfm-store-page #wcfmmp-store .wcfm_store_title,
body.wcfmmp-store-page #wcfmmp-store .wcfm_store_title {
  color: #0a2342;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Store identity row: logo + title readable on all viewports */
body.wcfm-store-page #wcfmmp-store .header_left,
body.wcfmmp-store-page #wcfmmp-store .header_left {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

body.wcfm-store-page #wcfmmp-store .logo_area,
body.wcfmmp-store-page #wcfmmp-store .logo_area,
body.wcfm-store-page #wcfmmp-store .logo,
body.wcfmmp-store-page #wcfmmp-store .logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #0a2342 !important;
  border: 2px solid #c9a734 !important;
  flex: 0 0 auto;
}

body.wcfm-store-page #wcfmmp-store .logo img,
body.wcfmmp-store-page #wcfmmp-store .logo img,
body.wcfm-store-page #wcfmmp-store .logo_area img,
body.wcfmmp-store-page #wcfmmp-store .logo_area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.wcfm-store-page #wcfmmp-store .address,
body.wcfmmp-store-page #wcfmmp-store .address {
  margin-top: 0.35rem;
  line-height: 1.45;
}

body.wcfm-store-page #wcfmmp-store .header_right,
body.wcfmmp-store-page #wcfmmp-store .header_right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Store articles grid readability */
body.wcfm-store-page #wcfmmp-store .article_area article,
body.wcfmmp-store-page #wcfmmp-store .wcfmmp_article,
body.wcfmmp-store-page #wcfmmp-store .post {
  background: #fff;
  border: 1px solid rgba(10, 35, 66, 0.1);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.25rem;
  margin-block-end: 1rem;
}

/* ── Vendor article / page singles ───────────────────────────────────────── */
body.wdi-vendor-content #main-content {
  background: #fcfbf9;
}

body.wdi-vendor-content #sidebar {
  display: none !important;
}

body.wdi-vendor-content #left-area {
  width: 100% !important;
  max-width: 46rem !important;
  margin-inline: auto !important;
  float: none !important;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

body.wdi-vendor-content #main-content .container:before {
  display: none !important;
}

/* Featured image: landscape-safe frame (16:9), no horizontal chop */
body.wdi-vendor-content .et_featured_image,
body.wdi-vendor-content .wdi-vc-featured,
body.wdi-vendor-content .post-thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #0a2342;
  margin-block-end: 1.25rem;
}

body.wdi-vendor-content .et_featured_image img,
body.wdi-vendor-content .wdi-vc-featured img,
body.wdi-vendor-content .post-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

body.wdi-vendor-content .entry-title,
body.wdi-vendor-content h1.entry-title,
body.wdi-vendor-content .main_title {
  color: #0a2342;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin-block-end: 0.75rem;
}

body.wdi-vendor-content .post-meta {
  color: rgba(10, 35, 66, 0.65);
  margin-block-end: 0.5rem;
}

body.wdi-vendor-content .wdi-vc-chrome {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid rgba(10, 35, 66, 0.1);
  border-radius: 10px;
}

body.wdi-vendor-content .wdi-vc-nav__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

body.wdi-vendor-content .wdi-vc-nav__link {
  color: #0a2342;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

body.wdi-vendor-content .wdi-vc-nav__link:hover {
  color: #c9a734;
  border-bottom-color: #c9a734;
}

body.wdi-vendor-content .wdi-vc-nav__link--store {
  color: #c9a734;
}

body.wdi-vendor-content .wdi-vc-byline {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(10, 35, 66, 0.7);
}

body.wdi-vendor-content .wdi-vc-byline__label {
  margin-inline-end: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}

body.wdi-vendor-content .wdi-vc-byline__store {
  font-weight: 700;
  color: #0a2342;
  text-decoration: none;
  border-bottom: 2px solid #c9a734;
}

body.wdi-vendor-content .wdi-vc-byline__store:hover {
  color: #c9a734;
}

body.wdi-vendor-content .entry-content {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}

body.wdi-vendor-content .entry-content > p:first-of-type {
  font-size: 1.1rem;
}

/* Membership teaser still readable under chrome */
body.wdi-vendor-content .wc-memberships-restriction-message {
  margin-block-start: 1rem;
}

@media (max-width: 780px) {
  body.wcfm-store-page #wcfmmp-store .banner_img,
  body.wcfmmp-store-page #wcfmmp-store .banner_img {
    height: 200px !important;
    max-height: 200px !important;
  }

  body.wdi-vendor-content #left-area {
    max-width: none !important;
  }
}