/*
Theme Name: Ruby Blues
Author: Pub Invest Group
Description: Ruby Blues Liverpool — jazz, soul and Motown-inspired bar and live music venue.
Version: 2.0.0
Text Domain: ruby-blues
*/

:root{
--black:#0c090b;
--ink:#313291;
--wine:#e6234d;
--ruby:#ea1f2a;
--gold:#d4ad5c;
--cream:#f4e8d0;
--muted:#d4ad5c;
--line:rgba(212,173,92,.22);
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
background:var(--black);
color:var(--cream);
font-family:Arial,Helvetica,sans-serif;
line-height:1.65
}

a{
color:inherit;
text-decoration:none
}

img{
max-width:100%;
height:auto
}

.rb-wrap{
width:min(1180px,calc(100% - 42px));
margin:auto
}

.rb-header{
position:absolute;
z-index:10;
top:0;
left:0;
right:0;
border-bottom:1px solid var(--line);
background:linear-gradient(
180deg,
rgba(12,9,11,.72),
transparent
)
}

.rb-header-inner{
min-height:94px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}

.rb-logo{
font:700 30px Georgia,serif;
letter-spacing:.04em;
display:flex;
align-items:center;
gap:12px
}

.rb-nav{
display:flex;
gap:28px;
align-items:center;
list-style:none;
padding:0;
margin:0;
text-transform:uppercase;
letter-spacing:.15em;
font-size:11px;
font-weight:700
}

.rb-nav a{
display:block;
padding:10px 0;
border-bottom:1px solid transparent
}

.rb-nav a:hover,
.current-menu-item a{
color:var(--gold);
border-color:var(--gold)
}

.rb-hero{
min-height:790px;
position:relative;
display:flex;
align-items:flex-end;
overflow:hidden;
background:
radial-gradient(
circle at 76% 30%,
rgba(230,35,77,.5),
transparent 30%
),
radial-gradient(
circle at 25% 70%,
rgba(212,173,92,.16),
transparent 25%
),
linear-gradient(
125deg,
var(--black),
var(--wine) 55%,
var(--black)
)
}

.rb-hero:before{
content:"";
position:absolute;
inset:0;
opacity:.16;
background:
repeating-linear-gradient(
90deg,
transparent 0 64px,
rgba(212,173,92,.25) 65px,
transparent 66px
),
repeating-linear-gradient(
0deg,
transparent 0 64px,
rgba(212,173,92,.16) 65px,
transparent 66px
)
}

.rb-hero:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(12,9,11,.05) 25%,
rgba(12,9,11,.9) 100%
)
}

.rb-hero-inner{
position:relative;
z-index:2;
padding:150px 0 92px;
max-width:820px
}

.rb-kicker{
font-size:11px;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--gold);
font-weight:800;
margin:0 0 18px
}

h1,
h2,
h3{
font-family:Georgia,"Times New Roman",serif;
line-height:1.06
}

h1{
font-size:clamp(60px,10vw,120px);
letter-spacing:-.055em;
margin:0 0 24px
}

h2{
font-size:clamp(40px,6vw,68px);
margin:0 0 20px
}

h3{
font-size:27px;
margin:0 0 9px
}

.rb-lede{
font:20px/1.55 Georgia,serif;
color:var(--cream);
max-width:680px
}

.rb-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:30px
}

.rb-btn{
display:inline-flex;
padding:14px 22px;
background:var(--ruby);
border:1px solid var(--ruby);
color:var(--cream);
text-transform:uppercase;
letter-spacing:.14em;
font-size:11px;
font-weight:800
}

.rb-btn.alt{
background:transparent;
border-color:var(--gold)
}

.rb-btn:hover{
background:var(--wine);
border-color:var(--wine)
}

.rb-section{
padding:100px 0
}

.rb-dark{
background:var(--black)
}

.rb-wine{
background:var(--wine);
color:var(--cream)
}

.rb-cream{
background:var(--cream);
color:var(--black)
}

.rb-intro{
max-width:750px
}

.rb-eyebrow{
font-size:11px;
text-transform:uppercase;
letter-spacing:.2em;
font-weight:800;
color:var(--ruby)
}

.rb-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:45px
}

.rb-card{
padding:31px;
background:rgba(244,232,208,.045);
border:1px solid var(--line);
position:relative
}

.rb-card:before{
content:"";
position:absolute;
left:0;
top:0;
width:58px;
height:2px;
background:var(--gold)
}

.rb-card p{
color:var(--muted)
}

.rb-page-head{
padding:175px 0 72px;
background:
radial-gradient(
circle at 80% 20%,
rgba(230,35,77,.4),
transparent 35%
),
var(--black);
border-bottom:1px solid var(--line)
}

.rb-page-head h1{
font-size:clamp(55px,8vw,94px)
}

.rb-drinks{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px
}

.rb-drink{
padding:20px 0;
border-bottom:1px solid var(--line)
}

.rb-drink strong{
font:22px Georgia,serif
}

.rb-drink small{
display:block;
color:var(--muted);
margin-top:4px
}

.rb-price{
color:var(--gold);
font-weight:800
}

.rb-shot-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:14px;
margin-top:40px
}

.rb-shot{
min-height:185px;
position:relative;
overflow:hidden;
padding:20px;
display:flex;
align-items:flex-end;
background:
linear-gradient(
145deg,
var(--ruby),
var(--wine) 54%,
var(--black)
);
border:1px solid var(--line);
box-shadow:
inset 0 0 0 1px rgba(244,232,208,.04)
}

.rb-shot:nth-child(2n){
background:
linear-gradient(
145deg,
var(--gold),
var(--wine) 55%,
var(--black)
)
}

.rb-shot:before{
content:"";
position:absolute;
width:105px;
height:150px;
border:2px solid rgba(244,232,d0,.28);
border-radius:18px 18px 28px 28px;
right:-25px;
top:17px;
transform:rotate(8deg)
}

.rb-shot:after{
content:"✦";
position:absolute;
right:20px;
top:18px;
color:var(--cream);
opacity:.7;
font-size:25px
}

.rb-shot span{
position:relative;
z-index:2;
font:21px Georgia,serif
}

.rb-shot em{
display:block;
font:10px Arial,sans-serif;
color:var(--cream);
text-transform:uppercase;
letter-spacing:.14em;
font-style:normal;
margin-top:5px
}

.rb-contact{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:65px
}

.rb-detail{
margin-bottom:28px
}

.rb-detail b{
display:block;
color:var(--gold);
text-transform:uppercase;
letter-spacing:.18em;
font-size:10px;
margin-bottom:5px
}

.rb-detail a:hover{
color:var(--gold)
}

.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select{
width:100%;
padding:14px;
border:1px solid var(--gold);
background:var(--cream);
color:var(--black);
margin:5px 0 14px;
font:inherit
}

.wpcf7 textarea{
min-height:150px
}

.wpcf7 input[type=submit]{
background:var(--ruby);
color:var(--cream);
border-color:var(--ruby);
font-weight:800;
text-transform:uppercase;
letter-spacing:.13em;
cursor:pointer
}

.rb-footer{
background:var(--black);
border-top:1px solid var(--line);
padding:68px 0 22px
}

.rb-footer-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1fr;
gap:35px
}

.rb-footer h3{
font:700 13px Arial,sans-serif;
text-transform:uppercase;
letter-spacing:.17em;
color:var(--gold)
}

.rb-footer p,
.rb-footer li{
font-size:13px;
color:var(--muted)
}

.rb-footer ul{
padding:0;
list-style:none
}

.rb-socials{
display:flex;
gap:8px;
flex-wrap:wrap
}

.rb-social{
border:1px solid var(--line);
padding:7px 11px;
font-size:10px;
text-transform:uppercase;
letter-spacing:.1em
}

.rb-footer-bottom{
margin-top:45px;
padding-top:18px;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
color:var(--muted);
font-size:11px
}

.rb-notice{
padding:15px 18px;
border-left:2px solid var(--gold);
background:rgba(212,173,92,.08);
color:var(--muted);
font-size:13px
}

@media(max-width:850px){

.rb-nav{
display:none
}

.rb-header-inner{
min-height:75px
}

.rb-cards,
.rb-drinks,
.rb-contact,
.rb-footer-grid{
grid-template-columns:1fr
}

.rb-shot-grid{
grid-template-columns:repeat(2,1fr)
}

.rb-hero{
min-height:700px
}

.rb-section{
padding:75px 0
}

.rb-footer-bottom{
display:block
}

.rb-footer-bottom span{
display:block;
margin-top:7px
}

}

/* Ruby Blues homepage hero */
.rb-hero {
position: relative;
min-height: 75vh;
display: flex;
align-items: center;
background-image: url('https://rubybluesliverpool.co.uk/wp-content/uploads/2026/09/Ruby-Blues-Main-Image-scaled.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}

.rb-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 0;
}

.rb-hero-inner {
position: relative;
z-index: 1;
}
.rb-shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rb-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.rb-shot > span {
    display: block;
    width: 100%;
    margin-top: 12px;
    text-align: center;
}

.rb-shot > span em {
    display: block;
    margin-top: 4px;
    font-style: normal;
}
.rb-lost-property {
    margin-top: 25px;
    text-align: center;
}

.rb-button {
    display: inline-block;
    padding: 12px 24px;
    background: #ea1f2a;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.rb-button:hover {
    opacity: 0.8;
    color: #fff;
}
/* Hamburger button */
.rb-menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	width: 44px;
	height: 44px;
	position: relative;
	z-index: 1001;
}

.rb-menu-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	margin: 5px auto;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Mobile */
@media (max-width: 768px) {

	.rb-header-inner {
		position: relative;
	}

	.rb-menu-toggle {
		display: block;
		margin-left: auto;
	}

	.rb-primary-navigation {
		display: none;
		width: 100%;
	}

	.rb-primary-navigation.is-open {
		display: block;
	}

	.rb-nav {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 15px 0;
	}

	.rb-nav li {
		width: 100%;
	}

	.rb-nav a {
		display: block;
		padding: 12px 0;
	}

	/* Hamburger becomes an X */
	.rb-menu-toggle.is-open span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.rb-menu-toggle.is-open span:nth-child(2) {
		opacity: 0;
	}

	.rb-menu-toggle.is-open span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}


/* =========================================================
   Ruby Blues mobile navigation — working hamburger menu
   ========================================================= */
.rb-menu-toggle{
    display:none;
    width:46px;
    height:46px;
    padding:8px;
    margin:0;
    border:0;
    outline:0;
    background:transparent;
    color:#f4e8d0;
    cursor:pointer;
    position:relative;
    z-index:1002;
    flex:0 0 46px;
    -webkit-appearance:none;
    appearance:none;
}

.rb-menu-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:5px auto;
    background:#f4e8d0;
    border-radius:2px;
    transition:transform .2s ease,opacity .2s ease;
}

.rb-primary-navigation{
    display:block;
}

@media (max-width:850px){
    .rb-header-inner{
        min-height:75px;
        position:relative;
        flex-wrap:wrap;
    }

    .rb-logo{
        flex:1 1 auto;
        min-width:0;
    }

    .rb-menu-toggle{
        display:block !important;
    }

    .rb-primary-navigation{
        display:none !important;
        width:100%;
        flex:0 0 100%;
        order:3;
        padding:8px 0 18px;
        background:rgba(12,9,11,.98);
        border-top:1px solid var(--line);
    }

    .rb-primary-navigation.is-open{
        display:block !important;
    }

    .rb-primary-navigation .rb-nav{
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        gap:0;
        margin:0;
        padding:0;
    }

    .rb-primary-navigation .rb-nav li{
        display:block;
        width:100%;
        margin:0;
    }

    .rb-primary-navigation .rb-nav a{
        display:block;
        width:100%;
        padding:14px 4px;
        border-bottom:1px solid var(--line);
        text-align:right;
    }

    .rb-primary-navigation .rb-nav li:last-child a{
        border-bottom:0;
    }

    .rb-menu-toggle.is-open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .rb-menu-toggle.is-open span:nth-child(2){
        opacity:0;
    }

    .rb-menu-toggle.is-open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }
}

@media (min-width:851px){
    .rb-primary-navigation{
        display:block !important;
    }
}