/*
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: #212529;

  --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;
    }
}