/*
Theme Name: BlogHash Child - WEE
Template: bloghash
Version: 1.1.0
Description: Child theme for Writers Exchange E-Publishing.
Author: Sandy Cummins
*/

/* ============================================================
   COLOUR & SPACING VARIABLES — edit these to change colours
   ============================================================ */
:root {
  --wee-top-bar-bg:         #4a5a9a;
  --wee-top-bar-text:       #ffffff;
  --wee-accent:             #2b4fb5;
  --wee-body-bg:            #2b4fb5;
  --wee-max-width:          1400px;
  --wee-cover-max-width:    220px;
  --wee-cover-max-height:   320px;
}


/* ============================================================
   1. GLOBAL LAYOUT — fix narrow column on wide monitors
   ============================================================ */

body {
  background-color: var(--wee-body-bg);
}

/* Make all major wrappers percentage-based with a sensible cap */
.site,
#page,
.bloghash-wrapper,
.site-inner {
  max-width: var(--wee-max-width) !important;
  width: 94% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Content column — takes the bulk of the width */
#primary,
.content-area {
  width: 70% !important;
  float: left !important;
  box-sizing: border-box;
}

/* Sidebar column */
#secondary,
.widget-area {
  width: 28% !important;
  float: right !important;
  box-sizing: border-box;
}

/* Clearfix */
.site-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Stack on mobile */
@media (max-width: 900px) {
  #primary,
  .content-area,
  #secondary,
  .widget-area {
    width: 100% !important;
    float: none !important;
  }
}


/* ============================================================
   2. HEADER — replace site title text with banner image
   ============================================================
   Go to Appearance > Header to upload your banner image.
   Once uploaded, the text title hides and your image shows.
   ============================================================ */

/* Hide text site title */
.site-branding .site-title,
.site-branding .site-description {
  display: none !important;
}

/* Banner image: full width, capped height, never crops */
.custom-header,
.site-branding,
#masthead .site-branding {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.custom-header img,
.header-image img,
#masthead img.header-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: center top !important;
}

@media (max-width: 600px) {
  .custom-header img,
  .header-image img {
    max-height: 160px !important;
  }
}


/* ============================================================
   3. TOP BAR — social links / announcement strip
   ============================================================ */

.bloghash-top-bar,
.top-bar,
#top-bar {
  background-color: var(--wee-top-bar-bg) !important;
  color: var(--wee-top-bar-text) !important;
  width: 100% !important;
  box-sizing: border-box;
}

.bloghash-top-bar a,
.top-bar a {
  color: var(--wee-top-bar-text) !important;
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

.main-navigation,
#site-navigation {
  width: 100% !important;
  box-sizing: border-box;
}


/* ============================================================
   5. CONTENT IMAGES — respect alignment, never overflow
   ============================================================ */

img,
.entry-content img,
.page-content img {
  max-width: 100% !important;
  height: auto !important;
}

.aligncenter,
.wp-block-image.aligncenter,
p > img.aligncenter {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.alignleft,
img.alignleft {
  float: left !important;
  margin-right: 1.5em !important;
  margin-bottom: 0.75em !important;
}

.alignright,
img.alignright {
  float: right !important;
  margin-left: 1.5em !important;
  margin-bottom: 0.75em !important;
}


/* ============================================================
   6. BOOK COVERS — constrain size on genre listing pages
   ============================================================ */

.post-thumbnail,
article .post-thumbnail {
  overflow: visible !important;
  max-width: var(--wee-cover-max-width) !important;
}

.post-thumbnail img,
article .post-thumbnail img {
  max-width: var(--wee-cover-max-width) !important;
  max-height: var(--wee-cover-max-height) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.post-thumbnail:hover img,
article .post-thumbnail:hover img {
  transform: scale(1.06) !important;
}

@media (max-width: 600px) {
  .post-thumbnail img,
  article .post-thumbnail img {
    max-width: 90% !important;
    max-height: none !important;
  }
}


/* ============================================================
   7. YOU MAY HAVE MISSED — less text overlay on images
   ============================================================ */

.bloghash-posts-you-might-like .post-categories,
.bloghash-posts-you-might-like .entry-meta,
.posts-you-might-like .post-categories,
.posts-you-might-like .entry-meta {
  font-size: 0.7em !important;
  opacity: 0.85 !important;
}

.bloghash-posts-you-might-like .post-thumbnail img,
.posts-you-might-like .post-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-height: 200px !important;
}


/* ============================================================
   8. SIDEBAR
   ============================================================ */

.widget-title,
.widgettitle {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#secondary a,
.widget-area a {
  color: #ccd9ff !important;
}

#secondary a:hover,
.widget-area a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Hide post count numbers in Archives widget */
.widget_archive .post-count {
  display: none !important;
}


/* ============================================================
   9. FOOTER
   ============================================================ */

#colophon,
.site-footer {
  width: 100% !important;
  box-sizing: border-box;
  clear: both;
}

.footer-widgets,
#colophon .widget-area {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2em !important;
  padding: 2em !important;
  box-sizing: border-box;
}

.footer-widgets .widget,
#colophon .widget {
  flex: 1 1 200px !important;
  min-width: 200px !important;
}


/* ============================================================
   10. ADVERTISEMENT / FEATURED IMAGES — never crop
   ============================================================ */

.bloghash-advertisement img,
.bloghash-featured-items img,
.bloghash-featured img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}


/* ============================================================
   11. WOOCOMMERCE — full width cart/checkout, no sidebar
   ============================================================ */

.woocommerce-cart #primary,
.woocommerce-checkout #primary {
  width: 100% !important;
  float: none !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.woocommerce-cart #secondary,
.woocommerce-checkout #secondary {
  display: none !important;
}


/* ============================================================
   12. GENERAL
   ============================================================ */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}