/* Indian Book Market — literary/professional theme overrides.
   Loaded after main.css/plugins.css; !important is used only where the
   existing theme sets colors via inline style="" attributes on markup
   we don't want to touch (header.php has duplicated header blocks). */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;600;700&display=swap');

:root {
  --ibm-navy: #16233e;
  --ibm-navy-deep: #0f1830;
  --ibm-gold: #b8860b;
  --ibm-gold-light: #d9a635;
  --ibm-cream: #f8f3e8;
  --ibm-ink: #241c14;
}

body {
  font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.footer-title h3,
.social-block .title,
.section-title,
.product-title,
.hero-title {
  font-family: 'Playfair Display', serif;
}

/* ---- Full-width sections ---- */
.container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 767px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ---- Top utility bar (site-topbar only — footer reuses .social-block
   for its "Stay Connected" widget, so it must not be caught by this) ---- */
.site-topbar {
  background: var(--ibm-navy) !important;
}
.site-topbar h5,
.site-topbar h5 b,
.site-topbar a,
.site-topbar i,
.site-topbar span {
  color: var(--ibm-cream) !important;
}
.site-topbar h5 {
  letter-spacing: 1px;
  font-size: 15px !important;
}
.site-topbar a:hover {
  color: var(--ibm-gold-light) !important;
}
.site-topbar .social-list .single-social {
  background: transparent !important;
  color: var(--ibm-cream) !important;
  border: 1px solid rgba(248, 243, 232, 0.35);
  border-radius: 50%;
}
.site-topbar .social-list .single-social:hover {
  background: var(--ibm-gold) !important;
  border-color: var(--ibm-gold);
}
.site-topbar .social-list .single-social a {
  color: inherit !important;
}

/* ---- Main navigation row ---- */
.sticky-header,
.main-header {
  border-bottom: 3px solid var(--ibm-gold);
}
ul.main-menu > li.menu-item > a {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
}
@media (min-width: 992px) {
  ul.main-menu > li.menu-item:hover > a {
    color: var(--ibm-gold) !important;
  }
}
/* "Be a Seller" as a CTA pill inside the nav */
ul.main-menu > li.menu-item > a[href="be.php"] {
  background: var(--ibm-gold);
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 3px;
}
ul.main-menu > li.menu-item > a[href="be.php"]:hover {
  background: var(--ibm-gold-light);
  color: #fff !important;
}
.btn--primary,
.btn-outlined--primary:hover {
  background: var(--ibm-navy) !important;
  border-color: var(--ibm-navy) !important;
}
.btn--primary:hover {
  background: var(--ibm-gold) !important;
  border-color: var(--ibm-gold) !important;
}

.header-middle .main-navigation {
  margin-left: 30px;
}

/* Sticky (scrolled) header clone has less horizontal room than the main
   header — tighten menu-item spacing so all 7 items fit on one line */
.sticky-nav-group ul.main-menu > li.menu-item > a {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
.sticky-nav-group ul.main-menu > li.menu-item > a[href="be.php"] {
  padding: 6px 12px !important;
}
/* the theme hardcodes width:78px on this one link, too narrow for the
   text on a single line — let it size to content instead */
ul.main-menu > li.menu-item > a[href="about.php"] {
  width: auto !important;
  white-space: nowrap;
}

/* ---- Header-bottom right group: phone + cart, side by side ---- */
.header-right-group {
  gap: 28px;
}
.header-right-group .header-phone {
  padding-right: 24px;
  border-right: 1px solid #e5e5e5;
  white-space: nowrap;
}

/* ---- Homepage full-width sections ---- */
/* .feature-box is a flex row; the image wrapper had no explicit width,
   so at full container width the img (width:100% of an auto-sized flex
   item) shrank to its intrinsic size instead of filling the column. */
.feature-box {
  align-items: stretch;
}
.feature-box > div:not(.icon) {
  flex: 1 1 auto;
  width: 100%;
}
.feature-box .promo-image {
  height: 100%;
}
.feature-box .promo-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Best Seller Books band: swap the mismatched stock-photo background
   (designed for a much narrower container) for the site's own palette */
section[data-bg="image/bg-images/best-seller-bg.jpg"] {
  background-image: none !important;
  background-color: var(--ibm-cream);
  border-top: 1px solid #e9e0cd;
  border-bottom: 1px solid #e9e0cd;
}

/* ---- Footer ---- */
/* Background spans full width, but content is capped and centered —
   at true edge-to-edge width, 4 sparse columns (esp. the 4-icon "Stay
   Connected" one) left large, unbalanced gaps instead of a clean grid. */
.site-footer {
  background: var(--ibm-cream);
}
.site-footer > .container-fluid,
.footer-bottom > .container-fluid {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer .section-padding {
  padding-top: 60px;
}
.footer-title h3,
.social-block .title {
  color: var(--ibm-navy) !important;
  position: relative;
  padding-bottom: 10px;
  text-align: left;
}
.footer-title h3::after,
.social-block .title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--ibm-gold);
}
.footer-contact .label {
  color: var(--ibm-navy) !important;
}
.normal-list li:hover a {
  color: var(--ibm-gold) !important;
}
.site-footer .social-list .single-social {
  background: var(--ibm-navy) !important;
  transition: transform .2s ease, background .2s ease;
}
.site-footer .social-list .single-social:hover {
  background: var(--ibm-gold) !important;
  transform: translateY(-3px);
}
.footer-bottom {
  background: var(--ibm-navy-deep) !important;
}
.footer-bottom .copyright-heading {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ibm-cream) !important;
}
.footer-bottom .copyright-text a {
  color: var(--ibm-gold-light) !important;
}