/* --- CSS ცვლადები და გლობალური პარამეტერები --- */
:root {
    --color-soft-black: #282828;
    --color-orange: #FFA500;
    --color-white: #FFFFFF;
    --font-size-base: 16px;
    --gap-size: 20px;
    --transparent-bg: rgba(40, 40, 40, 0.4);
}

/* --- ფონტის ინტეგრაცია --- */
@font-face {
    font-family: 'TGSquare';
    src: url('main/fonts/TGSquare.woff2') format('woff2'),
         url('main/fonts/TGSquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* --- Base styles for HTML and Body --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: var(--font-size-base);
    background-image: url("main/foni.png");
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    min-height: 100vh;
}

/* --- ტექნიკური ფონტის გამოყენება კონკრეტულ ელემენტებზე --- */
.copyright-bar,
.menu-area .main-nav.desktop-nav-boxed li a,
.ad-left-area p,
.ad-right-1 p, .ad-right-2 p, .ad-right-3 p,
.article-preview h4,
.article-preview p,
.slider-area .slide .label,
.speedometer-area .wrapper-main-label,
.speedometer-area .value-display,
.speedometer-area .speedometer-sub-label {
    font-family: 'TGSquare', Arial, sans-serif;
}

/* --- Main Layout Container (გვერდის 92% ჩარჩო) --- */
.main-layout-container {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 0;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    background-color: var(--transparent-bg);
    padding: 20px;
    box-sizing: border-box;
    min-height: 92vh;
    height: calc(92vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Copyright Bar --- */
.copyright-bar {
    width: 100%;
    text-align: center;
    padding: 16px 0;
    color: var(--color-white);
    font-size: 0.6em;
    margin-top: auto;
}

.copyright-bar .copyright-symbol {
    color: var(--color-orange);
}

/* --- Header Icons (სოციალური ქსელები) --- */
.header-icons-container {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;        /* შენარჩუნებული ზომა */
    height: 26px;
    font-size: 0.75em;
    border-radius: 5px;
    text-decoration: none;
    color: var(--color-white);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-link i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Hover ეფექტი ყველა ღილაკისთვის */
.icon-link:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* ფერები */
.icon-link.facebook { background-color: #3b5998; }
.icon-link.instagram { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.icon-link.youtube { background-color: #FF0000; }
.icon-link.mail { background-color: #D44638; }
.icon-link.user-profile { background-color: #007bff; }
.icon-link.register { background-color: #28a745; }
.icon-link.whatsapp { background-color: #25D366; }
.icon-link.viber { background-color: #665CAC; }



/* --- მობილური მენიუს სტილები (თავდაპირველად დამალული) --- */
.hamburger-menu, .mobile-nav { display: none; }

/* --- Main Grid Container for the inner layout --- */
.page-grid-container {
    display: grid;
    grid-template-columns: 22% 53% 22%;
    grid-template-rows: auto 1.4fr 0.6fr;
    grid-template-areas:
        "left-stack menu right-stack"
        "left-stack gallery right-stack"
        "left-stack blog right-stack";
    gap: var(--gap-size);
    width: 100%;
    height: 100%;
    color: var(--color-white);
    overflow: hidden;
}

/* Grid Areas-ის მინიჭება */
.left-stack-area {
    grid-area: left-stack;
    display: flex;
    flex-direction: column;
    gap: var(--gap-size);
    grid-row: 1 / -1;
    height: 100%;
}
.menu-area {
    grid-area: menu;
    justify-self: center;
    align-self: start;
}
.right-stack-area {
    grid-area: right-stack;
    display: flex;
    flex-direction: column;
    gap: var(--gap-size);
    grid-row: 1 / -1;
    height: 100%;
}
.gallery-area { grid-area: gallery; }
.blog-area { grid-area: blog; }

/* ყველა ბლოკი, რომელსაც სჭირდება ჩარჩო, გამჭვირვალე ფონი და ჩრდილი */
.overlay-element {
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 0;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    background-color: var(--transparent-bg);
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: left;
    z-index: 10;
    min-height: 0;
    position: relative;
}

/* Flex grow for elements inside left and right stacks */
.speedometer-area { flex-grow: 1.85; flex-shrink: 1.15; flex-basis: auto; justify-content: center; align-items: center; }
.ad-left-area { flex-grow: 1; flex-shrink: 1; flex-basis: auto; justify-content: center; align-items: center; }
.ad-right-1, .ad-right-2, .ad-right-3 { flex-grow: 1; flex-shrink: 1; flex-basis: auto; justify-content: center; align-items: center; }

/* --- სპიდომეტრის განლაგება და სტილი --- */
.speedometer-area .wrapper-main-label {
    font-size: 0.8em !important; /* შეცვალეთ ეს მნიშვნელობა თქვენი სურვილისამებრ */
    line-height: 1.2;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 15px;
    font-family: 'TGSquare', Arial, sans-serif;
}

.speedometer-area .speedometer-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4px;
}

.speedometer-area .speedometer-sub-label {
    font-size: 0.6em;
    color: var(--color-white);
    text-align: center;
    margin-top: -26px;
    font-family: 'TGSquare', Arial, sans-serif;
}

.speedometer-area .value-display {
    font-size: 0.6em;
    color: var(--color-orange);
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Menu styles */
.menu-area .main-nav.desktop-nav-boxed { background-color: transparent; border: none; padding: 0; width: 100%; }
.menu-area .main-nav.desktop-nav-boxed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 12px; width: 100%; justify-content: center; align-items: center; }
.menu-area .main-nav.desktop-nav-boxed li a {
    text-decoration: none;
    color: var(--color-white);
    font-size: 0.8em;
    padding: 8px 16px;
    border: none;
    background-color: transparent;
    white-space: nowrap;
    transition: color 0.3s ease, transform 0.2s ease;
    border-radius: 0;
    text-align: center;
    position: relative;
}
.menu-area .main-nav.desktop-nav-boxed li a::before,
.menu-area .main-nav.desktop-nav-boxed li a::after {
    content: '|';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--color-orange);
    font-family: 'TGSquare', Arial, sans-serif;
}
.menu-area .main-nav.desktop-nav-boxed li a::before { left: 0; margin-left: -5px; }
.menu-area .main-nav.desktop-nav-boxed li a::after { right: 0; margin-right: -5px; }
.menu-area .main-nav.desktop-nav-boxed li a:hover::before,
.menu-area .main-nav.desktop-nav-boxed li a:hover::after,
.menu-area .main-nav.desktop-nav-boxed li a:focus::before,
.menu-area .main-nav.desktop-nav-boxed li a:focus::after { opacity: 1; }
.menu-area .main-nav.desktop-nav-boxed li a:hover { color: var(--color-orange); transform: scale(1.05); }

/* სარეკლამო სურათების სტილები */
.ad-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
.ad-left-area p, .ad-right-1 p, .ad-right-2 p, .ad-right-3 p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.7em;
    color: var(--color-white);
    background-color: rgba(40, 40, 40, 0.5);
    padding: 5px 10px;
    border: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.ad-left-area:hover p,
.ad-right-1:hover p,
.ad-right-2:hover p,
.ad-right-3:hover p {
    opacity: 1;
    pointer-events: auto;
}

/* --- ბლოგების არეა - ჰორიზონტალური განლაგება --- */
.blog-area {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 6px 0;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* რანდომ სტატიების ბლოკები - ფიქსირებული ზომა */
.random-article-block {
    width: 28%;
    background-color: rgba(40, 40, 40, 0.6);
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 1px;
    padding: 10px;
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.3);
    display: flex;
    flex-direction: column; /* ელემენტები ერთმანეთის ქვეშ იქნება */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 134px;
    text-decoration: none;
    color: inherit;
}
.random-article-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.5);
}

/* სურათი და სათაური ერთ ხაზზე */
.random-article-block .header-container {
    display: flex;
    align-items: center; /* ელემენტები ვერტიკალურად გასწორდება */
    margin-bottom: 4px; /* დაშორება ტექსტთან */
}

/* სურათის კონტეინერი */
.random-article-block .article-image-container {
    width: 88px;
    height: 64px;
    flex-shrink: 0;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 2px;
}
.random-article-block .article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* სათაური */
.random-article-block .article-title {
    font-size: 0.6em;
    margin: 0;
    color: #FFFFFF;
    font-family: 'TGSquare', Arial, sans-serif;
    font-weight: normal;
}

/* ტექსტის კონტეინერი */
.random-article-block .article-text-snippet {
    font-size: 0.60em;
    color: #FFFFFF;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 20;
    -webkit-box-orient: vertical;
	
}

@media (max-width: 768px) {
    body {
        padding-top: 10px;
        padding-bottom: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .main-layout-container {
        width: 100%;
        padding: 5px;
        min-height: auto;
        height: auto;
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    
    .header-icons-container {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        padding: 10px 0;
        margin-bottom: 10px;
        gap: 15px;
        border-bottom: 1px solid rgba(255, 165, 0, 0.2);
    }
    
    .hamburger-menu {
        display: block; 
        position: fixed; 
        top: 15px; 
        right: 15px; 
        z-index: 9999;
    }

    .main-nav.desktop-nav-boxed {
        display: none; /* <-- დავრწმუნდით, რომ ეს ხაზი აქ არის */
    }
    
    .main-nav.mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .main-nav.mobile-nav.show { display: flex; }
    
    .page-grid-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
        height: auto;
    }

    .menu-area {
      z-index: 100;
    }
    .gallery-area {
      z-index: 99;
    }
    
    .overlay-element { 
        padding: 10px; 
    }

    .left-stack-area, 
    .right-stack-area {
        gap: 10px;
    }
    
    .blog-area {
        flex-direction: column;
        gap: 15px;
    }
    
    .random-article-block {
        width: 100%;
        flex-direction: row;
        align-items: center;
        height: auto;
        min-height: auto;
    }

    .random-article-block .article-text-snippet {
        -webkit-line-clamp: 3;
    }

    .random-article-block .article-image-container { 
        width: 80px; 
        height: 80px;
    }
    
    .copyright-bar { 
        position: static; 
        margin-top: 20px; 
        padding: 10px 0;
    }
}

/* --- H1 სათაურის სტილი SEO-სთვის --- */
.main-page-title {
    font-size: 1.6em; /* შეგიძლიათ შეცვალოთ ზომა */
    font-family: 'TGSquare', Arial, sans-serif;
    font-weight: normal;
    color: var(--color-orange);
    text-align: center;
    margin: 20px 0 20px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}