/* ==========================================================================
   Module-specific overrides — Toyin John Modern Theme · v2.0.2
   Loaded AFTER main.css; uses tokens from main.css
   ========================================================================== */

/* ---------- Universal image safety (kills pixelation/stretching) ---------- */
.rich img,
.content-main img,
article img,
.sidebar-block img,
#shopProducts img,
.shop-product img,
.productItem img {
  max-width: 100%;
  height: auto;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* re-fall-through to high quality */
  image-rendering: auto;
}

/* Strip legacy width/height inline attributes that force squished sizes */
.rich img[width],
.content-main img[width],
.sidebar-block img[width] {
  height: auto !important;
}

/* Inline article images with text wrap stay readable */
.rich img.left,  .rich img[align="left"]  { float: left;  margin: 0 var(--sp-2) var(--sp-2) 0; max-width: 50%; }
.rich img.right, .rich img[align="right"] { float: right; margin: 0 0 var(--sp-2) var(--sp-2); max-width: 50%; }
.rich .clear { clear: both; }

/* ---------- Shop module ---------- */
.shop-main h1, .shop-main h2 { color: var(--c-purple-3); }

.shop-categories { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.shop-category { border-bottom: 1px solid var(--c-border-soft); }
.shop-category:last-child { border-bottom: 0; }
.shop-category a {
  display: block;
  padding: 0.6rem 0.7rem;
  color: var(--c-text);
  font-size: var(--fs-sm);
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.shop-category a:hover { background: var(--c-bg-alt); color: var(--c-purple); }
.shop-category.active a, .shop-category.selected a {
  background: var(--c-bg-alt);
  color: var(--c-purple);
  border-left-color: var(--c-magenta);
  font-weight: 600;
}

.shop-cart { list-style: none; padding: 0; margin: 0; }
.shop-cart__item { padding: 0.55rem 0.5rem; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-border-soft); }
.shop-cart__total { padding: 0.6rem 0.5rem; font-weight: 700; color: var(--c-purple); border-top: 2px solid var(--c-magenta); }
.shop-cart__action { margin-top: 0.5rem; padding: 0; }
.shop-cart__action .btn { width: 100%; }

#shopProducts, .shop-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.shop-product, .productItem, #shopProducts > div {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: var(--sp-2);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.shop-product:hover, .productItem:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shop-product img, .productItem img { border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.shop-product h3, .productItem h3, .productTitle {
  font-size: var(--fs-md);
  margin: var(--sp-1) 0;
}
.productPrice, .shop-product .price {
  color: var(--c-magenta);
  font-weight: 700;
  font-size: var(--fs-md);
}

/* Product detail rows (tables used by Cloudrexx Shop) */
.content-main table img,
.rich table img {
  max-width: 220px;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ---------- Blog / News ---------- */
.blog-post, #news, #newsList, .news_box {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.news_title, .blog-title {
  font-family: var(--ff-display);
  color: var(--c-purple-3);
}
.news_text { color: var(--c-text); }
.news_date { color: var(--c-magenta); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Calendar / Events ---------- */
#events, .events_list, .calendarEvent {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--sp-2);
  border: 1px solid var(--c-border-soft);
}
.event_date { color: var(--c-magenta); font-weight: 600; }

/* ---------- Contact form ---------- */
#contactFormular, .contact-form { max-width: 720px; }
#contactFormular label, .contact-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-purple);
}
#contactFormular .formItem, .contact-form .formItem { margin-bottom: var(--sp-2); }

/* ---------- Search results ---------- */
.searchResult { border-bottom: 1px solid var(--c-border-soft); padding: var(--sp-2) 0; }
.searchResult:last-child { border-bottom: 0; }
.searchResultTitle { font-family: var(--ff-display); font-size: var(--fs-lg); color: var(--c-purple); }

/* ---------- Newsletter ---------- */
.newsletter-form, #newsletterForm {
  background: var(--c-bg-alt);
  padding: var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--c-border-soft);
}

/* ---------- Login / Access ---------- */
.access-login-form, #accessLoginForm {
  max-width: 480px;
  background: #fff;
  padding: var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-sm);
}

/* ---------- Pagination ---------- */
.pagination, .pages {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  list-style: none; padding: 0; margin: var(--sp-3) 0;
}
.pagination a, .pages a, .pagination span, .pages span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 0.7rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
}
.pagination a:hover, .pages a:hover { background: var(--c-purple); color: #fff; border-color: var(--c-purple); }
.pagination .active, .pages .selected, .pagination .current, .pages .current {
  background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); font-weight: 600;
}

/* ---------- Frontend editor ---------- */
.fe-toolbar, #fe-toolbar { z-index: 999 !important; }

/* ---------- Legacy widgets ---------- */
.testimonial, .testimonial_box {
  background: var(--c-bg-alt);
  border-left: 4px solid var(--c-magenta);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--sp-2) 0;
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--c-purple-3);
}

.rich iframe, .rich .video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 0;
  box-shadow: var(--shadow-sm);
}

/* ---------- Cufon legacy text replacement ---------- */
cufon canvas { display: none !important; }
cufon, cufon.cufon, cufon.cufon-canvas {
  display: inline !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  font-family: inherit !important;
  color: inherit !important;
}
cufontext {
  display: inline !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  font-family: inherit !important;
  color: inherit !important;
}
.site-footer h3 cufon, .site-footer h4 cufon,
.site-footer h3 cufontext, .site-footer h4 cufontext {
  font-family: var(--ff-display) !important;
  color: #fff !important;
  font-size: inherit !important;
  font-weight: 600 !important;
}

/* ---------- "Quick Links" services article from block 33 ---------- */
article#services {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.services-title {
  font-family: var(--ff-display);
  color: var(--c-purple-3);
  font-size: var(--fs-md);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--c-magenta);
  display: inline-block;
  font-weight: 600;
}
.services-lists { list-style: none; padding: 0; margin: 0; }
.services-lists li { padding: 0.45rem 0; border-bottom: 1px solid var(--c-border-soft); }
.services-lists li:last-child { border-bottom: 0; }
.services-lists a {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: block;
  position: relative;
  padding-left: 1.1rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.services-lists a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--c-magenta);
  font-weight: 700;
}
.services-lists a:hover { color: var(--c-magenta); padding-left: 1.4rem; }

/* ---------- Footer link blocks (company-links, service-links, related-links, menu-link*) ---------- */
.site-footer .company-links,
.site-footer .service-links,
.site-footer .related-links,
.site-footer .menu-link1,
.site-footer .menu-link2,
.site-footer .menu-link3,
.site-footer .menu-link4 {
  font-size: var(--fs-sm);
}
.site-footer .list-2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .list-2 li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-footer .list-2 li:last-child { border-bottom: 0; }
.site-footer .list-2 a {
  color: rgba(255,255,255,0.78);
  font-size: var(--fs-sm);
  display: inline-block;
}
.site-footer .list-2 a:hover { color: var(--c-gold); }
.site-footer .list-2 span { display: inline; }

/* ---------- Sidebar legacy contact-us widget (used in content sidebar) ---------- */
.sidebar-block.contact-us img {
  display: none;
}

/* ---------- Cloudrexx-shop image rows (the old large book covers) ---------- */
.rich td img,
.content-main td img {
  max-width: 100%;
  height: auto;
}
.rich td:first-child img,
.content-main td:first-child img {
  max-width: 220px;
}
@media (min-width: 768px) {
  .rich td:first-child img,
  .content-main td:first-child img {
    max-width: 260px;
  }
}