/*
Theme Name: Botiga Child Gutenberg
Theme URI: https://caty.cloud/
Description: CatyCloud Child Theme for Botiga with Gutenberg Block Patterns
Author: IFTM Institut für Telematik in der Medizin GmbH
Author URI: https://caty.cloud/
Template: botiga
Version: 3.1.0
Text Domain: botiga-child-gutenberg
GitHub Theme URI: hacklaen/botiga-child-gutenberg
*/

/*
botiga-child/
├── style.css
├── functions.php
├── screenshot.png
├── assets/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── custom.js
│   └── fonts/
├── woocommerce/
└── template-parts/

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.

To overwrite WooCommerce templates, you need to copy the corresponding
files from the WooCommerce plugin or the parent theme into your `woocommerce` 
folder.
For example (wp-content/plugins/woocommerce/templates/single-product.php):

botiga-child/
└── woocommerce/
    ├── single-product.php
    ├── content-product.php
    └── cart/
        └── cart.php

For example (wp-content/plugins/wc-vendors/templates/front/vendor-list.php):

botiga-child/
└── wc-vendors/
    └── front/
        └── vendor-list.php

*/

/* Add your custom CSS here */


/********************************************************************
 *
 * CatyCloud Design System - CSS Variables & Overrides
 * Version: 2025-02-04
 * 
 * These colors match the Flutter apps and override Botiga defaults.
 * Font Family: Arial (matching Flutter apps)
 *
 ********************************************************************/

:root {
    /* ===== CatyCloud Official Color Palette ===== */
    
    /* Primary Brand Colors */
    --cc-primary: #77c5d5;           /* wpPrimary - Main brand, large backgrounds */
    --cc-secondary: #004680;         /* wpSecondary - Links, active buttons, icons */
    --cc-ascend: #e1cd00;            /* wpAscend - CTAs, highlights, button hover */
    
    /* Lighter Variants (50% white blend) */
    --cc-primary-lighter: #bbe2ea;   /* wpPrimaryLighter */
    --cc-secondary-lighter: #80a3c0; /* wpSecondaryLighter */
    --cc-ascend-lighter: #f0e680;    /* wpAscendLighter */
    
    /* Semantic Colors */
    --cc-red: #d54a4a;               /* wpRed - Error, danger */
    --cc-green: #4a9b6d;             /* wpGreen - Success */
    --cc-red-lighter: #eaa5a5;       /* wpRedLighter */
    --cc-green-lighter: #a5cdb6;     /* wpGreenLighter */
    
    /* 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;
}

/* ===== Cover Block - Force inline color styles ===== */
.wp-block-cover h1.wp-block-heading[style*="color:#e1cd00"],
.wp-block-cover h2.wp-block-heading[style*="color:#e1cd00"] {
    color: #e1cd00 !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 (#004680) */
/* Hover state: wpAscend (#e1cd00) */
/* Disabled state: wpGrey80 (#cccccc) */

.button,
.btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.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,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button: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;
}

/* ===== WooCommerce Overrides ===== */
.woocommerce .price,
.woocommerce .woocommerce-Price-amount {
    color: var(--cc-secondary) !important;
}

.woocommerce .onsale {
    background-color: var(--cc-ascend) !important;
    color: var(--cc-grey20) !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 */
}  

/**************************************************************
 * Hide the WooCommerce breadcrum, which is include by  the
 * 'woocommerce_before_main_content' action hook to the layout
 *************************************************************/

nav.woocommerce-breadcrumb {
    display: none;
}

/**************************************************************
 * 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: #77C5D5 !important;
}


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

.th-hfe-footer a.hfe-menu-item {
    background-color: #77C5D5 !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;
 }


/****************************************************************
 * 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, #004680) !important;
}

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