/*
Theme Name: Botiga Child myEclinic
Theme URI: https://myeclinic.com/
Description: myEclinic Child Theme for Botiga with Gutenberg Block Patterns (cloned from botiga-child-gutenberg, without WooCommerce/WC Vendors/WCPDF/Stripe Connect integrations)
Author: IFTM Institut für Telematik in der Medizin GmbH
Author URI: https://myeclinic.com/
Template: botiga
Version: 1.0.3
Text Domain: botiga-child-myeclinic
License: Proprietary — All Rights Reserved
License URI: https://myeclinic.com/
*/

/*
botiga-child-myeclinic/
├── style.css
├── functions.php
├── screenshot.png
├── assets/
│   ├── css/
│   │   └── custom.css
│   └── js/
│       └── custom.js
├── gutenberg/
│   └── css/
│       └── catycloud-base.css
└── inc/
    └── block-patterns.php

To overwrite template files of the parent theme, copy them to the corresponding
folder of your child theme and edit them as required. Keep the same folder
structure.
*/

/* Add your custom CSS here */


/********************************************************************
 *
 * myEclinic Design System - CSS Variables & Overrides
 * Version: 2026-04-30 (Zen / Japanese palette)
 *
 * Patient information portal — palette inspired by Japanese Zen
 * aesthetics: matcha green, sumi ink, washi paper, kakishibu clay.
 * Conveys health, calm and trust (not illness).
 *
 *   --cc-primary   #6b8e7f  Matcha / sage green (health, calm)
 *   --cc-secondary #2f3e3a  Sumi ink (deep moss, headings)
 *   --cc-ascend    #b8674a  Kakishibu clay / terracotta (subtle CTA)
 *   --cc-bg        #f5f1e8  Washi paper (warm off-white background)
 *   --cc-stone     #e8dfd0  Sand stone (soft surface)
 *
 * Font Family: Arial
 *
 ********************************************************************/

:root {
    /* ===== myEclinic Zen Color Palette ===== */

    /* Primary Brand Colors */
    --cc-primary: #6b8e7f;           /* Matcha sage – calm, health */
    --cc-secondary: #2f3e3a;         /* Sumi ink – headings, links */
    --cc-ascend: #b8674a;            /* Kakishibu clay – CTAs */

    /* Lighter Variants */
    --cc-primary-lighter: #c4d6cd;   /* Light tea */
    --cc-secondary-lighter: #6f7f7a; /* Faded ink */
    --cc-ascend-lighter: #ddb09b;    /* Soft clay */

    /* Zen surface tokens */
    --cc-bg: #f5f1e8;                /* Washi paper – page background */
    --cc-stone: #e8dfd0;             /* Sand – soft surfaces */
    --cc-bamboo: #8a9a78;            /* Bamboo green – subtle accent */

    /* Semantic Colors */
    --cc-red: #b25a4a;               /* Muted red */
    --cc-green: #6b8e5a;             /* Muted leaf green */
    --cc-red-lighter: #d9aaa0;
    --cc-green-lighter: #b9c9a8;
    
    /* Grayscale */
    --cc-black: #000000;             /* wpBlack */
    --cc-white: #ffffff;             /* wpWhite */
    --cc-grey20: #333333;            /* wpGrey20 - Text, headings */
    --cc-grey40: #666666;            /* wpGrey40 - Secondary text */
    --cc-grey50: #808080;            /* wpGrey50 - Placeholders */
    --cc-grey60: #9a9a9a;            /* wpGrey60 - Subtle text */
    --cc-grey80: #cccccc;            /* wpGrey80 - Borders, disabled */
    --cc-grey90: #e6e6e6;            /* wpGrey90 - Light borders */
    --cc-grey95: #f3f3f3;            /* wpGrey95 - Light backgrounds */
    
    /* Font */
    --cc-font-family: Arial, sans-serif;
}

/* ===== Global Overrides ===== */
body {
    font-family: var(--cc-font-family) !important;
    background-color: var(--cc-bg) !important;
    color: var(--cc-secondary);
}

/* ===== Cover Block - Force inline color styles ===== */
.wp-block-cover h1.wp-block-heading[style*="color:#e85d4c"],
.wp-block-cover h2.wp-block-heading[style*="color:#e85d4c"] {
    color: #e85d4c !important;
}

.wp-block-cover p[style*="color:#f3f3f3"] {
    color: #f3f3f3 !important;
}

h1, h2 {
    color: var(--cc-secondary) !important;
}

h3, h4, h5, h6 {
    color: var(--cc-grey20) !important;
}

/* ===== Explicit Color Classes ===== */
.cc-text-white,
h2.cc-text-white,
h3.cc-text-white,
h4.cc-text-white,
h5.cc-text-white,
h6.cc-text-white {
    color: var(--cc-white) !important;
}

/* Ascend/Accent Button (yellow background, dark text) */
.wp-block-button.cc-btn-ascend .wp-block-button__link,
.cc-btn-ascend.wp-block-button__link {
    background-color: var(--cc-ascend) !important;
    border-color: var(--cc-ascend) !important;
    color: var(--cc-secondary) !important;
}

.wp-block-button.cc-btn-ascend .wp-block-button__link:hover,
.cc-btn-ascend.wp-block-button__link:hover {
    background-color: var(--cc-secondary) !important;
    border-color: var(--cc-secondary) !important;
    color: var(--cc-white) !important;
}

a {
    color: var(--cc-secondary);
}

a:hover {
    color: var(--cc-primary);
}

/* ===== Button Overrides ===== */
/* Active state: wpSecondary (#243b53) */
/* Hover state: wpAscend (#e85d4c) */
/* Disabled state: wpGrey80 (#cccccc) */

.button,
.btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.botiga-button,
.elementor-button {
    background-color: var(--cc-secondary) !important;
    border-color: var(--cc-secondary) !important;
    color: var(--cc-white) !important;
    font-family: var(--cc-font-family) !important;
}

.button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.botiga-button:hover,
.elementor-button:hover {
    background-color: var(--cc-ascend) !important;
    border-color: var(--cc-ascend) !important;
    color: var(--cc-white) !important;
}

.button:disabled,
.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.wp-block-button__link:disabled {
    background-color: var(--cc-grey80) !important;
    border-color: var(--cc-grey80) !important;
    color: var(--cc-grey50) !important;
    cursor: not-allowed;
}

/* ===== Form Overrides ===== */
input,
textarea,
select {
    border-color: var(--cc-grey80) !important;
    font-family: var(--cc-font-family) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--cc-secondary) !important;
    outline-color: var(--cc-secondary) !important;
}

::placeholder {
    color: var(--cc-grey50) !important;
}

/* ===== Header Above Row (Large Background) ===== */
.bhfb-above_header_row,
.botiga-header-row.above-header-row {
    background-color: var(--cc-primary) !important;
}

/* ===== Footer Above Row (Large Background) ===== */
.bhfb-above_footer_row,
.botiga-footer-row.above-footer-row {
    background-color: var(--cc-primary) !important;
}

/* ===== Scroll to Top Button ===== */
.back-to-top {
    background-color: var(--cc-secondary) !important;
    color: var(--cc-white) !important;
}

.back-to-top:hover {
    background-color: var(--cc-ascend) !important;
    color: var(--cc-white) !important;
}

/* ===== Elementor Compatibility ===== */
.elementor-kit-63 {
    --e-global-color-primary: var(--cc-primary);
    --e-global-color-secondary: var(--cc-secondary);
    --e-global-color-text: var(--cc-grey20);
    --e-global-color-accent: var(--cc-ascend);
}

/*
  * Legacy th- variables mapped to CatyCloud design system
  * These are kept for backward compatibility with existing templates
  */
.elementor-kit-63 {
    --th-color-bg: var(--cc-white);           /* white */
    --th-color-bg-block: var(--cc-grey95);    /* grey95 */
    --th-color_btn_bg: var(--cc-secondary);   /* blue */
}  

/**************************************************************
 * Settings for template parts (using CatyCloud variables)
 *************************************************************/

body {
    background-color: var(--cc-white);
    color: var(--cc-grey20);
}

/*
.th-header {

}
*/

.th-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    margin-top: 24px;
    margin-right: 24px;
    margin-bottom: 48px;
    font-weight: var(--th-font-weight);
}

/* Responsive */
@media (max-width: 800px) {
    .th-content {
        grid-template-columns: 1fr;
    }
}

.th-footer {
    margin-bottom: 48px;
}

/***********************************************************
 * The styles of .th-image-column
 **********************************************************/

.th-image {
    margin-right: 24px;
}

.th-image img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/***********************************************************
 * The styles of .th-info-column
 **********************************************************/

.th-base-info-wrapper {
    background-color: var(--cc-grey95);
}

.th-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.th-title {
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    padding: 12pt;
    font-size: 24pt;
    font-weight: 400;
}

.th-language-switcher-wrapper {
    display: flex;
    justify-content: flex-end; /* Rechtsbündige Ausrichtung */
    flex-shrink: 0; /* Verhindert, dass das Element schrumpft */
}

.trp-language-switcher-container {
    display: flex;
    justify-content: flex-end; /* Rechtsbündige Ausrichtung innerhalb des Containers */
    position: relative; /* Notwendig für absolut positionierte Dropdowns */
}

.trp-ls-shortcode-language {
    position: absolute; /* Absolut positioniert */
    right: 0; /* Rechtsbündig im Container */
    display: none; /* Standardmäßig ausblenden */
    background-color: white; /* Hintergrundfarbe */
    border: 1px solid #ccc; /* Rahmen */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
    z-index: 1000; /* Damit es über anderen Elementen liegt */
}

.trp-language-switcher-container:hover .trp-ls-shortcode-language {
    display: block; /* Einblenden, wenn der Container gehovert wird */
}

.trp-ls-shortcode-current-language {
    cursor: pointer; /* Zeigt, dass es klickbar ist */
}

.th-short-description {
    padding: 12pt;

}

.th-languages {
    padding: 12pt;
}

.th-description {
    margin-top: 12pt;
    padding: 12pt;
    background-color: var(--th-color-bg-block);
}

.th-description ul {
    margin-top: 12pt;
    margin-bottom: 12pt;
}
  
.th-description em {
    color: var(--th-color);
    font-weight: var(--th-font-weight-em);
}

.th-rating {
    margin-top: 12pt;
    padding: 12pt;
    background-color: var(--th-color-bg-block);
}

.th-review {
   padding: 12pt;
    background-color: var(--th-color-bg-block);
}

.th-booking-wrapper {
    background-color: var(--th-color-bg-block);
}

.th-price-range {
    margin-top: 12pt;
    padding: 12pt;
}

.th-web-app {
    padding: 12pt;
}

.th-qr-code, .th-link-btn {
    margin: 20px 0;
}

.th-link-btn a {
    text-decoration: none; /* Entfernt die Unterstreichung vom Link */
}

.th-link-btn button {
    background-color: var(--th-color_btn_bg); /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe des Buttons */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Übergangseffekt bei Hover */
}

.th-link-btn button:hover {
    background-color: var(--e-global-color-accent); /* Hintergrundfarbe des Buttons bei Hover */
}


/***********************************************************
 * The style of the button to open the reviews
 **********************************************************/

 #th-review #th-review-content {
    display: none;
}

#th-review:target #th-review-content {
    display: block;
}

#th-review:target a {
    display: none;
}

.th-link-btn a, .th-review a {
    text-decoration: none; /* Entfernt die Unterstreichung vom Link */
}

.th-link-btn button, .th-review-button {
    background-color: rgba(255, 184, 3, 0.5); /* Star color, semi-transparent */
    color: white; /* Textfarbe des Buttons */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Übergangseffekt bei Hover */
}

.th-link-btn button:hover, .th-review-button:hover {
    background-color: rgba(255, 184, 3, 1); /* Star color, full opacity on hover */
}


/***********************************************************
 * The style of the header menu
 **********************************************************/

.th-hfe-header a.hfe-menu-item {
    background-color: #2c8a7a !important;
}


/***********************************************************
 * The style of the footer menu
 **********************************************************/

.th-hfe-footer a.hfe-menu-item {
    background-color: #2c8a7a !important;
}



/**********************************************************************************
 * Disable Botiga-generated headers
 *
 * In file: botiga/inc/modules/hf-builder/components/header/header-builder/css.php
 * header structures are generated. 
 * The following CSS rules appley if screen width >  1024
 * .bhfb-header.bhfb-mobile -> display: block
 * .bhfb-header.bhfb-desktop -> display: none;
 **********************************************************************************/

 .bhfb-header.bhfb-mobile {
    display: none !important;
 }

 .bhfb-header.bhfb-desktop {
    display: none !important;
 }

/***********************************************************
 * Responsive Header & Footer
 *
 * The Gutenberg header (.cc-header) and footer link bar
 * use flex-nowrap, which causes overflow on small screens.
 * These rules make them wrap and stack properly.
 **********************************************************/

/* ── Header Responsive ── */
@media (max-width: 768px) {
    /* Main header: stack logo-group and nav-group vertically */
    .cc-header.is-layout-flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Nav group: wrap links, center them */
    .cc-header .wp-block-group.is-content-justification-right.is-layout-flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    /* Reduce large CatyCloud text on small screens */
    .cc-header a span[style*="font-size:24px"] {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .cc-header.is-layout-flex {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Hide text nav links on very small screens, keep home icon */
    .cc-nav-link[data-page="patients"],
    .cc-nav-link[data-page="doctors"] {
        font-size: 13px !important;
    }
}

/* ── Footer Responsive ── */
@media (max-width: 768px) {
    /* Footer link group: allow wrapping */
    .wp-block-group[style*="background-color:#f3f3f3"] .wp-block-group.is-layout-flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px 15px !important;
    }

    /* Hide pipe separators on mobile — they are paragraphs containing just "|" */
    .wp-block-group[style*="background-color:#f3f3f3"] .wp-block-group.is-layout-flex > p:not(.has-link-color) {
        display: none !important;
    }

    /* Reduce footer padding on mobile */
    .wp-block-group[style*="background-color:#f3f3f3"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/****************************************************************
 * Formatting of the descriptio of the product
 * Text blocks could be separated by <blockquote> elements.
 * To include an empty line, use <blockquote>&zwnj;</blockquote>
 ****************************************************************/

.th-description blockquote {
    margin-bottom: 16px;
}

/****************************************************************
 * FAQ Accordion (Details Block) - H3 styling for questions
 ****************************************************************/

.wp-block-details summary {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--cc-grey20, #333333) !important;
    cursor: pointer;
    padding: 10px 0;
    line-height: 1.4;
}

.wp-block-details summary:hover {
    color: var(--cc-secondary, #243b53) !important;
}

.wp-block-details summary strong {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}