/*! index.css - Converted to Orange Premium Energetic Theme
    - Gradient: Deep Fire Orange (diagonal smooth)
    - Highlight: Orange Glow
    - Buttons: Gradient Orange Premium
    - Readability: text colors optimized
    - Generated per user preferences; safe Bootstrap-compatible edits only
*/

/* -----------------------------
   Color variables (root)
   ----------------------------- */
:root {
    /* Primary theme (replaced: was --blue) */
    --blue: #ff7a00;              /* Primary orange energetic */
    --red: #b15400;               /* Danger -> burnt orange */
    --secondary-blue: #ffb56b;    /* Soft orange */
    --secondary-red: #e67a3a;     /* Accent orange */
    --cream: #faf3e0;             /* Soft cream background */
    --light-brown: #ffd9b3;       /* Light neutral */
    --brown: #ff8c32;             /* Medium orange */
    --darker-brown: #e06a00;      /* Darker orange for hover */
    --dark-brown: #b15400;        /* Burnt orange */
    --dark: #4a3628;              /* Dark text (warm) */

    /* Gradient endpoints for convenience */
    --gradient-start: #ff7a00;
    --gradient-end: #b84300; /* deep fire orange */
}

/* -----------------------------
   Fonts & reset (unchanged)
   ----------------------------- */
@font-face {
    font-family: "First Fun";
    src: url('../../assets/firstfun-webfont.woff');
}

@font-face {
    font-family: "Freude";
    src: url('../../assets/freude-webfont.woff');
}

* {
    -webkit-tap-highlight-color: transparent;
}
::selection {
    color: #fff;
    background-color: #333;
}
body{
    font-family: "Nunito", sans-serif;
    overflow-x: hidden;
    color: var(--dark); /* improved readability */
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h4, .h5, .h6, .font-freude {
    font-family: "Freude", "Nunito", sans-serif;
}
.font-default {
    font-family: "Nunito", sans-serif;
}

/* -----------------------------
   Background helpers updated
   ----------------------------- */
/* primary/backgrounds now use the orange gradient or solid as appropriate */
.bg-primary, .bg-blue {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) !important;
    color: #fff !important;
}

.bg-danger, .bg-red {
    background-color: var(--red) !important;
    color: #fff !important;
}

/* Keep a brown-like utility for legacy uses but tuned to orange */
.bg-brown {
    background-color: var(--brown);
    color: var(--dark);
}
.bg-brown a { color: var(--dark); }

/* Text helpers */
.text-brown {
    color: var(--dark);
}

/* -----------------------------
   Button styles (Bootstrap-friendly overrides)
   - .btn-primary uses gradient
   - outline variants adapted
   ----------------------------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    --bs-btn-border-color: transparent;
    color: var(--bs-btn-color);
    background-image: var(--bs-btn-bg);
    border: 1px solid transparent;
    box-shadow: none;
    transition: transform .12s ease, box-shadow .14s ease;
}

.btn-primary:hover, .btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184,88,12,0.18);
    background-image: linear-gradient(135deg, var(--gradient-start), #d85b00);
}

.btn-outline-primary {
    --bs-btn-color: var(--dark);
    --bs-btn-border-color: var(--brown);
    color: var(--bs-btn-color);
    background: transparent;
    border: 1px solid rgba(177,96,19,0.18);
}
.btn-outline-primary:hover {
    background-image: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    border-color: transparent;
}

/* Danger buttons turned into burnt-orange look */
.btn-danger, .btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
}
.btn-danger:hover, .btn-red:hover {
    background-color: #9b3f00;
    border-color: #9b3f00;
}

/* Outline-danger follow the same burnt palette */
.btn-outline-danger {
    --bs-btn-color: var(--red);
    --bs-btn-border-color: var(--red);
    color: var(--red);
    border-color: var(--red);
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
}

/* -----------------------------
   Circle progress and small controls
   ----------------------------- */
.circle-progress-value {
	stroke-width: 6px;
	stroke: var(--dark);
}
.circle-progress-circle {
	stroke-width: 6px;
	stroke: var(--light-brown);
}
.circle-progress-text {
	fill: var(--dark);
    font-size: 1.5em;
}

/* -----------------------------
   Small UI & utility polish (hover glow, links)
   ----------------------------- */
/* subtle orange glow for important interactive elements */
.glow-highlight, .link-icon:hover, a.glow, .btn-primary:focus {
    box-shadow: 0 8px 30px rgba(255,122,0,0.12);
    transition: box-shadow .18s ease, transform .12s ease;
}

/* links */
a {
    color: var(--gradient-start);
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--gradient-end);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* navbar */
.navbar {
    transition: .3s;
    background: transparent;
}
.navbar-light a {
    color: var(--dark);
}

/* clock/cta small improvements */
#clockdiv { 
    display: inline-block; 
    font-weight: bold; 
    max-width: 100%;
} 
#clockdiv div { 
    display: inline-block;
    text-align: center;
    border-left: 2px solid var(--dark);
} 
#clockdiv div:nth-child(1) {
    border: none;
}

/* -----------------------------
   Covers & map updated to diagonal smooth orange gradient
   ----------------------------- */
.cta-cover {
    background: linear-gradient(135deg, rgba(255,136,0,0.75), rgba(255,94,0,0.80)), url('../../assets/img/lari2.png') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
}

.map-cover {
    background: radial-gradient(circle at 30% 30%, rgba(255,181,107,0.85) 0%, rgba(184,67,0,0.9) 60%), url('../../assets/img/dnatural.png');
    background-size: cover;
    background-position: center;
    color: #fff;
}

/* -----------------------------
   Shapes / dividers adapt color (keeps white fill for overlays)
   ----------------------------- */
.shape-fill {
    fill: #FFFFFF;
}

/* -----------------------------
   Icon / link-icon tweaks
   ----------------------------- */
.link-icon {
    color: inherit;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid rgba(74,54,40,0.12);
    display: inline-block;
    text-align: center;
    position: relative;
    transition: .3s;
}
.link-icon:hover, .link-icon:active, .link-icon:focus {
    color: inherit;
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(255,122,0,0.12);
}

/* -----------------------------
   Misc adjustments (readability + spacing)
   ----------------------------- */
.btn-red {
    background-color: var(--red);
    color: #fff;
}

/* CTA adjustments */
.event-icon {
    width: 100px;
    filter: brightness(0.95) contrast(1.02);
}

/* Top button */
#topbtn {
    position: fixed;
    right: 3%;
    bottom: 5%;
    width: 50px;
    height: 50px;
    padding: 10px;
    transition: .3s;
    z-index: 9;
    border: none;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(184,67,0,0.14);
}

/* scroll indicator unchanged except color */
.scroll {
    position:absolute;
    bottom:15%;
    left:50%;
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
    z-index:2;
    display:inline-block;
    color:#fff;
    text-decoration:none;
    transition:opacity .3s;
    cursor:pointer
}
.scroll:hover {
    opacity:.85
}

/* -----------------------------
   Responsive tweaks (unchanged structure)
   ----------------------------- */
/** For tablet devices **/
@media (min-width: 768px) and (max-width: 1023px) {
    .custom-shape-divider-bottom-1654674775 svg {
        width: calc(100% + 1.3px);
        height: 90px;
    }
    .custom-shape-divider-top-1654678694 svg {
        width: calc(100% + 1.3px);
        height: 90px;
    }
    .custom-shape-divider-bottom-1654674775 {
        bottom: -1px;
    }
    .custom-shape-divider-top-1654678694 {
        top: -1px;
    }
}

/** For mobile devices **/
@media (max-width: 767px) {
    #topbtn {
        bottom: 3%;
        right: 5%;
    }
    .frame {
        height: 250px;
    }
    .scroll {
        bottom:20%;
    }
    .custom-shape-divider-bottom-1654674775 {
        bottom: -1px;
    }
    .custom-shape-divider-bottom-1654674775 svg {
        width: calc(100% + 1.3px);
        height: 50px;
    }
    .custom-shape-divider-top-1654678694 {
        top: -1px;
    }
    .custom-shape-divider-top-1654678694 svg {
        width: calc(100% + 1.3px);
        height: 50px;
    }
}

/* -----------------------------
   Developer notes (inside file for future edits)
   - To change main gradient, edit --gradient-start and --gradient-end in :root
   - Danger color uses --red (burnt orange)
   - Buttons use gradient; modify .btn-primary rules for different hover
   ----------------------------- */