/*
Theme Name: Colia Minimalist v2
Theme URI: https://dev.colia.com
Author: Colia
Author URI: https://colia.com
Description: Ultra minimalist Colia theme.
Version: 1.05
Requires at least: 5.9
License: private
Text Domain: colia.com
Tags: block-theme, full-site-editing
*/

/* Import Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;700&display=swap');

/* Color Variables */
:root {
    --content-width: 1200px;
    --primary-color: #ffffff;
    --secondary-color: #6e54fd;
    --background-color: #000;
    --background-color2: #4d4a4a;
    --menu-background-color: #000;
    --header-height: 65px;
    --real-vh: 100vh; /* will be calculated when the keyboard is opened on mobile. */
    --footer-background-color: #2d2d32;
    --card-background-color: #2c3339;
    --card-background-hover: #2d2d32;
    --card-border-color: rgba(110, 84, 253, 0.4);
    --card-border-color-hover: #6e54fd;
    --card-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    --card-border-radius: 12px;
    --wp--style--block-gap: 0.1rem;

}

[data-theme="light"] {
    --primary-color: #000;
    --background-color: #fdfdfd;
    --background-color2: #f7f8f9;
    --card-background-color: #eaeaea;
    --card-background-hover: #fdfdfd;
    --menu-background-color: #fff;
}

[data-theme="dark"] {
    --primary-color: #ffffff;
    --background-color: #101517;
    --background-color2: #1f2225;
    --card-background-color: rgb(35, 38, 43);
    --card-background-hover: rgba(44, 51, 57);
    --menu-background-color: #000;
    --footer-background-color: #151518;
}


    /* Global Styles */
html, body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--primary-color);
    transition: background 0.3s, color 0.3s;
    margin: 0;
    height: 100%;
    overflow: visible !important; /* Ensure sticky works */
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
}

/* <editor-fold> Site Header */

/* ----- Header Core Styles ----- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--background-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: var(--content-width);
    height: var(--header-height);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* </editor-fold>*/

/* <editor-fold> Site content */
main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* </editor-fold>*/


/* content container - entire post section, without header and footer */
.entry-content {
    padding-bottom: 2rem;
    flex: 1;
}

/* <editor-fold> Page */
/* Style each section */
.page-section {
    text-align: left;
    width: 100%; /* Ensures the background takes full width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align children to the right */
    justify-content: center; /* Center vertically */
}

.page-section-inner {
    box-sizing: border-box;
    max-width: var(--content-width); /* Limits content to 1200px */
    width: 100%;
    margin: 0 auto; /* Centers the content */
    padding: 4rem 1rem;
}

/* Alternate Backgrounds for Sections */
.page-section:nth-child(odd) {
    background-color: var(--background-color);
}

.page-section:nth-child(even) {
    background-color: var(--background-color2);
}


/* <editor-fold> Post styling */
.wp-block-post-title h2 {
    box-sizing: border-box;
    word-break: break-word;
    line-height: 1.2em;
    font-size: 1.5rem;
}

/* </editor-fold>END Post styling */

/* </editor-fold> end Page */

/* <editor-fold> Post */
body.single main {
    width: var(--content-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}

/* </editor-fold> end post */

.note {
    background-color: #6F55FF22;
    padding: 10px;
    border: 1px solid #6F55FF44;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* <editor-fold> Footer */
footer {
    flex-grow: 1;
    width: 100%;
    display: flex;
    background-color: var(--footer-background-color);
    border-top: 1px solid #333;
    padding: 20px 0;
    margin: 0 auto;

}

.site-footer > * {
    max-width: var(--content-width);
    margin: 0 auto;
}

/* </editor-fold>*/

/* Base Typography Settings */
html {
    font-size: 15px; /* 1rem = 15px */
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
}

h1 {
    font-size: 3rem;
}

/* 45px */
h2 {
    font-size: 2.25rem;
}

/* 33.75px */
h3 {
    font-size: 1.8rem;
}

/* 27px */
h4 {
    font-size: 1.5rem;
}

/* 22.5px */
h5 {
    font-size: 1.2rem;
}

/* 18px */
p {
    font-size: 1rem;
}

/* 15px */

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 2rem;
}

.hero h1 {
    font-size: 8.66rem; /* ≈130px */
    font-weight: 200;
    align-self: flex-start;
    line-height: 1.1;
}

.hero h2 {
    font-size: 3rem; /* 45px */
    font-weight: 200;
    align-self: flex-end;
    text-align: right;
    line-height: 1.2;
    width: 100%;
}

.hero p {
    font-size: 1rem;
    font-weight: 200;
    max-width: 100%;
}


.site-logo img {
    height: auto;
    width: 110px;
}
/* Responsive Typography */

/* desktop and wide screen only */
@media (min-width: 1024px) {

    .multi-column-text {
        column-count: 2;
        column-gap: 2em;
    }
}

/* tablete cred  */
@media (min-width: 769px) and (max-width: 1023px)  {

    html {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 6rem;
    }

    .hero h2 {
        font-size: 2.5rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

}
/*telefoane mari, tablete mici si telefoane in landscape */
@media (min-width: 481px) and (max-width: 768px) {
    html {
        font-size: 13px;
    }

    .hero h1 {
        font-size: 4.8rem;
    }

    .hero h2 {
        font-size: 2rem;
    }

}
/* mobile */
@media (max-width: 480px) {
    .site-logo img {
        width: 90px;
    }
    html {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 3.2rem;
    }

    .hero h2 {
        font-size: 1.5rem;
    }

    .hero {
        align-items: center;
        text-align: center;
    }
}


/* ----- WordPress Specific Adjustments ----- */
/* Account for admin bar */
.admin-bar .site-header {
    top: 32px;
}


/* ----- Cleanup: Remove These If They Exist ----- */
.wp-block-template-part:first-of-type {
    /* Remove all positioning properties */
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}


/* Align buttons properly */
.header-buttons {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
}

.header-buttons a {
    background: none;
    border-radius: 0;
    color: var(--primary-color);
}
.language-switcher{
    padding: 0 1rem;
    white-space: nowrap;
}

.language-switcher .active{
    font-weight: normal;
}
.language-switcher .inactive{
    color: var(--secondary-color);
    font-weight: bold;
}

/* </editor-fold>  Main menu*/

/* Dark Mode */

[data-theme="dark"] body {
    background-color: var(--background-color);
    color: var(--primary-color);
}

[data-theme="dark"] .menu-popup {
    background: #222;
    color: var(--primary-color);
}


/* Header */
[data-theme="dark"] .site-header {
    background: var(--menu-background-color);
    border-bottom: 1px solid #333;
}

/* polylang switcher */
.lang-item {
    list-style: none;
    padding: 5px;
}

.current-lang {
    border: 1px solid grey;
    filter: none;
}

.lang-item img {
    width: 24px; /* Set the width */
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.lang-item a {
    padding: 0;
}

/* Footer */
.site-footer {
    color: grey;
    font-size: .8rem;
    padding: 1rem;
}

.site-footer h2 {
    font-size: 1.2rem;
    color: gray;
    margin: .1rem;
}

.site-footer p {
    font-size: .8rem;
    line-height: 1.2rem;
}

.site-footer li {
    margin-bottom: .5rem;
}

.site-footer a {
    font-size: .8rem;
    color: inherit;
    text-decoration: none;
    list-style: none;
}

.site-footer ul {
    padding-left: 1.8rem;
}

/* General, helpfull classes*/
.debug {
    border: 1px dashed red;
}

.no-margin-top {
    margin-top: 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.no-margin {
    margin: 0;
}

.padding-20 {
    padding: 20px;
}

.padding-x-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.padding-y-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.bg-yellow {
    background-color: yellow !important;
}

.bg-green {
    background-color: green !important;
}

.bg-red {
    background-color: red !important;
}

.bg-gray {
    background-color: gray !important;
}

.hide {
    display: none !important;
}

.show {
    display: block;
}

.flex {
    display: flex;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.height-1rem {
    height: 1rem;
}

.height-2rem {
    height: 2rem;
}

.height-3rem {
    height: 3rem;
}

.height-4rem {
    height: 4rem;
}

.height-5rem {
    height: 5rem;
}

.full-width {
    width: 100%;
}

.full-page {
    min-height: 100vh;
}

.half-page {
    min-height: 50vh;
}