/* Custom CSS for The Ranch Kos - Matching Logo Colors */

/* -------------------
   1. COLOR PALETTE
   ------------------- */
:root {
    --color-primary: #77401E; /* Dark Brown / Chestnut for primary actions (Success) */
    --color-accent: #DAA520;  /* Gold / Yellow for high-visibility buttons (Warning) */
    --color-dark: #333333;    /* Very Dark Brown for text/footer */
    --color-light-background: #f8f9fa; /* Light background for the Navbar */
}

/* Override Bootstrap Colors */
.btn-primary, .btn-success {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: #5c3218; /* Slightly darker hover */
    --bs-btn-hover-border-color: #5c3218;
    --bs-btn-focus-shadow-rgb: 119, 64, 30;
}

.btn-warning {
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color: var(--color-dark); /* Dark text on gold */
    --bs-btn-hover-bg: #b98a1a;
    --bs-btn-hover-border-color: #b98a1a;
}

.text-success {
    color: var(--color-primary) !important;
}
.border-success {
    border-color: var(--color-primary) !important;
}
.btn-outline-success {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-color: #ffffff;
}

/* -------------------
   2. GLOBAL & TYPOGRAPHY
   ------------------- */
body {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--color-dark);
}

/* -------------------
   3. NAVIGATION BAR (UPDATED TO LIGHT)
   ------------------- */
.navbar-light {
    background-color: var(--color-light-background) !important; /* Light Grey/White Header */
}

.navbar-brand img {
    height: 50px; 
    width: auto;
}

/* Color for the Nav links on the light background */
.navbar-light .navbar-nav .nav-link {
    color: var(--color-dark) !important;
    font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-primary) !important; /* Brown hover effect */
}

/* Navbar toggler for mobile */
.navbar-light .navbar-toggler {
    border-color: var(--color-primary);
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2377401E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}


/* languages */
        .flag-uk { background-image: url('images/flag_uk.png'); }
        .flag-gr { background-image: url('images/flag_gr.png'); }

/* -------------------
   4. HERO SECTION
   ------------------- */
#hero {
    min-height: 100vh; 
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/hero_main.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

#hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
	color: #e2e2e2;
}

/* -------------------
   5. CARDS & SECTIONS
   ------------------- */
.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.ratio-16x9 {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Gallery specific styling */
.gallery-img {
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 8px; 
	
/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.icon > .label {
			display: none;
		}