/*
Theme Name: Escapium Child
Theme URI: https://themeforest.net/user/dan_fisher/portfolio
Description: Child theme for Escape Room Game WordPress Theme
Version: 1.0.0
Author: Dan Fisher
Author URI: https://themeforest.net/user/dan_fisher
Template: escapium
*/

/* =========================================
   CUSTOM STYLES FOR ESCAPIUM CHILD THEME
   ========================================= */

/* Add your custom CSS below this line */

a {
    color: #fff;
    text-decoration: none;
    border-bottom: 2.2px solid #ffba07;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    transition: color 0.2s linear;
}

a:hover {
    border-bottom: none;    
}

#tripadvisor-rating a, a:hover {
    border-bottom: none;
    text-decoration: none;
}

a.accordion__item-header {
    border-bottom: none;
}

.footer__logo a {
    border-bottom: none;
}

.footer__logo img {
    max-width: 200px;
}

/* Menubar links */

.main-nav {
    font-size: 1rem;
    color: #8f8f8f;
}

.main-nav__list > li > a {
    border-bottom: none;
}

.main-nav__list > li.active > a {
    color: #fff;
    text-decoration: none;
}


.main-nav__list>li.current-menu-item>a {
    color: #FFF;
    text-decoration: none;
    border-bottom: 2.2px solid #ffba07;
}

/* Example: Style the location badge on room archives */
.room-location {
    display: inline-block;
    padding: 5px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
}

.room-location i {
    /* color: #007bff; */
    margin-right: 5px;
}

/* Example: Style location archive header */
.page-heading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    margin-bottom: 40px;
}

.page-heading__title {
    color: white;
    margin-bottom: 10px;
}

.page-heading__subtitle {
    font-size: 18px;
    opacity: 0.9;
}

/**
 * Custom Styles for Flexible Sidebar Items
 * Add this to your child theme's style.css
 */

/* Uppercase text style for sidebar items */
.room-details__item.text-uppercase {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Underline links in sidebar */
.room-details__item a {
    text-decoration: none;

}

.room-details__item a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Spacing between sidebar items */
.room-details__item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* Icon spacing in sidebar */
.room-details__item i {
    margin-right: 10px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Make booking button stand out */
.btn-primary.btn-lg.btn-block {
    margin-top: 25px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   ROOM COMPLEXITY — icon row
   =========================================
   The icons are rendered as <i> tags by PHP,
   so no font-family or content: tricks needed
   here. CSS only handles layout and spacing.
   ========================================= */

.rooms--list .room__complexity {
    /* Sits flush — no bottom margin.
       The .room__complexity-label div below it
       handles its own spacing naturally. */
    margin-bottom: 0.2rem; 
    /* line-height: 1; */
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 16px;
    /* width: 86px; */
    letter-spacing: 6px;
    /* font-family: "Ionicons"; */
    font-weight: normal;
    font-style: normal;
}

.room__complexity i {
    margin-right: 4px;
    letter-spacing: 0.2em;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
}

.room__complexity i:last-child {
    margin-right: 0;
}

/* On the single room meta bar, add a small gap
   between the icons and the "Difficulty: Medium"
   label that sits below them */
.room__meta--lg .room__meta-item-value .room__complexity {
    /* margin-bottom: 4px; */
}


/* =========================================
   DIFFICULTY LABEL
   =========================================
   Its own block element so spacing between
   the icons, the label, and the room title
   is normal document flow — no margin hacks.
   ========================================= */

.room__complexity-label {
    /* margin-bottom: 0;
    line-height: 1.3; */
    margin-bottom: 1.875rem;
    font-size: 0.8875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fff;    
}

.room__complexity-label-inner {
    /* font-family: "Montserrat", sans-serif; */
    font-size: 0.8875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
}


/* =========================================
   META ITEM — pin + area name
   =========================================
   Shown on summary cards via rooms-meta.php.
   Hidden automatically when field is empty.
   ========================================= */

.room__meta-item {
    font-size: 0.8875rem;
    color: #717171;
}

@media (min-width: 992px) {
    .room__meta-item {
        margin-right: 1.5rem;
    }
}

.room__meta-item--location {
    /* inherits all .room__meta-item base styles */
}

.rooms--list .room__meta-item--location {
    text-transform: uppercase;
}

/* Optional: Yellow button like in screenshot */
/*
.btn-primary.btn-lg.btn-block {
    background-color: #FDB913;
    border-color: #FDB913;
    color: #000;
}
*/

/*
.btn-primary.btn-lg.btn-block:hover {
    background-color: #E5A711;
    border-color: #E5A711;
    color: #000;
}
*/

/* Remove button icon if you don't want it */
/*
.btn-primary.btn-lg.btn-block i {
    display: none; 
}
*/


/* //////////////////////////////////
// Custom CSS - By Michael
///////////////////////////////////// */
/*
a:hover {
    color: #ffba07;
    text-decoration: none;
}

a {
    color: #fff;
    text-decoration: none;
    border-bottom: 2.2px solid #ffba07;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    transition: color 0.2s linear;
}

nav.menu-item a {
   text-align: center;
   border-bottom: none;
   text-transform: capitalize;
}

nav.main-nav__list>li>a {
    text-align: center;
    border-bottom: none;
    text-transform: capitalize;
}

nav.main-nav__list>li.active>a {
    color: #fff;
    text-decoration: none;
    border-bottom: none;
}

*/