/* =============================================================
ENTELA — CONSOLIDATED BRAND STYLES
Palette: #f5f2f2 (Cream), #2e2b28 (Dark), #c4622d (Terracotta)
*/

/* 1. GLOBAL TYPOGRAPHY & RESET */
body {
background-color: #f5f2f2;
color: #444a54;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 17px;
line-height: 1.75;
}

h1, h2, h3, h4 {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
color: #444a54;
line-height: 1.25;
}

a { color: #9a8272; text-decoration: none; transition: 0.3s; }
a:hover { color: #2e2b28; }

/* 2. NAVIGATION — SEAMLESS BLEED WITH BOX-SHADOW FIX */
#site-header, .site-header, header.site-header {
    background-color: #F5F2F2 !important;
    border-bottom: 2px solid #C4622D !important;
    box-shadow: 0 4px 15px rgba(196, 98, 45, 0.25) !important;
    position: sticky !important;
    top: 0;
    z-index: 9999;
	height: 100px !important;
	max-height: 100px !important;
}

.header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important; 
    padding: 0 64px !important;
    height: 100% !important;
	max-height: 100% !important;
}

nav.site-navigation {
    display: flex !important;
    align-items: flex-end !important; 
    height: 100% !important; 
    margin: 0 0 40px 0 !important;
	transform: translateY(18px);
    padding: 0 !important;
}

nav.site-navigation ul.menu {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    height: 100% !important;
    margin: 0px 2px 0 2px !important;
    padding: 0 !important;
    list-style: none !important;
}

nav.site-navigation ul.menu li {
    display: flex !important;
    margin: 0px 2px 0 2px !important;
    padding: 0 !important;
}

nav.site-navigation ul.menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	box-sizing: border-box !important;
    height: 65px !important;
    margin: 0 2px 0 2px !important;
    padding: 0px 15px 0 20px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #C4622D !important;
    opacity: 0.7;
	line-height: 1 !important;
    position: relative;
    border-radius: 8px 8px 0 0 !important; 
    transition: all 0.3s ease !important;
}

nav.site-navigation ul.menu li.current-menu-item a,
nav.site-navigation ul.menu li.current_page_item a {
    background-color: #f5f2f2 !important;
    color: #c4622d !important;
    opacity: 1 !important;
    z-index: 10;
    box-shadow: inset 0 -4px 0 #C4622D !important;
    border-radius: 8px 8px 0 0 !important;
}

nav.site-navigation ul.menu li a:hover {
    background-color: rgba(196, 98, 45, 0.8) !important;
    opacity: 1 !important;
    color: #F5F2F2 !important;
    border-radius: 8px 8px 0 0 !important; 
}

/* 3. WRITING PAGE HERO */
.entela-page-header {
background-color: #2e2b28 !important;
padding: 160px 64px 96px !important;
}

.entela-page-header h1,
.entela-page-header .elementor-heading-title {
font-size: 52px !important;
color: #f5f2f2 !important;
margin-bottom: 24px !important;
}

.entela-page-header p,
.entela-page-header .elementor-text-editor {
font-family: 'Libre Baskerville', serif !important;
font-style: italic !important;
font-size: 19px !important;
color: rgba(245,242,242,0.75) !important;
}

/* 4. THE WRITING PAGE — EDITORIAL POST LIST */
.entela-posts-list {
max-width: 1100px !important;
margin: 60px auto !important;
padding: 0 40px !important;
}

.entela-posts-list .listing-item {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
padding: 32px 0 !important;
border-bottom: 1px solid rgba(68,74,84,0.1) !important;
margin: 30px !important;
visibility: visible !important;
opacity: 1 !important;
}

.entela-posts-list .date {
flex: 0 0 140px !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #9a8272 !important;
}

.entela-posts-list .title {
flex: 1 !important;
font-size: 22px !important;
color: #444a54 !important;
}

.entela-posts-list .title a {
color: #444a54 !important;
text-decoration: none !important;
font-family: 'Libre Baskerville', serif !important;
}

.entela-posts-list .title a:hover {
color: #c4622d !important;
}

.entela-posts-list .excerpt {
flex: 0 0 120px !important;
text-align: right !important;
font-size: 10px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
opacity: 0.5;
}

/* =============================================================
5. SINGLE POST TYPOGRAPHY & ALIGNMENT
============================================================= */

/* Post Titles */
body.single-post h1.entry-title,
body.single-post .entry-header h1,
body.single-post .elementor-widget-theme-post-title h1,
body.single-post .elementor-widget-theme-post-title h2,
body.single-post .elementor-widget-heading h1,
body.single-post .elementor-widget-heading h2,
body.single-post h1.wp-block-post-title,
body.single-post h1 {
max-width: 760px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 60px !important;
margin-bottom: 40px !important;
display: block !important;
text-align: left !important;
font-size: 48px !important;
font-family: 'Libre Baskerville', serif !important;
color: #2e2b28 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}

/* Post Headings (H2) */
body.single-post h2.wp-block-heading,
body.single-post .entry-content h2,
.entry-content h2,
.wp-block-heading h2 {
font-family: 'Libre Baskerville', serif !important;
font-size: 36px !important;
color: #2e2b28 !important;
margin-top: 60px !important;
margin-bottom: 30px !important;
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}

/* Post Headings (H3) */
body.single-post h3,
body.single-post .entry-content h3,
body.single-post h3.wp-block-heading {
display: block !important;
max-width: 760px !important;
margin: 2.5em auto 1.2em !important;
padding-left: 0 !important;
text-align: left !important;
font-family: 'Libre Baskerville', serif !important;
color: #2e2b28 !important;
}

/* Content Column Wrapper */
body.single-post .entry-content,
body.single-post .wp-block-post-content {
max-width: 840px !important;
margin: 0 auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
box-sizing: border-box !important;
}

/* Paragraphs */
body.single-post p,
.entry-content p,
.post-content p,
.wp-block-post-content p {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: 21px !important;
line-height: 1.85 !important;
font-family: 'Lato', sans-serif !important;
color: #444a54 !important;
}

/* Unbreakable List Alignment */
html body.single-post ul:not(.sharing-ul):not(.menu),
html body.single-post .entry-content ul:not(.sharing-ul):not(.menu),
html body.single-post .wp-block-post-content ul:not(.sharing-ul):not(.menu),
html body.single-post ol,
html body.single-post .entry-content ol,
html body.single-post .wp-block-post-content ol {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
box-sizing: border-box !important;
display: block !important;
}

/* Format bullet items and increase text size */
html body.single-post ul:not(.sharing-ul):not(.menu) li,
html body.single-post .entry-content ul:not(.sharing-ul):not(.menu) li,
html body.single-post .wp-block-post-content ul:not(.sharing-ul):not(.menu) li,
html body.single-post ol li,
html body.single-post .entry-content ol li,
html body.single-post .wp-block-post-content ol li {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
font-size: 20px !important;
line-height: 1.85 !important;
margin-bottom: 15px !important;
}

/* =============================================================
6. BOOKING COMPONENT
============================================================= */
.entela-booking-container {
max-width: 1000px;
margin: 60px auto;
padding: 40px 20px;
text-align: center;
}

.booking-grid {
display: flex;
margin: 20px;
justify-content: center;
margin-top: 30px;
}

.booking-card {
flex: 1;
background: #ffffff;
padding: 30px;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.booking-card h3 {
color: #c4622d !important;
font-family: 'Libre Baskerville', serif;
margin-bottom: 15px;
}

.booking-card iframe,
.booking-card button {
width: 100% !important;
}

.booking-card iframe {
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}

/* Button Styling */
.booking-button,
.booking-card button,
.custom-btn {
background-color: #444A541A !important;
border: none !important;
border-radius: 2px;
padding: 12px !important;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: 'Lato', sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
color: #444a54 !important;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s ease;
text-decoration: none;
}

.booking-button:hover,
.booking-card button:hover,
.custom-btn:hover {
color: #c4a882 !important;
background-color: #444A5426 !important;
}

/* =============================================================
7. UTILITIES & OVERRIDES
============================================================= /
/ Hide Duplicate Footer */
.site-footer,
footer.site-footer,
#site-footer,
.footer-widget-area {
display: none !important;
}

/* =============================================================
   JETPACK LIKES & SHARE BUTTONS ALIGNMENT (PIXEL PERFECT)
============================================================= */

/* 1. Lock the main containers exactly like a paragraph */
html body.single-post #jp-post-flair,
html body.single-post .sharedaddy,
html body.single-post div.sharedaddy {
    max-width: 760px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important; 
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Force Customizer-safe Flexbox layout */
html body.single-post div.sharedaddy ul.sharing-ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; 
}

/* 3. Strip quirks and set standard spacing */
html body.single-post div.sharedaddy ul.sharing-ul li {
    margin: 0 10px 0 0 !important; 
    padding: 0 !important;
}

html body.single-post div.sharedaddy h3.sd-title {
    transform: translateX(0px) !important; 
}

html body.single-post div.sharedaddy .sd-content {
    transform: translateX(-40px) !important; 
}

/* =============================================================
   8. MOBILE & TABLET RESPONSIVENESS (MAX-WIDTH 768px)
============================================================= */
@media (max-width: 768px) {

    /* --- 1. GLOBAL LAYOUT & PADDING --- */
    /* We pad the main containers once, so we don't have to pad every single paragraph! */
    body.single-post .entry-content,
    body.single-post .entry-header,
    body.single-post #jp-post-flair,
    body .entela-page-header {
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }

    body .entela-page-header {
        min-height: 20vh !important;
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }

    .header-inner { 
        padding: 0 24px !important; 
    }

/* --- 2. HEADER & NAVIGATION (MOBILE REBOOT) --- */
    
    /* 1. Lock the height and kill theme padding */
    #site-header, .site-header, header.site-header, #masthead {
        height: 60px !important; 
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 0 !important; 
    }

    /* 2. Tighten the edges and force the left/right split */
    .header-inner { 
        padding: 0 15px !important; /* Brings the logo and menu closer to the edges */
        height: 60px !important;
        display: flex !important;
        align-items: center !important; 
        justify-content: space-between !important; /* Pushes logo left, menu right */
    }

    /* 3. Reset the desktop logo nudge and size it for phones */
    .site-logo, .site-branding, .custom-logo-link {
        transform: translateY(0) !important; /* Removes that 5px drop we added for desktop */
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .site-logo img, .custom-logo-link img {
        max-height: 40px !important; /* Crisp, app-like size */
        width: auto !important;
    }

    /* 4. Tidy the hamburger menu */
    .menu-toggle, .mobile-menu-button {
        margin: 0 !important;
        padding: 5px !important;
        transform: scale(0.85) !important; 
    }

    /* --- 3. TYPOGRAPHY SCALING --- */
    /* Text now just scales its size; the container handles the 30px padding */
    body.single-post h1 {
        font-size: 30px !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    body.single-post p,
    body.single-post ul:not(.sharing-ul):not(.menu) li, 
    body.single-post ol li {
        font-size: 18px !important; 
        line-height: 1.7 !important;
        margin-bottom: 1.5em !important; 
    }

    /* --- 4. POSTS LIST & BOOKING GRID --- */
    .entela-posts-list .listing-item {
        flex-direction: column !important;
        margin: 20px !important;
        padding: 20px 0 !important;
    }

    .entela-posts-list .date,
    .entela-posts-list .title,
    .entela-posts-list .excerpt { 
        flex: auto !important; 
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 5px !important; 
        line-height: 1.4 !important;
    }

    .booking-grid { 
        flex-direction: column !important; 
    }
}=============================================================
   ABOUT PAGE — EDITORIAL HEADSHOTS
============================================================= */
.team-headshot img {
    /* 1. The Shape (Matches your navigation tabs) */
    border-radius: 8px 8px 0 0 !important; 
    border-bottom: 3px solid #c4622d !important; /* Thick terracotta anchor line */
    
    /* 2. The Editorial Filter (Crisp Black & White) */
    filter: grayscale(100%) contrast(110%) !important; 
    
    transition: all 0.4s ease !important;
}

/* 3. The Hover Interaction */
.team-headshot img:hover {
    /* Blooms into full color */
    filter: grayscale(0%) contrast(100%) !important; 
    
    /* Lifts up slightly and casts a soft terracotta shadow */
    transform: translateY(-5px) !important; 
    box-shadow: 0 12px 20px rgba(196, 98, 45, 0.15) !important; 
}
/* =============================================================
   HERO SECTION — DARK BACKGROUND HEADSHOT
============================================================= */
.hero-headshot img {
    /* 1. Kill the floating borders and rounded corners */
    border: none !important; 
    border-radius: 0 !important; 
	-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    
    /* 2. Keep the crisp B&W look */
    filter: grayscale(100%) contrast(110%) !important; 
    transition: all 0.4s ease !important;
}

.hero-headshot img:hover {
    /* 3. Bloom to color, lift, and add a subtle silhouette glow */
    transform: translateY(-5px) !important; 
    
    /* Notice how we combine the color filters WITH the drop-shadow here */
    /* I used a very faint Cream (#f5f2f2) for the glow to pop against the dark background */
    filter: grayscale(0%) contrast(100%) drop-shadow(0px 10px 20px rgba(245, 242, 242, 0.1)) !important; 
}
/* =============================================================
   UTILITY: HIDE ELEMENTS ON MOBILE
============================================================= */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* =============================================================
   MOBILE ONLY: HOMEPAGE STATS SWIPE (Max-width 768px)
============================================================= */
@media screen and (max-width: 768px) {
    .mobile-stat-swipe {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; 
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 15px !important; 
        gap: 15px !important;
    }
    
    .mobile-stat-swipe > * {
        flex: 0 0 75% !important; 
        max-width: 75% !important; /* Added to explicitly stop desktop stretching */
        scroll-snap-align: center !important; 
    }
    
    .mobile-stat-swipe::-webkit-scrollbar {
        display: none !important;
    }
}
/* =============================================================
   UTILITY: DEVICE-SPECIFIC VISIBILITY
============================================================= */
/* 1. Hide this item on screens larger than a phone (Desktop/Tablet) */
@media screen and (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* 2. Hide this item on phone screens */
@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}
/* =============================================================
   MOBILE FOOTER REFINEMENT (Max-width 768px)
============================================================= */
@media (max-width: 768px) {
    
    /* 1. Kill the massive desktop padding */
    /* Adjust the 30px to dictate how much empty space sits at the top of the footer */
    .site-footer, 
    #colophon, 
    .elementor-location-footer,
    .elementor-location-footer .elementor-section {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }

    /* 2. Tighten the gaps between stacked columns */
    /* Prevents huge empty spaces between your logo, your links, and your contact info */
    .site-footer .widget, 
    .site-footer .footer-widget,
    .elementor-location-footer .elementor-column {
        margin-bottom: 25px !important; 
        padding: 0 15px !important; /* Keeps text off the screen edges */
    }

    /* 3. Shrink the footer typography */
    /* Footer text should feel like elegant fine print on mobile */
    .site-footer p, 
    .site-footer a, 
    .site-footer li,
    .elementor-location-footer p,
    .elementor-location-footer a {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* 4. Tidy the very bottom copyright/legal bar */
    .site-info, 
    .footer-bottom, 
    .elementor-location-footer .footer-copyright {
        padding: 15px 0 !important;
        font-size: 12px !important;
        margin-top: 10px !important;
    }
}