/*
 Theme Name:   TechTank Child Theme
 Theme URI:    https://techtankholdings.com
 Description:  Hello Elementor Child Theme for TechTank Holdings
 Author:       TechTank Holdings
 Author URI:   https://techtankholdings.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  techtank-child
*/

:root {
  --blue:       #1c3462;
  --blue-dark:  #121f3d;
  --blue-mid:   #2a4a8a;
  --cream:      #c9c898;
  --cream-light:#e8e7c8;
  --cream-pale: #f5f4e8;
  --dark-cream: #989767;
  --dark-cream-deep: #6e6d49;
}

/* ── Global ── */
body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--cream-pale);
  color: var(--blue-dark);
}

a {
  color: var(--blue);
  transition: color 0.2s;
}

a:hover {
  color: var(--dark-cream);
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--blue);
}

/* ── Buttons ── */
.elementor-button,
.wp-block-button__link {
  background-color: var(--blue) !important;
  color: var(--cream-light) !important;
  border-radius: 2px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s !important;
}

.elementor-button:hover,
.wp-block-button__link:hover {
  background-color: var(--blue-dark) !important;
}

.elementor-button.cream,
.btn-cream {
  background-color: var(--cream) !important;
  color: var(--blue-dark) !important;
}

.elementor-button.cream:hover {
  background-color: var(--dark-cream) !important;
}

/* Constrain product page to match site width */
.woocommerce div.product {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.woocommerce-product-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ── Product page: two-column grid layout ─────────────────────────── */
div.product {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    grid-template-rows: auto;
    column-gap: 48px;
    align-items: start;
}

/* Image column — left, smaller */
.woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    grid-column: 1;
    grid-row: 1;
}

/* Cap the image size */
.woocommerce-product-gallery img {
    max-width: 350px !important;
    width: 100% !important;
    height: auto;
    display: block;
}

/* Summary column — right, full height */
.summary.entry-summary {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
    clear: none !important;
}

/* Center the price */
.summary .price {
    text-align: center !important;
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

/* Full-width elements below the two columns */
.woocommerce-tabs,
.up-sells,
.related {
    grid-column: 1 / -1;
}

/* ── Responsive: stack on mobile ─────────────────────────────────── */
@media (max-width: 768px) {
    div.product {
        grid-template-columns: 1fr !important;
    }

    .woocommerce-product-gallery {
        grid-column: 1;
        grid-row: 1;
    }

    .summary.entry-summary {
        grid-column: 1;
        grid-row: 2;
    }
}

.loop-short-description {
    font-size: 0.875rem;
    color: #555;
    margin: 8px 0 12px;
    line-height: 1.5;
}

/* Show category title and description */
.woocommerce-products-header {
    display: block !important;
    padding: 30px 0 10px;
}
.woocommerce-products-header__title {
    display: block !important;
    font-size: 2rem;
    margin-bottom: 10px;
}
.woocommerce-category-description {
    display: block !important;
    font-size: 1rem;
    color: #444;
    margin-bottom: 24px;
    line-height: 1.7;
    max-width: 800px;
}

.custom-category-header {
    padding: 30px 0 10px;
}
.custom-category-title {
    font-size: 2rem;
    margin-bottom: 10px;
}
.custom-category-desc {
    font-size: 1rem;
    color: #444;
    margin-bottom: 24px;
    line-height: 1.7;
    max-width: 800px;
}

/* Restore list formatting in product card short descriptions */
.loop-short-description ul {
    list-style: disc;
    padding-left: 20px;
    margin: 8px 0;
}
.loop-short-description ul li {
    margin-bottom: 4px;
}