/*
 * =========================================================
 * Theme Name: D3V Template
 * Theme URI: https://d3v.website/travel/
 * Author: d3v Team
 * Author URI: https://d3v.website/
 * Description: Designed and developed by d3v
 * Text Domain: d3v
 * Tags: thiet ke web, thiet ke web wordpress
 * =========================================================
 */

/* ======================================
 * SECTION: FONT IMPORTS
 * ====================================== */

/**
 * Google Fonts Import
 * - Lexend Deca: Modern, clean sans-serif with variable weight
 * - Righteous: Distinctive display font for headings
 * - Goldman: Bold, geometric font for statements
 */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Righteous&family=Goldman:wght@400;700&display=swap');

/* ======================================
 * SECTION: CUSTOM FONT DECLARATIONS
 * ====================================== */

/**
 * GoogleSans Font Family
 * - Primary font used throughout the site
 * - Complete set with regular, medium, bold and italics
 */
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Optimizes font rendering */
}

@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ======================================
 * SECTION: CSS VARIABLES
 * ====================================== */

/**
 * Global CSS Variables
 * - Color scheme with primary brand colors
 * - Typography settings
 * - Transition effects
 * - Gradients
 */
:root {
    /* Color Palette */
    --c-dark: #212529;         /* Dark shade for text */
    --c-brand: #fb5533;        /* Primary brand color - orange */
    --c-white: #FFF;           /* Pure white */
    --c-primary: #fb5533;      /* Same as brand color for consistency */
    --c-brand-light: #f53d2d;  /* Lighter variation of brand color */
    --c-brand-rgb: 238, 77, 45; /* RGB values for opacity manipulation */
    --c-body: #727272;         /* Body text color - gray */
    
    /* Gradients */
    --bg-primary-gradient: linear-gradient(-180deg, #f53d2d, #f63); /* Orange gradient */
    
    /* Typography */
    --heading-font: "Goldman", sans-serif;  /* Bold, distinctive font for headings */
    --body-font: "GoogleSans", sans-serif;  /* Clean, readable font for body text */
    
    /* Effects */
    --transition: all 0.5s ease; /* Standard transition for animations */
    
    /* Additional UI Variables */
    --primary-color: #fff;                  /* Primary UI color */
    --border-light: #eee;                   /* Light border color */
    --bg-white: #ffffff;                    /* White background */
    --text-dark: #000;                      /* Dark text color */
    --shadow-color: rgb(2 58 81 / 20%);     /* Shadow with opacity */
    --transition-duration: 300ms;           /* Quick transition duration */
    --transition-timing: cubic-bezier(.42, .01, .58, 1); /* Smooth easing */
}

/* ======================================
 * SECTION: BASE STYLES
 * ====================================== */

/**
 * Base Typography and Layout
 * - Sets the foundation for text and spacing
 */
body {
    font-family: var(--body-font);
    font-size: 16px;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* ======================================
 * SECTION: HEADER & NAVIGATION
 * ====================================== */

/**
 * Header Styling
 * - Uses the primary gradient for brand recognition
 */
.header {
    background: var(--bg-primary-gradient);
}

/**
 * Brand Button Styling
 * - Primary action buttons with brand colors
 * - Hover effect for better user feedback
 */
.btn-brand {
    background: var(--c-brand);
}

.btn-brand:hover {
    background: var(--c-brand-light);
}
.bg-brand {
    background: var(--c-brand);
}
.fs-sm {
    font-size: 10px;
}
.fs-md {
    font-size: 14px;
}
/**
 * Gradient Background
 * - Applies the primary gradient to elements
 */
.bg-brand-gradient {
    background: var(--bg-primary-gradient);
}

/**
 * Heading Typography
 * - Applies the distinctive heading font
 */
.heading {
    font-family: var(--heading-font);
}

/**
 * Feature Box Styling
 * - Used for icons or small feature highlights
 * - Creates a circular container with brand colors
 */
.box {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--c-brand-rgb), 0.1); /* Semi-transparent brand color */
    color: var(--c-brand);
    font-size: 34px;
    flex: none;
    border-radius: 50%; /* Perfect circle */
}

/* ======================================
 * SECTION: SCROLL TO TOP BUTTON
 * ====================================== */

/**
 * Scroll to Top Button
 * - Fixed position button that appears when scrolling down
 * - Animated entrance and exit
 */
.scroll-top {
    height: 60px;
    width: 60px;
    background-color: var(--c-brand);
    border-radius: 50%;
    position: fixed;
    bottom: 60px;
    right: 20px;
    transform: scale(0); /* Start invisible */
    display: grid;
    place-items: center;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
    z-index: 100; /* Ensure it's above other content */
}

/**
 * Active State for Scroll Button
 * - Shown when user scrolls down the page
 * - Animated entrance
 */
.scroll-top.active {
    bottom: 80px;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    animation: scroll-Top 500ms ease-in-out;
    transition: 0.3s;
}

/**
 * Inner Content of Scroll Button
 * - Slightly smaller circle within the button
 * - Contains the arrow icon
 */
.scroll-top-value {
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    background-color: var(--c-brand);
    color: var(--c-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
}

.scroll-top-value i {
    font-size: 20px; /* Larger icon for better visibility */
}

/* ======================================
 * SECTION: IMAGE HANDLING
 * ====================================== */

/**
 * Image Aspect Ratios
 * - Maintains consistent image proportions
 * - Ensures images cover their containers properly
 */
.img-1x1, .img-1x2, .img-2x1 {
    transition: .3s; /* Smooth transition for any changes */
    object-fit: cover; /* Ensures image fills container */
    object-position: center; /* Centers the image focus */
}

/* Slightly wider than tall aspect ratio */
.img-1x1 {
    aspect-ratio: 1 / 0.8;
}

/* Perfect square aspect ratio */
.img-1x2 {
    aspect-ratio: 1 / 1;
}

/* Landscape/horizontal aspect ratio */
.img-2x1 {
    aspect-ratio: 1 / 0.7;
}


/* ======================================
 * SECTION: NAVIGATION MENU
 * ====================================== */

/**
 * Menu Hover States
 * - Consistent hover effects across all menu levels
 * - Highlights current active menu item
 */
.menu-primary ul li:hover > a,
.menu-primary ul.sub-menu li:hover > a,
.menu-primary li.current-menu-item > a {
    color: var(--primary-color);
}

/**
 * Submenu Styling
 * - Dropdown menu with animation
 * - Box shadow for depth perception
 */
.menu-primary ul.sub-menu {
    width: 270px;
    position: absolute;
    z-index: 999; /* Ensures menu appears above other content */
    background: var(--c-primary);
    transition: all var(--transition-duration) var(--transition-timing),
                transform var(--transition-duration) var(--transition-timing);
    text-align: left;
    box-shadow: 0px 20px 32px -12px var(--shadow-color);
    transform: translateY(20px); /* Initial position for animation */
    visibility: hidden;
    opacity: 0;
    list-style: none;
    left: 0;
    padding: 0;
}

/**
 * Submenu Visibility on Hover
 * - Shows submenu when parent is hovered
 * - Animates the appearance
 */
.menu-primary ul li.menu-item-has-children:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Final position after animation */
}

/**
 * Nested Submenu Positioning
 * - Positions third-level menus to the right of parent
 */
.menu-primary > ul > li > ul.sub-menu > li > ul {
    left: 200px;
    top: 0;
}

/**
 * Submenu Item Styling
 * - Adds borders between items
 */
.menu-primary ul.sub-menu li {
    border-bottom: 1px solid var(--border-light);
}

.menu-primary ul.sub-menu li a {
    color: var(--text-dark);
}

/**
 * Dropdown Indicators
 * - Adds arrows to menu items with children
 * - Different arrows for top and nested levels
 */
.menu-primary ul li.menu-item-has-children:after {
    font-weight: 400;
    font-family: 'bootstrap-icons'; /* Uses Bootstrap icons */
    position: absolute;
    top: 13px;
    right: 0;
    color: var(--c-white);
    font-size: 10px;
}

/* Down arrow for top-level items */
.menu-primary > ul > li.menu-item-has-children:after {
    content: "\F282"; /* Bootstrap icon code for down arrow */
}

/* Right arrow for submenu items */
.menu-primary ul > li > ul > li.menu-item-has-children:after {
    content: "\f101"; /* Bootstrap icon code for right arrow */
}

/**
 * Top-level Menu Item Hover Effect
 * - Animated underline effect
 * - Uses pseudo-elements for top and bottom lines
 */
.menu-primary > ul > li > a:after,
.menu-primary > ul > li > a:before {
    background: transparent;
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translate3d(0, 0, 0); /* Hardware acceleration */
    transition: width 0.2s ease;
}

/* Bottom line */
.menu-primary > ul > li > a:after {
    bottom: 0;
}

/* Top line */
.menu-primary > ul > li > a:before {
    top: 0;
}

/* Active state for hover and current item */
.menu-primary > ul > li:hover > a:after,
.menu-primary > ul > li:hover > a:before,
.menu-primary li.current-menu-item > a:after,
.menu-primary li.current-menu-item > a:before {
    background: var(--primary-color);
    width: 100%; /* Expand to full width */
}

/* ======================================
 * SECTION: OFFCANVAS MENU
 * ====================================== */

/**
 * Offcanvas Header Decoration
 * - Adds a decorative circular gradient
 * - Positioned in the corner for visual interest
 */
.offcanvas-header:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    height: 12.5rem;
    width: 12.5rem;
    right: -5.25rem;
    top: -6.938rem;
    background-image: linear-gradient(-45deg, rgba(var(--c-brand-rgb), .41), var(--c-brand-light));
}
.title-limit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}