/*
Theme Name: 360 Hotelier
Theme URI: https://balian.cy/
Author: Balian Web Development Co.
Author URI: https://balian.cy/
Description: A custom WordPress theme for 360 Hotelier, built with modern standards and modular architecture.
Version: 3.0.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 360-hotelier
*/

/* ==========================================================================
   Satoshi Font (Local)
   ========================================================================== */

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   PP Neue Montreal Font (Local)
   ========================================================================== */

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('fonts/ppneuemontreal-thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('fonts/ppneuemontreal-book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('fonts/ppneuemontreal-italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('fonts/ppneuemontreal-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('fonts/ppneuemontreal-semibolditalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('fonts/ppneuemontreal-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Inter Font (Local — body text on html lang="el" via --font-body)
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter-VariableFont_opsz%2Cwght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter-Italic-VariableFont_opsz%2Cwght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   Brand Colour Variables
   ========================================================================== */

:root {
    --font-satoshi: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'PPNeueMontreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-purple: #5a2a82;
    /* Matches .top-bar.is-scrolled (header strip when fixed bar fills) */
    --color-topbar-scrolled: #3a0968;
    --color-orange: #f28c28;
    --color-charcoal: #2b2b2b;
    --color-sand: #f6f1eb;
    --color-white: #fafafa;
    --color-blue: #2c6e91;
    --color-blue-hover: #245a77;
    --color-border: rgba(0, 0, 0, 0.07);
    --color-section-gray: #f4f5f7;
    --section-padding-y: 6rem;
    --radius-card: 16px;
    --radius-large: 24px;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);

    /* Hero / band overlays (purple gradient stops) */
    --hero-overlay-start-soft: rgba(58, 9, 104, 0.9);
    --hero-overlay-end-soft: rgba(58, 9, 104, 0.5);
    --hero-overlay-start-strong: rgba(58, 9, 104, 0.92);
    --hero-overlay-end-strong: rgba(58, 9, 104, 0.55);

    /* Typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base-sm: 0.875rem;
    --text-body: 0.9375rem;
    --text-base: 1rem;
    --text-md: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
    --text-lg: clamp(1rem, 1vw + 0.75rem, 1.25rem);
    --text-xl: clamp(1.25rem, 1.5vw + 0.875rem, 1.5rem);
    --text-2xl: clamp(1.375rem, 2vw + 0.875rem, 1.75rem);
    /* Mins must step down so h1 > h2 > h3 at every viewport (no shared 2rem floor). */
    --text-3xl: clamp(1.5rem, 2.5vw + 0.75rem, 2.125rem);
    --text-4xl: clamp(1.875rem, 3vw + 1rem, 2.875rem);
    --text-5xl: clamp(2.25rem, 4vw + 1.125rem, 3.5rem);
}

html:lang(el) {
    --font-body: var(--font-inter);
}

/* ==========================================================================
   Base Resets & Typography
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-body);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-charcoal);
    background-color: #f2f2f2;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Basic Layout Elements
   ========================================================================== */

.site-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 2rem;
}

.site-header {
    padding: 0.5rem 0;
}

.site-footer {
    padding: 1rem 0;
}

.site-main {
    min-height: 400px;
    padding: 2rem 0;
}

/* ==========================================================================
   Content Styles
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-purple);
    text-wrap: balance;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }

/* Typography utility classes */
.text-xs      { font-size: var(--text-xs) !important; }
.text-sm      { font-size: var(--text-sm) !important; }
.text-base-sm { font-size: var(--text-base-sm) !important; }
.text-body    { font-size: var(--text-body) !important; }
.text-base    { font-size: var(--text-base) !important; }
.text-md      { font-size: var(--text-md) !important; }
.text-lg      { font-size: var(--text-lg) !important; }
.text-xl      { font-size: var(--text-xl) !important; }
.text-2xl     { font-size: var(--text-2xl) !important; }
.text-3xl     { font-size: var(--text-3xl) !important; }
.text-4xl     { font-size: var(--text-4xl) !important; }
.text-5xl     { font-size: var(--text-5xl) !important; }

p {
    margin-top: 0;
    margin-bottom: 1em;
    text-wrap: pretty;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    display: inline-block;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 150ms ease, transform 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        background-size: 100% 1px;
    }
}

a:focus-visible {
    background-size: 100% 1px;
}

a:active {
    transform: scale(0.98);
}

/* Primary nav: card submenu + parent with chevron — no site-wide gradient bar (glide ::after lives in 01b) */
.primary-navigation .nav-menu .nav-submenu-clip .sub-menu a,
.primary-navigation .nav-menu > li.menu-item-has-children > a {
    background-image: none;
    background-size: auto;
}

@media (hover: hover) and (pointer: fine) {
    .primary-navigation .nav-menu .nav-submenu-clip .sub-menu a:hover,
    .primary-navigation .nav-menu > li.menu-item-has-children > a:hover {
        background-image: none;
        background-size: 0% 1px;
    }
}

.primary-navigation .nav-menu .nav-submenu-clip .sub-menu a:focus-visible,
.primary-navigation .nav-menu > li.menu-item-has-children > a:focus-visible {
    background-image: none;
    background-size: 0% 1px;
}

.primary-navigation .nav-menu .nav-submenu-clip .sub-menu a:active,
.primary-navigation .nav-menu > li.menu-item-has-children > a:active {
    transform: none;
}

/* No full-width gradient underline on small screens (block links look like huge bars) */
@media (max-width: 768px) {
    a:hover {
        background-size: 0% 1px;
    }

    a:focus-visible {
        background-size: 0% 1px;
        outline: 2px solid var(--color-blue);
        outline-offset: 3px;
    }
}

/* Image links — no underline effect */
a:has(img),
a:has(img):hover,
a:has(img):focus,
a:has(img):focus-visible {
    background-image: none;
}

/* Buttons override — no underline effect */
.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
    background-image: none;
    background-size: auto;
    transform: none;
}

/* Footer — orange social chips: no site-wide link gradient. Credit link in .footer-credit uses global smooth underline. */
.footer-social-bubble,
.footer-social-bubble:hover,
.footer-social-bubble:focus,
.footer-social-bubble:focus-visible,
/* Top bar links — no global gradient underline (has its own ::after underline) */
.top-bar__email,
.top-bar__email:hover,
.top-bar__email:focus,
.top-bar__email:focus-visible,
.top-bar__phone,
.top-bar__phone:hover,
.top-bar__phone:focus,
.top-bar__phone:focus-visible,
.top-bar__social-link,
.top-bar__social-link:hover,
.top-bar__social-link:focus,
.top-bar__social-link:focus-visible,
.top-bar__lang-switcher,
.top-bar__lang-switcher:hover,
.top-bar__lang-switcher:focus,
.top-bar__lang-switcher:focus-visible {
    background-image: none;
    background-size: auto;
}

.btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-sand);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: var(--color-blue);
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}