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

  --bs-body-bg: #20243a;
  --bs-body-color: #20243a;

  --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: #20243a;
  background: linear-gradient(305deg, #20243a 0%, #20243a 80%, #092546 80%, #20243a 92%);
  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;
  color: #777;
  font-family: sans-serif;
}

  @media (min-width: 768px) {
    .site-info > p:first-of-type {
      float: left;
    }
    .site-info > p:last-of-type {
      float: right;
    }
}

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


/* =========================
   atec21 customizations
   ========================= */

.entry-content img {
  padding: 0;
}
  :root {
    --cut: 14.6vw;            /* how far the diagonal eats into each panel at its far edge */
    --line-color: #b72a2a;  /* colour of the two divider strokes */
    --line-width: 4px;
  }

  .wrap {
    position: relative;
    margin: 0 auto;
  }
@media (min-width: 1279px) {
  .wrap {
    max-width: 92%;
  }
}
@media (min-width: 1900px) {
  .wrap {
    max-width: 85%;
  }
}
@media (min-width: 2500px) {
  .wrap {
    max-width: 80%;
  }
}
@media (min-width: 3200px) {
  .wrap {
    max-width: 75%;
  }
}

  .panel {
    position: relative;
    padding: 1.2rem 1.5rem;
    /* min-height: calc(38.2vh + 2.4rem); */
    background-color: #fff;
  }
  .panel h2 { font-size: 1.35rem; margin-bottom: .75rem; }
  .panel p  {
      line-height: 1.6;
      text-align: justify;
  }
  @media (max-width: 1280px) {
    .panel p {
      line-height: 1.4;
    } 
  }

  /* The invisible element that carves the same wedge out of the TEXT FLOW
     that clip-path is about to carve out of the PAINTED shape.
     shape-outside only works on a float, and needs an explicit box to shape. */
  .shape-helper {
    display: block;
    height: 100%;
    width: var(--cut);
    shape-margin: 0.15rem; /* small buffer so lines don't hug the diagonal */
  }
  .shape-helper-2 {
    display: block;
    height: 100%;
    width: calc(var(--cut)/2);
    shape-margin: 0.5rem; /* small buffer */
  }

  /* ---- Special tablets in portrait mode ---- */
  @media (max-aspect-ratio: 0.75) {
    #gallery.panel {
      min-height: unset !important;
      height: unset !important;
      max-height: 960px;
      aspect-ratio: 3.2/2;
    }
  }
  /* ---- Everything below only applies at tablet width and up ---- */
  @media (min-width: 768px) {
    /* two panels crossed by stripes */
    .panel-left {
      /* top edge = full width, bottom edge = shortened by --cut */
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
    }
    .panel-left .shape-helper {
      float: right;
      shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    }

    .panel-right {
      /* top edge = shortened by --cut, bottom edge = full width */
      clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
    }
    .panel-right .shape-helper {
      float: left;
      shape-outside: polygon(0 0, 100% 0, 0 100%);
    }
    .divider {
      display: block;
      position: absolute;
      inset: 0 auto 0 calc(50% - var(--cut));
      width: calc(var(--cut) * 2);
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }
    .divider.vertical {
      inset: 0 auto 0 calc(50% - var(--cut)/2);
      width: var(--cut);
    }
    .panel-vertical .shape-helper {
      shape-outside: content-box;
      width: calc(var(--cut)/2);
    }
    .panel-vertical.panel-left  {
      clip-path: inset(0 calc(var(--cut)/2) 0 0);
    }
    .panel-vertical.panel-right {
      clip-path: inset(0 0 0 calc(var(--cut)/2));
    }
    
    /* vertical stripes left and right around a centered panel */
    .panel-center {
      margin-left: auto;
      margin-right: auto;
      width: calc(100% - var(--cut) * 2);
    }
    .divider_vertical {
      display: block;
      position: absolute;
      width: var(--cut);
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }
    #divider_vertical_left {
      inset: 0 auto 0 0;
    }
    #divider_vertical_right {
      inset: 0 auto 0 calc(100% - var(--cut));
    }
    
    /* left trapezoid panel and right parallelogram panel without stripes */
    .panel:has(.sec) {
      padding: 0;
      background-color: transparent;
    }
    .panel .sec {
      border-left: 13px double #b72a2a;
      padding: 1.2rem 1.5rem;
      margin: 0 0 1.5rem 0;
      background-color: #fff;
    }
    .panel .sec p {
      text-align: left;
      font-size: 108%;
    }
    .panel-left-2 {
      /* top edge = full width, bottom edge = shortened by --cut */
      clip-path: polygon(0 0, calc(100% - var(--cut)/2) 0, 100% 100%, 0 100%);
    }
    .panel-left-2 .shape-helper-2 {
      float: right;
      shape-outside: polygon(0% 0%, calc(100% - var(--cut)/2) 0%, 100% 100%, calc(var(--cut)/2) 100%);
    }
    .panel-right-2 {
      /* top edge = shortened by --cut, bottom edge = full width */
      clip-path: polygon(0 0, calc(100% - var(--cut)/2) 0, 100% 100%, calc(var(--cut)/2) 100%);
    }
    .panel-right-2 .shape-helper-2#sh_l{
      float: left;
      shape-outside: polygon(0% 0%, calc(100% - var(--cut)/2) 0%, 100% 100%, calc(var(--cut)/2) 100%);
    }
    .panel-right-2 .shape-helper-2#sh_r{
      float: right;
      shape-outside: polygon(0% 0%, calc(100% - var(--cut)/2) 0%, 100% 100%, calc(var(--cut)/2) 100%);
    }
  }

  @media (max-width: 767.98px) {
    .divider, .divider_vertical, .shape-helper, .shape-helper-2 { display: none; }
    .panel-left, .panel-right, .panel-left-2, .panel-right-2 {
      clip-path: none;
      border-left: 12px double #b72a2a; /* physical left border */
      /* border-inline-start: 13px double #b72a2a;  ... logical left border for direction: ltr; would map to border-top for writing-mode: vertical-rl; */
    }
    .panel {
      margin-top: 2rem;
      min-height: min-content;
    }
  }

/* Front Page Image Content */
div#pic1 {
    background-image: url(https://www.kravmaga-selfdefense.de/wp-content/uploads/2026/10/DSC01260.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    min-height: 360px;
}

/* WordPress Gallery: show only one image at a time */
.gallery {
  position: relative;
}
#gallery.panel {
  height: 50vh;
  max-height: 960px;
  min-height: 360px;
  overflow: hidden;
  padding: 0;
}
.gallery-item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

/* Stagger each image's visibility window.
   Total cycle = 25s (5 images × 5s each).
   Adjust the count/durations for your gallery size. */

/* Gallery with 3 images */
[id^="gallery-"]:has(> :nth-child(3):last-child) {
  > .gallery-item:nth-child(1) { animation: slide3 12s infinite 0s; }
  > .gallery-item:nth-child(2) { animation: slide3 12s infinite 4s; }
  > .gallery-item:nth-child(3) { animation: slide3 12s infinite 8s; }
}
/* Gallery with 4 images */
[id^="gallery-"]:has(> :nth-child(4):last-child) {
  > .gallery-item:nth-child(1) { animation: slide4 14s infinite 0s; }
  > .gallery-item:nth-child(2) { animation: slide4 14s infinite 3.5s; }
  > .gallery-item:nth-child(4) { animation: slide4 14s infinite 7s; }
  > .gallery-item:nth-child(3) { animation: slide4 14s infinite 10.5s; }
}
@keyframes slide3 {
  0%   { opacity: 0; }
  4%   { opacity: 1; }  /* fade in */
  33%  { opacity: 1; }  /* hold */
  42%  { opacity: 0; }  /* fade out */
  100% { opacity: 0; }
} 
@keyframes slide4 {
  0%   { opacity: 0; }
  4%   { opacity: 1; }  /* fade in */
  20%  { opacity: 1; }  /* hold */
  34%  { opacity: 0; }  /* fade out */
  100% { opacity: 0; }
}