/*
Theme Name:     IO-Kenos Child - AI Enhanced
Theme URI:      https://webbdesignz.com
Description:    Child theme for IO-Kenos. Provides a safe override layer for custom page templates, city landing pages, AI-generated content, and design system overrides without modifying the parent IO-Kenos theme. Parent theme updates from IO will not affect customizations made here.
Author:         Brian Webb
Author URI:     https://webbdesignz.com
Template:       io-kenos
Version:        1.1.0
License:        GNU General Public License v3 or later
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:    io-kenos-child
Tags:           child-theme, inflatableoffice, party-rental
*/

/* ==========================================================================
   WebbDesignz Child Theme — Custom Styles v1.1.0
   Updated: April 22, 2026
   - IO category grid styles
   - Blog card styles
   - IO text/heading color fixes
   - Elfsight branding hide
   - IO H1 suppression
   ========================================================================== */


/* ==========================================================================
   IO CATEGORY GRID — City Pages & Inventory
   ========================================================================== */

.io_catdiv2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.io_item2_listcat {
    border: 2px solid #7506EC !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    min-height: auto !important;
}

.io_item2_listcat:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(117,6,236,0.5) !important;
}

.io_item2_listcat img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    background: #fff !important;
}

.cat_div_inner {
    padding: 12px 14px 14px !important;
}

.io_item2_listcat a,
.io_item2_listcat .cat_div a {
    color: #7506EC !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

.io_cat_longdescription,
.io_cat_longdescription p {
    color: #333333 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 6px 0 0 !important;
}

/* Hide Set Event Date button */
.pageDateRangeWrapper {
    display: none !important;
}

/* Hide IO auto-generated H1 */
h1.catNameIO,
.io_category_wrapper h1 {
    display: none !important;
}

/* IO landing pages text */
.io_landingpages,
.io_landingpages span,
.io_landingpages p {
    color: #ffffff !important;
    text-align: center !important;
}


/* ==========================================================================
   BLOG CARDS
   ========================================================================== */

.elementor-post__card {
    background: #ffffff !important;
    border: 2px solid #7506EC !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.elementor-post__card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(117,6,236,0.4) !important;
}

.elementor-post__title a {
    color: #7506EC !important;
}

.elementor-post__excerpt p {
    color: #333333 !important;
}


/* ==========================================================================
   ELFSIGHT
   ========================================================================== */

.eapps-widget-toolbar,
.eapps-link {
    display: none !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .io_catdiv2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .io_catdiv2 {
        grid-template-columns: 1fr !important;
    }
}
/* Rentals/Inventory page content */
.page-id-[ID] .entry-content h1,
.page-id-[ID] .entry-content h2,
.page-id-[ID] .entry-content h3,
.page-id-[ID] .entry-content p,
.page-id-[ID] .entry-content {
    color: #ffffff !important;
    text-align: center !important;
}
.io_all_cat_page h1,
.io_all_cat_page h2,
.io_all_cat_page h3,
.io_all_cat_page p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content > p {
    color: #ffffff !important;
}
/* Suppress the auto-generated "Inventory for Rent" H1 on the rentals page.
   Keep only the editor-authored H1 that sits in content. */
.page-id-1311 .page-title,
.page-id-1311 .elementor-page-title,
.page-id-1311 h1.catNameIO,
.page-id-1311 .io_landingpages > h1:first-child {
  display: none !important;
}
/* ============================================================
   INVENTORY PAGE — /rentals/ (page ID 1311)
   ============================================================ */

/* 1. Kill the "Inventory for Rent" H1 — IO-generated.
   Broader selector catches it regardless of theme wrap. */
.page-id-1311 h1.entry-title,
.page-id-1311 .entry-header h1,
.page-id-1311 header h1,
.page-id-1311 .page-title,
.page-id-1311 .elementor-page-title,
.page-id-1311 h1.catNameIO,
.page-id-1311 .io_landingpages > h1,
.page-id-1311 .io_landingpages > h1:first-child {
  display: none !important;
}

/* 2. Constrain the intro paragraph width to match the grid.
   Keeps the H1, intro, and H2 centered and readable. */
.page-id-1311 .entry-content > h1,
.page-id-1311 .entry-content > p:first-of-type,
.page-id-1311 .entry-content > p:nth-of-type(1),
.page-id-1311 .entry-content > h2:first-of-type {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 3. Upgrade category name visual weight — IO renders these
   as links or spans. Force h3-appropriate styling. */
.page-id-1311 .io_item2_listcat a,
.page-id-1311 .io_all_cat_rental_name,
.page-id-1311 .io_catdiv2 strong {
  font-size: 1.25rem;
  font-weight: 700;
}
/* ============================================================
   INVENTORY PAGE (/rentals/) — text width constraint
   Targets the Elementor-authored H1, H2, and paragraph blocks
   ============================================================ */
.page-id-1311 .entry-content,
.page-id-1311 .elementor-widget-theme-post-content .elementor-widget-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Make sure H1, paragraph, H2 center cleanly */
.page-id-1311 .entry-content > h1,
.page-id-1311 .entry-content > h2,
.page-id-1311 .entry-content > p {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}