/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* ---------------------------------------------------------------------
 * Custom styles for HTML article posts
 * These styles replicate the inline CSS from the AI Music Analyser pages.
 * We scope them to `.single-html_article .html-article` so they only apply
 * to HTML Article single views and do not affect the rest of the site.
 * Fonts are loaded via wp_enqueue_scripts in functions.php.
 --------------------------------------------------------------------- */
/* Base typography and background */
.single-html_article .html-article {
    /* Use the Lato font for general text */
    font-family: 'Lato', sans-serif;
    /* Light off‑white background matches the original design */
    background-color: #ffffff;
    /* Default text colour matches Tailwind's gray-800 */
    color: #1f2937;
    
}

/* Heading fonts use Playfair Display */
.single-html_article .html-article h1,
.single-html_article .html-article h2,
.single-html_article .html-article h3 {
    font-family: 'Playfair Display', serif;
}

/* Custom main headline styling */
.single-html_article .html-article .main-headline {
    font-weight: 900;
    font-size: 4.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* Article body paragraphs and lists */
.single-html_article .html-article p,
.single-html_article .html-article li {
    line-height: 1.9;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* Kicker element styling */
.single-html_article .html-article .kicker {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #555;
}

/* Horizontal rule styling */
.single-html_article .html-article hr {
    border: 0;
    border-top: 1px solid #333;
    margin: 1.5rem 0;
}

/* Table styling */
.single-html_article .html-article table {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-collapse: collapse;
}

.single-html_article .html-article th,
.single-html_article .html-article td {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.single-html_article .html-article th {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f9fafb;
}

/* Ensure fade-in animation defined */
.single-html_article .html-article .fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Additional helper classes for charts and tables */
.single-html_article .html-article .chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.single-html_article .html-article .table-header-rotated {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding-bottom: 8px;
    white-space: nowrap;
}

/* Use a custom checkmark image for custom checkboxes */
.single-html_article .html-article .custom-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.pagination .page-numbers {
  margin: 0 2px; /* itt állíthatod a távolságot, pl 10px */
  
}
/* Define fadeIn animation globally so it can be referenced */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}