/*
Theme Name: Aestazia Child
Theme URI: https://github.com/ElisabettaCarrara/aestazia-child
Author: Elisabetta Carrara
Author URI: https://elica-webservices.it/
Description: Aestazia Child is a lightweight child theme based on the Aestazia ClassicPress Theme, featuring custom colors, full-width templates, and a widgetized footer.
Version: 1.2.1
Requires PHP: 8.0
Requires CP: 2.0
Tested up to CP: 2.7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: child-theme, custom-colors, full-width-template, footer-widgets, two-columns
Text Domain: aestazia-child
Template: aestazia

Copyright (C) 2026 Elisabetta Carrara.

Aestazia Child ClassicPress Theme is licensed under the GPL v2 or later. Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =========================
   1. DESIGN TOKENS (BOOTSTRAP-DRIVEN)
   ========================= */

:root {

  /* === Bootstrap Core (fallback defaults) === */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-light: #f8f9fa;
  --bs-dark: #1c4597;

  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;

  --bs-heading-color: #212529;

  --bs-border-color: rgba(0,0,0,0.175);

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #0a58ca;

  /* Buttons */
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-color: #ffffff;

  /* Effects */
  --focus-ring-primary: rgba(13, 110, 253, 0.25);
  --focus-ring-secondary: rgba(108, 117, 125, 0.25);

  /* Post Card */
  --post-card-radius: 5px;
  --post-card-border: var(--bs-border-color);
  --post-card-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}


/* =========================
   2. BASE TYPOGRAPHY
   ========================= */

body {
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  font-family: var(--font-body, inherit);
}

h1, h2, h3 {
  color: var(--bs-heading-color);
  font-family: var(--font-heading-main, inherit);
}

h4, h5, h6 {
  color: var(--bs-heading-color);
  font-family: var(--font-heading-sub, inherit);
}


/* =========================
   3. LINKS
   ========================= */

a {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}


/* =========================
   4. BUTTONS
   ========================= */

.btn-primary {
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

.btn-primary:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem var(--focus-ring-primary);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
}

.btn-secondary:hover {
  filter: brightness(0.9);
}

.btn-secondary:focus {
  box-shadow: 0 0 0 0.25rem var(--focus-ring-secondary);
}


/* =========================
   5. NAVBAR
   ========================= */

.navbar {
  border-bottom: 3px solid var(--bs-primary);
}

.navbar a:hover {
  color: var(--bs-primary);
}


/* =========================
   6. POST CARD COMPONENT
   ========================= */
 
/*
 * Only .post-card is targeted here.
 * .hentry and .type-post have been removed — they would accidentally
 * style page templates (content-page.php etc.) which are not cards.
 */
.post-card {
  border: 1px solid var(--post-card-border);
  border-radius: var(--post-card-radius);   /* --post-card-radius: 5px (already in :root) */
  padding: 10px;
  margin: 10px;
  background-color: var(--bs-body-bg);
  box-shadow: var(--post-card-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
 
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
 
/* Thumbnail inside card — no extra margin; gap is handled by ps-3 on .post-content */
.post-card .post-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--post-card-radius) - 2px);
  object-fit: cover;
}
 
/* Title link */
.post-card .entry-title a {
  color: var(--bs-link-color);
}
 
.post-card .entry-title a:hover {
  color: var(--bs-primary);
}
 
/* Read More button row */
.read-more {
  display: inline-block;
}

/* =========================
   7. CATEGORY SYSTEM (SCOPED)
   ========================= */

.post-card[class*="primary-cat-"] {
  border-color: var(--post-card-border, var(--bs-border-color));
}


/* =========================
   8. META
   ========================= */

.entry-meta {
  font-size: 0.9rem;
  color: var(--bs-body-color);
  opacity: 0.8;
}


/* =========================
   9. WIDGETS
   ========================= */

.widget {
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.widget-title {
  color: var(--bs-heading-color);
  margin-bottom: 1rem;
}

/* Lists within widgets */
.widget ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.widget li {
  margin-bottom: 0.5rem;
}

.widget li:last-child {
  margin-bottom: 0;
}

.widget a {
  color: var(--bs-body-color);
}

.widget a:hover {
  color: var(--bs-primary);
}

/* Forms, Inputs, Selects inside widgets */
.widget select,
.widget input[type="text"],
.widget input[type="search"],
.widget input[type="email"] {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  margin-bottom: 0.5rem;
}

.widget select:focus,
.widget input[type="text"]:focus,
.widget input[type="search"]:focus,
.widget input[type="email"]:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Calendar Widget */
#wp-calendar,
.wp-calendar-table {
  width: 100%;
  border-collapse: collapse;
  background-color: transparent !important;
  color: inherit;
}

#wp-calendar caption,
.wp-calendar-table caption {
  font-family: var(--font-heading-main, inherit);
  color: var(--bs-heading-color) !important;
  font-weight: 600;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

#wp-calendar th,
#wp-calendar td,
.wp-calendar-table th,
.wp-calendar-table td {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid var(--bs-border-color) !important;
}

#wp-calendar th,
.wp-calendar-table th {
  background-color: var(--bs-light) !important;
  font-weight: 600;
  color: var(--bs-heading-color) !important;
}

#wp-calendar tbody td,
.wp-calendar-table tbody td {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

#wp-calendar #today,
.wp-calendar-table #today {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  font-weight: 700;
}

#wp-calendar #today a,
.wp-calendar-table #today a {
  color: #fff !important;
}


/* =========================
   10. TAGS / BADGES
   ========================= */

.badge,
.tagcloud a {
  background: var(--bs-secondary);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

.tagcloud a:hover {
  background: var(--bs-primary);
  color: #fff;
}


/* =========================
   11. BLOCKQUOTES
   ========================= */

blockquote {
  border-left: 4px solid var(--bs-primary);
  padding-left: 1rem;
  color: var(--bs-heading-color);
}


/* =========================
   12. CODE
   ========================= */

pre,
code {
  background: var(--bs-light);
  padding: 2px 4px;
  border-radius: 3px;
}


/* =========================
   13. PAGINATION
   ========================= */

.page-link {
  color: var(--bs-link-color);
}

.page-link:hover {
  color: var(--bs-link-hover-color);
}

.page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}


/* =========================
   14. COMMENTS
   ========================= */

.comment-body {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
}


/* =========================
   15. SEARCH
   ========================= */

.search-form .search-submit {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

.search-form .search-submit:hover {
  filter: brightness(0.9);
}


/* =========================
   16. HEADER
   ========================= */

.site-branding img {
  padding: 20px 0;
}


/* =========================
   17. FOOTER
   ========================= */

.site-footer {
  background: var(--bs-dark);
  color: var(--bs-light);
  padding: 40px 0 20px;
}

.site-footer a {
  color: var(--bs-light);
}

.site-footer a:hover {
  color: var(--bs-primary);
}

.footer-widget-title {
  color: var(--bs-light);
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.site-footer ul {
  list-style: none;
  padding-left: 0;
}

.site-footer li {
  margin-bottom: 6px;
}

.site-info {
  margin-top: 20px;
  font-size: 0.9rem;
}

/* --- Dark Background Overrides for Footer Widgets --- */
.site-footer .widget {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.site-footer .widget-title,
.site-footer .widget a {
  color: var(--bs-light);
}

.site-footer .widget a:hover {
  color: var(--bs-primary);
}

.site-footer .widget select,
.site-footer .widget input[type="text"],
.site-footer .widget input[type="search"],
.site-footer .widget input[type="email"] {
  background-color: transparent;
  color: var(--bs-light);
  border-color: rgba(255, 255, 255, 0.2);
}

.site-footer .widget select:focus,
.site-footer .widget input[type="text"]:focus,
.site-footer .widget input[type="search"]:focus,
.site-footer .widget input[type="email"]:focus {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
}

/* Footer Calendar overrides */
.site-footer #wp-calendar caption,
.site-footer .wp-calendar-table caption {
  color: var(--bs-light) !important;
}

.site-footer #wp-calendar th,
.site-footer #wp-calendar td,
.site-footer .wp-calendar-table th,
.site-footer .wp-calendar-table td {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--bs-light) !important;
}

.site-footer #wp-calendar th,
.site-footer .wp-calendar-table th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--bs-light) !important;
}

.site-footer #wp-calendar tbody td,
.site-footer .wp-calendar-table tbody td {
  background-color: transparent !important;
}

.site-footer #wp-calendar a,
.site-footer .wp-calendar-table a {
  color: var(--bs-light) !important;
}

.site-footer #wp-calendar a:hover,
.site-footer .wp-calendar-table a:hover {
  color: var(--bs-primary) !important;
}


/* =========================
   18. ALTERNATE POST LAYOUTS
   ========================= */
 
/*
 * .post-card-inner is the flex container inside every .post-card.
 * layout-left / layout-right classes are added to the <article> by
 * the post_class filter in functions.php.
 *
 * On mobile (< 576 px) the thumbnail stacks above the text.
 * On sm+ the two-column side-by-side layout kicks in.
 */
 
/* --- Mobile: stack vertically -------------------------------- */
.post-card-inner {
  flex-wrap: wrap;        /* allow stacking on narrow viewports */
}
 
.post-thumb {
  width: 100%;            /* full width on mobile */
}
 
.post-content {
  width: 100%;            /* full width on mobile */
  padding-left: 0 !important;   /* cancel ps-3 on mobile */
}
 
/* --- sm and up: side-by-side --------------------------------- */
@media (min-width: 576px) {
 
  .post-card-inner {
    flex-wrap: nowrap;
  }
 
  /* Left layout: thumbnail | content */
  .layout-left .post-card-inner {
    flex-direction: row;
  }
 
  /* Right layout: content | thumbnail */
  .layout-right .post-card-inner {
    flex-direction: row-reverse;
  }
 
  /* Thumbnail column: fixed 40 % width */
  .post-thumb {
    width: 40%;
  }
 
  /* Content column */
  .post-content {
    padding-left: 10px !important;  /* restore the Bootstrap ps-3 equivalent on left layout */
  }
 
  /* For row-reverse the start/end sides swap, so flip the padding */
  .layout-right .post-content {
    padding-left: 0 !important;
    padding-right: 10px;
    }
}



/* =========================================
   Responsive Table-to-Card Layout
   WordPress Additional CSS
   ========================================= */

@media (max-width: 767px) {

  /* Keep the table full width */
  .entry-content table,
  .wp-block-table table,
  .site-main table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
  }

  /* Hide the table header on small screens */
  .entry-content table thead,
  .wp-block-table table thead,
  .site-main table thead {
    display: none;
  }

  /* Turn each table row into a card */
  .entry-content table tbody tr,
  .wp-block-table table tbody tr,
  .site-main table tbody tr {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(25, 42, 70, 0.08);
  }

  /* Remove spacing after the final card */
  .entry-content table tbody tr:last-child,
  .wp-block-table table tbody tr:last-child,
  .site-main table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Convert cells into stacked card sections */
  .entry-content table tbody td,
  .wp-block-table table tbody td,
  .site-main table tbody td {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    color: #364152;
    background: #ffffff;
    box-sizing: border-box;
  }

  /* Remove the divider from the final cell */
  .entry-content table tbody td:last-child,
  .wp-block-table table tbody td:last-child,
  .site-main table tbody td:last-child {
    border-bottom: 0;
  }

  /* First column becomes the card title */
  .entry-content table tbody td:first-child,
  .wp-block-table table tbody td:first-child,
  .site-main table tbody td:first-child {
    padding: 16px 18px;
    color: #ffffff;
    background: #2457a6;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Add a subtle accent to the title area */
  .entry-content table tbody td:first-child::before,
  .wp-block-table table tbody td:first-child::before,
  .site-main table tbody td:first-child::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 9px;
    vertical-align: -3px;
    background: #f4b942;
    border-radius: 4px;
  }

  /* Improve readability when cells contain lists */
  .entry-content table tbody td ul,
  .entry-content table tbody td ol,
  .wp-block-table table tbody td ul,
  .wp-block-table table tbody td ol,
  .site-main table tbody td ul,
  .site-main table tbody td ol {
    margin: 0;
    padding-left: 20px;
  }

  /* Keep paragraphs from creating excessive gaps */
  .entry-content table tbody td p,
  .wp-block-table table tbody td p,
  .site-main table tbody td p {
    margin: 0 0 8px;
  }

  .entry-content table tbody td p:last-child,
  .wp-block-table table tbody td p:last-child,
  .site-main table tbody td p:last-child {
    margin-bottom: 0;
  }

  /* Improve link visibility inside cards */
  .entry-content table tbody td a,
  .wp-block-table table tbody td a,
  .site-main table tbody td a {
    color: #2457a6;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  /* Prevent very long words or URLs from breaking the layout */
  .entry-content table tbody td,
  .wp-block-table table tbody td,
  .site-main table tbody td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}