/*
 * palingen.de — global custom CSS
 * =========================================================================
 * GIT-TRACKED SOURCE OF TRUTH for the site's hand-written global styles.
 *
 * Helix Ultimate auto-loads templates/shaper_helixultimate/css/custom.css
 * AFTER template.css and the colour preset, and NEVER ships or overwrites it
 * on update — so this is the update-safe home for hand CSS (unlike
 * template.css / css/presets/*, which Helix regenerates: never edit those).
 *
 * Provenance: these rules were migrated out of the Helix "Custom CSS" field
 * (#__template_styles.params -> custom_css), which lived ONLY in the database
 * and was therefore never in version control. They are now file-based + in git.
 *
 * NOTE: page-specific CSS (StartPage, Termine, Firmen & Künstler, Feuerwehr)
 * is NOT here on purpose — it lives in each SP Page Builder page's own
 * "Custom CSS" field (DB) and is backed up by the DB dump, not by git.
 * Reference copies of those page styles are kept in /custom_css/*.css.
 *
 * To change global styles: edit THIS file, commit it, deploy it. Do not paste
 * large CSS back into the Helix Custom CSS field.
 * =========================================================================
 */

:root {
    --site-bg: #faf5e6;
    --font-brown: #703a19;
    --area-grey: #ebe9dd;
    --area-green: #7fbf73;
    --font-green: #008f4c;
    --area-sand: #e6e1d0;
    --black-font: #252525;

    --panel-bg: var(--area-grey);
    --main-font: var(--font-brown); 
    --dark-bg: var(--font-brown);
}

/* Fix default elements */ 

.sppb-carousel-extended-item img {
    object-fit: contain;
}

/* Header */ 

/* search bar */
.awesomplete {
    position: relative;
    display: inline-block;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    width: 30px;
    overflow: hidden;
    background-color: var(--site-bg);
  }
  
  .awesomplete input {
    width: 100%;
    border: none;
    outline: none;
    padding-left: 25px;
    transition: color 0.3s ease-in-out;
    background-color: transparent;
  }
  
  .awesomplete::before {
    content: "⚲"; /* Use the desired symbol */
    font-size: 24px;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg); /* Rotate the symbol by 45 degrees */
    pointer-events: none;
  }
  
  .awesomplete:focus-within {
    width: 200px;
    background-color: white;
  }
  
  .awesomplete:focus-within input {
    display: block;
  }

/* Force Hide username */ 
.user-text {
  display: none !important; /* Hide the slogan when the search bar is focused */
  font-size: 0px;
}
#sp-menu {
    background-color: var(--site-bg);
}
  
/* Hide Article Headers on SP Page Builder pages */
.article-header h1[itemprop="headline"] {
    display: none;
} 

#sp-header {
    box-shadow: none !important;
}

.page-header {
   display: none !important;
}

/* Palingen Logo */ 

#sp-logo .sp-column {
    display: flex;
    flex-direction: row;
    align-items: center; 
    height: 100%;
}

#sp-header .logo a {
    font-size: 36px;
    font-weight: 500;
    color: black;
}

#sp-logo.has-border .sp-column {
    display: inline-flex;
    align-items: flex-start;
}

#sp-header .logo {
    height: 30px !important;
    text-align: left;
    align-items: left !important;
}

.logo-slogan {
    font-size: small;
    font-style: italic;
    margin-top: 5px;
    text-align: left;
    align-items: left !important;
}


/* Main Menu */

.sp-megamenu-parent>li>a {
    color: #252525;
}

/* blog overview */ 
/* #############*/ 

.featured-article-badge {
    display: none;
}

.blog-overview-item {
    position: relative;
    height: 0;
    padding-bottom: 31%; /* For square aspect ratio */
    margin-bottom: 4%; /* For spacing between squares */
    overflow: hidden;
}

.blog-overview-item .article-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: left;
    text-align: left;
    padding: 0px;
}

.blog-overview-item .article-introtext {
    width: 100%;
    padding: 15px;
    background: var(--panel-bg);
    color: var(--black-font);
    text-align: left;
    z-index: -3;
    transition: z-index 0.3s ease;
}

.blog-overview-item .article-header {
    width: 100%;
    text-align: left;
    z-index: 1;
}

.blog-overview-item .article-header h2 {
    margin: 0;
    padding: 15px;
    background: var(--panel-bg);
    font-size: 1.5rem;
}

.blog-overview-item .article-header h2 a {
    display: inline-block;
    width: 100%;
    text-align: left;
    color: var(--black-font);
}

.blog-overview-item .article-header h2 a:hover {
    color: var(--font-green);
}

.blog-overview-item .article-intro-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.blog-overview-item .article-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-fields-group{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: -3;
    opacity: 1;
    transition: z-index 0.3s ease;
    bottom: 0;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.custom-field{
    background-color: var(--panel-bg);
    color: white;
    font-size: 10pt;
}

.custom-field a{
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.blog-overview-item .readmore{
    position: relative;
    z-index: 4;
    
}

.blog-overview-item:hover .article-introtext,
.blog-overview-item:hover .custom-fields-group,
.blog-overview-item:hover .readmore {
    z-index: 4;
}

.article-introtext p {
    font-size: 12pt;
    text-align: left;
}
.readmore a {
    color: var(--font-brown);
    font-size: 12pt;
    font-weight: 500;
}

.readmore a:hover {
    color: var(--font-green);
}

.blog-overview-item .background {
    background-color: var(--panel-bg);
    width: 93.2%;
    height: 100%;
    position: absolute;
    z-index: -5;
}

.article-body .tags{
    display: none;
}

/* Calendar */

.eventset .event-title {
    
    color:var(--black-font) !important;
    text-decoration: none;
    font-size: 26px !important;
}

/* Firmen & Künstler */
.sppb-addon-title:hover {
    color: var(--font-green) !important; 
}

/* Custom Pages */

.custom-page-header-image img {
    max-height: 500px; /* Sets the maximum height of the image to 400 pixels */
    object-fit: cover; /* Ensures the image covers the container */
    width: 100%; /* Sets the width of the image to fill the container */
}

.jb-decline.link {
    color: var(--font-green) !important;
}

/* Hide Content Links */ 

.content-links-c,
.content-links-a,
.content-links-b {
    display: none;
}

.content-links{
    display: none;
}

/* Tag Overview */
.tag-overview-item {
    position: relative;
    height: 0;
    padding-bottom: 31%; /* For square aspect ratio */
    margin-bottom: 4%; /* For spacing between squares */
    overflow: hidden;
    background-color: var(--panel-bg);
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 30px;
}

.tag-card-body{
    background-color: var(--panel-bg);
}

.tag-overview-container {
    margin-top: 20px;
}

.tag-category h1{
    display: none;
}

.tag-card-title {
    padding: 15px; 
    font-size: 1.5rem !important;
}

.tag-card-title a{
    color: var(--black-font) !important;
}

.tag-card-title a:hover{
    color: var(--font-green) !important;
}

/* Example Page Elements */
.sppb-carousel-item-inner {
    overflow: hidden;
  }
  
.sppb-carousel-text h2 {
font-size: calc(1.0vw + 1.0vh + 1rem) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}

/* END Tag Overview */

@media (max-width: 768px) {
    .col-md-6 {
        width: 100% !important;
        padding-bottom: 100%; /* Maintain square aspect ratio for smaller screens */
    }
}