/* This CSS document applies the style, coloring, etc. for the Gotch website 

The actual corporate design is defined and stored in the following repository folder:
static --> images --> corporate_design

Extract:
- Font: Calibri Light (or Calibri, or sans-serif)

Color schemes are aligned with standard MS Office colors:
- Light Color scheme: 
    - Black (R0 G0 B0, Hex: #000000)
    - Grey (R191 G191 B191, Hex: #BFBFBF)
    - White (R255 G255 B255, Hex: #FFFFFF)

- Dark Color scheme: 
    - Dark Grey (R38 G38 B38, Hex: #262626)
    - Middle Grey (R89 G89 B89, Hex: #595959)
    - Light Grey (R217 G217 B217, Hex: #D9D9D9)

*/

body {
    font-family: "Calibri Light", Calibri, sans-serif;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
    text-decoration: none
}

header h1 {
    font-size: 3em; /* Makes it bigger than nav links (adjust as needed, e.g., 1.5em for smaller) */
    color: white;
    text-decoration: none;
    margin: 0; /* Optional: Removes default margin for better alignment */
}

header .bracket {
    color: #A6A6A6; /* Example: Orange color for bracketed text (change to your preference, e.g., red, blue) */
    text-decoration: none;
}

nav a {
    color: #333;
    margin: 0 1rem;
    text-decoration: none;
}

header a {
    text-decoration: none !important;
    color: white;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
    background: white;
    border-radius: 8px;
}

article {
    margin-top: 0.2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px; /*solid #ddd;*/
}

article.post-no-separator {
    border-top: none;
}

form {
    display: flex;
    flex-direction: column;
    max-width: flex;
}

label {
    margin-top: 1rem;
}

input, select, textarea, button {
    padding: 1rem;
    margin-top: 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

button {
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

a:link,
a:visited {
    color: #A6A6A6;
}

.flashes {
    list-style: none;
    padding: 0;
}

.flashes li {
    background-color: #ffdddd;
    color: #d8000c;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

/* For impressum only */
.impressum p {
    margin: 0.5em 0;
}

.topic-subject-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: nowrap; /* use wrap if you prefer mobile stacking */
}

/* Make each field area wider */
.topic-subject-row > div {
    flex: 0 0 360px; /* try 360-420px */
}

/* Make the controls fill each wider column */
.topic-subject-row input,
.topic-subject-row select {
    width: 80%;
    box-sizing: border-box;
}

.donation-qr-row {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.donation-qr {
    margin: 0;
    text-align: center;
}

.donation-qr img {
    width: 220px;
    height: auto;
    display: block;
}

.breadcrumb {
    min-height: 1.5rem;   /* reserves one line even when breadcrumb is empty */
    line-height: 1.5rem;
    margin-bottom: 0.25rem;
}

.breadcrumb a {
    margin: 0;
    text-decoration: none;
    color: #333;
}

.breadcrumb .sep {
    margin: 0 0.45rem;
    color: #777;
}

.breadcrumb .placeholder {
    visibility: hidden;   /* keeps height, shows no visible text */
}

.latest-posts-swiper {
    --swiper-navigation-color: #A6A6A6;
    --swiper-pagination-color: #A6A6A6;
    margin: 1rem 0 2.5rem;
    padding-bottom: 2.5rem; /* Platz für Pagination-Dots */
}

.carousel-card-link {
    text-decoration: none;
    display: block;
}

.carousel-card {
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}

.carousel-meme-img {
    width: 100%;
    display: block;
    aspect-ratio: 7 / 12; /* Adjust the aspect ratio as needed */
    object-fit: contain; /* Ensures the image fits within the defined aspect ratio */
}