/*
Theme Name: Rubbish Removal in Bromley BR1
Theme URI: https://www.rubbishremovalbromley.co.uk/
Author: Rubbish Removal Bromley
Description: Premium beginner-friendly WordPress theme for Rubbish Removal Bromley. Editable pages plus visible template files for Theme File Editor.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: rrb-premium
*/

:root {
    --rrb-primary:#29AB87;
    --rrb-secondary:#49796B;
    --rrb-dark:#071512;
    --rrb-text:#1c2926;
    --rrb-muted:#66736f;
    --rrb-light:#f4fbf8;
    --rrb-white:#ffffff;
    --rrb-border:#dcebe6;
    --rrb-shadow:0 18px 45px rgba(7,21,18,.12);
    --rrb-radius:28px;
    --rrb-font:'Inter', 'Segoe UI', Arial, sans-serif;
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:var(--rrb-font);
    font-size:17px;
    line-height:1.75;
    color:var(--rrb-text);
    background:#fff;
    overflow-x:hidden
}

a {
    color:var(--rrb-secondary);
    text-decoration:none;
    transition:.25s ease
}

a:hover {
    color:var(--rrb-primary)
}

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

p {
    margin:0 0 18px;
    color:var(--rrb-muted)
}

h1,h2,h3,h4,h5,h6 {
    margin:0 0 18px;
    color:var(--rrb-dark);
    line-height:1.15;
    letter-spacing:-.03em;
    font-family:var(--rrb-font)
}

h1,h2 {
    font-size:48px;
    font-weight:500
}

h3,h4 {
    font-size:40px;
    font-weight:400
}

h5 {
    font-size:24px
}

h6 {
    font-size:20px
}

.rrb-container {
    width:min(1180px, calc(100% - 40px));
    margin:0 auto
}

.rrb-wide {
    width:min(1320px, calc(100% - 32px));
    margin:0 auto
}

.rrb-section {
    padding:96px 0
}

.rrb-section-soft {
    background:linear-gradient(180deg,#f7fcfa,#fff)
}

.rrb-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(41,171,135,.12);
    color:var(--rrb-secondary);
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:18px
}

.rrb-eyebrow:before {
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--rrb-primary)
}

.rrb-btn,.wp-block-button__link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

	    border-radius:42px;
padding:8px 22px; 


    background:var(--rrb-primary);
    color:#fff!important;
    font-weight:700;
    border:0;
    box-shadow:0 12px 25px rgba(41,171,135,.25);
    text-decoration:none!important
}

.rrb-btn:hover,.wp-block-button__link:hover {
    background:var(--rrb-secondary);
    transform:translateY(-2px);
    color:#fff!important
}

.rrb-btn.alt {
    background:#fff;
    color:var(--rrb-secondary)!important;
    border:1px solid rgba(73,121,107,.22);
    box-shadow:none
}

.rrb-btn.dark {
    background:var(--rrb-dark)
}

.rrb-header {
    position:sticky !important;;
    top:0;
    z-index:999;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(73,121,107,.12)
}

.rrb-topbar {
    background:var(--rrb-dark);
    color:#fff;
    font-size:14px
}

.rrb-topbar .rrb-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:8px 0
}

.rrb-topbar a {
    color:#fff;
    font-weight:700
}

.rrb-navbar .rrb-container {
    display:flex;
    align-items:center;
justify-content:space-between; 
gap:24px;
    min-height:82px
}

.rrb-logo {
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    color:var(--rrb-dark);
    font-size:22px
	margin-left:-130px;
}

.rrb-logo-mark {
    width:46px;
    height:46px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--rrb-primary),var(--rrb-secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900
}

.rrb-logo small {
    display:block;
    font-size:12px;
    color:var(--rrb-muted);
    font-weight:600;
    letter-spacing:.02em
}

.rrb-nav {
    display:flex;
    align-items:center;
    gap:28px
}

.rrb-menu {
    display:flex;
    align-items:center;
    gap:24px;
    list-style:none;
    margin:0;
    padding:0
}

.rrb-menu a {
    font-weight:700;
    color:var(--rrb-dark);
    font-size:15px
}

.rrb-menu a:hover {
    color:var(--rrb-primary)
}

.rrb-header-actions {
    display:flex;
    align-items:center;
    gap:10px
}

.rrb-phone {
    font-weight:800;
    color:var(--rrb-secondary);
    white-space:nowrap
}

.rrb-mobile-toggle {
    display:none;
    border:0;
    background:var(--rrb-light);
    border-radius:14px;
    width:48px;
    height:48px;
    font-size:24px;
    color:var(--rrb-dark)
}

.rrb-hero {
    position:relative;
    min-height:760px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--rrb-dark)
}

.rrb-hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,21,18,.88),rgba(7,21,18,.55),rgba(7,21,18,.1)),var(--hero-img);
    background-size:cover;
    background-position:center
}

.rrb-hero .rrb-container {
    position:relative;
    z-index:2
}

.rrb-hero-content {
    max-width:720px;
    color:#fff
}

.rrb-hero h1 {
    font-size:68px;
    color:#fff;
    letter-spacing:-.055em
}

.rrb-hero p {
    font-size:20px;
    color:rgba(255,255,255,.85);
    max-width:640px
}

.rrb-hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:32px
}

.rrb-hero-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:42px;
    max-width:760px
}

.rrb-stat {
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    padding:18px;
    backdrop-filter:blur(10px)
}

.rrb-stat strong {
    font-size:30px;
    color:#fff;
    display:block
}

.rrb-stat span {
    font-size:14px;
    color:rgba(255,255,255,.75)
}

.rrb-grid {
    display:grid;
    gap:28px
}

.rrb-grid-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.rrb-grid-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.rrb-grid-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
}

.rrb-card {
    background:#fff;
    border:1px solid var(--rrb-border);
    border-radius:var(--rrb-radius);
    box-shadow:0 8px 30px rgba(7,21,18,.06);
    overflow:hidden;
    transition:.25s ease
}

.rrb-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--rrb-shadow)
}

.rrb-card img {
    width:100%;
    height:250px;
    object-fit:cover
}

.rrb-card-body {
    padding:28px
}

.rrb-card h3 {
    font-size:28px;
    font-weight:500;
    letter-spacing:-.03em
}

.rrb-icon {
    width:58px;
    height:58px;
    border-radius:18px;
    background:rgba(41,171,135,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--rrb-secondary);
    font-size:28px;
    margin-bottom:18px
}

.rrb-feature-card {
    padding:30px;
    background:#fff;
    border:1px solid var(--rrb-border);
    border-radius:var(--rrb-radius);
    box-shadow:0 8px 28px rgba(7,21,18,.05)
}

.rrb-feature-card h3 {
    font-size:25px;
    font-weight:500
}

.rrb-split {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:58px;
    align-items:center
}

.rrb-image-stack {
    position:relative
}

.rrb-image-stack .main-img {
    border-radius:36px;
    min-height:540px;
    width:100%;
    object-fit:cover;
    box-shadow:var(--rrb-shadow)
}

.rrb-floating-note {
    position:absolute;
    left:-25px;
    bottom:35px;
    background:#fff;
    border-radius:24px;
    padding:20px 22px;
    box-shadow:var(--rrb-shadow);
    max-width:280px;
    border:1px solid var(--rrb-border)
}

.rrb-floating-note strong {
    display:block;
    color:var(--rrb-dark);
    font-size:24px
}

.rrb-list {
    list-style:none;
    margin:24px 0 0;
    padding:0;
    display:grid;
    gap:14px
}

.rrb-list li {
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:var(--rrb-text);
    font-weight:600
}

.rrb-list li:before {
    content:"✓";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(41,171,135,.16);
    color:var(--rrb-secondary);
    font-weight:900
}

.rrb-page-hero {
    padding:120px 0 86px;
    position:relative;
    background:var(--rrb-dark);
    overflow:hidden
}

.rrb-page-hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,21,18,.86),rgba(7,21,18,.52)),var(--page-hero);
    background-size:cover;
    background-position:center
}

.rrb-page-hero .rrb-container {
    position:relative;
    z-index:2
}

.rrb-page-hero h1 {
    color:#fff;
    font-size:60px
}

.rrb-page-hero p {
    color:rgba(255,255,255,.84);
    max-width:760px;
    font-size:20px
}

.rrb-content {
    font-size:17px
}

.rrb-content .alignwide {
    max-width:1180px;
    margin-left:auto;
    margin-right:auto
}

.rrb-content img {
    border-radius:24px
}

.rrb-content h2 {
    margin-top:30px
}

.rrb-content ul {
    padding-left:20px
}

.rrb-cta {
    position:relative;
    border-radius:38px;
    overflow:hidden;
    background:var(--rrb-dark);
    padding:58px;
    color:#fff
}

.rrb-cta:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,21,18,.9),rgba(7,21,18,.55)),var(--cta-img);
    background-size:cover;
    background-position:center
}

.rrb-cta>* {
    position:relative;
    z-index:2
}

.rrb-cta h2 {
    color:#fff
}

.rrb-cta p {
    color:rgba(255,255,255,.82);
    max-width:720px
}

.rrb-contact-grid {
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:34px
}

.rrb-contact-card {
    background:#fff;
    border-radius:28px;
    border:1px solid var(--rrb-border);
    padding:30px;
    box-shadow:0 8px 28px rgba(7,21,18,.06)
}

.rrb-contact-row {
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px 0;
    border-bottom:1px solid var(--rrb-border)
}

.rrb-contact-row:last-child {
    border-bottom:0
}

.rrb-contact-row strong {
    display:block;
    color:var(--rrb-dark)
}

.rrb-map {
    border:0;
    width:100%;
    height:450px;
    border-radius:28px;
    filter:grayscale(.1)
}

.rrb-blog-card img {
    height:230px
}

.rrb-post-meta {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    color:var(--rrb-muted);
    font-size:14px;
    font-weight:700;
    margin-bottom:12px
}

.rrb-single {
    max-width:850px;
    margin:0 auto
}

.rrb-single img.wp-post-image {
    border-radius:30px;
    margin-bottom:34px;
    width:100%;
    max-height:520px;
    object-fit:cover
}

.rrb-pagination {
    margin-top:44px;
    display:flex;
    gap:10px
}

.rrb-pagination a,.rrb-pagination span {
    padding:10px 15px;
    border-radius:12px;
    background:var(--rrb-light);
    font-weight:700
}

.rrb-footer {
    background:var(--rrb-dark);
    color:#fff;
    padding:72px 0 28px
}

.rrb-footer p,.rrb-footer li {
    color:rgba(255,255,255,.72)
}

.rrb-footer h3 {
    font-size:26px;
    color:#fff;
    font-weight:500
}

.rrb-footer a {
    color:rgba(255,255,255,.78)
}

.rrb-footer a:hover {
    color:#fff
}

.rrb-footer-grid {
    display:grid;
    grid-template-columns:1.3fr .7fr .8fr 1fr;
    gap:34px
}

.rrb-footer ul {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px
}

.rrb-footer-bottom {
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:42px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap
}

.screen-reader-text {
    position:absolute;
    left:-9999px
}

.skip-link:focus {
    left:10px;
    top:10px;
    z-index:99999;
    background:#fff;
    padding:10px
}

@media(max-width:1050px) {
    .rrb-grid-4,.rrb-grid-3 {
        grid-template-columns:repeat(2,1fr)
    }

    .rrb-split,.rrb-contact-grid {
        grid-template-columns:1fr
    }

    .rrb-footer-grid {
        grid-template-columns:1fr 1fr
    }

    .rrb-hero h1 {
        font-size:56px
    }

    .rrb-header-actions {
        display:none
    }

    .rrb-mobile-toggle {
        display:block
    }

    .rrb-nav {
        position:fixed;
        left:0;
        right:0;
        top:126px;
        background:#fff;
        border-bottom:1px solid var(--rrb-border);
        box-shadow:var(--rrb-shadow);
        display:none;
        padding:22px
    }

    .rrb-nav.is-open {
        display:block
    }

    .rrb-menu {
        display:grid;
        gap:0
    }

    .rrb-menu li {
        border-bottom:1px solid var(--rrb-border)
    }

    .rrb-menu a {
        display:block;
        padding:14px 0
    }

    .rrb-nav .rrb-header-actions {
        display:grid;
        margin-top:16px
    }

    .rrb-navbar .rrb-container {
        min-height:76px
			  
    }

}

@media(max-width:700px) {
    body {
        font-size:16px;
        line-height:1.7
    }

    .rrb-container {
        width:min(100% - 28px,1180px)
    }

    .rrb-section {
        padding:64px 0
    }

    h1,h2 {
        font-size:36px
    }

    h3,h4 {
        font-size:30px
    }

    .rrb-topbar .rrb-container {
        justify-content:center;
        text-align:center
    }

    .rrb-topbar span {
        display:none
    }

    .rrb-nav {
        top:112px
    }

    .rrb-hero {
        min-height:690px
    }

    .rrb-hero h1 {
        font-size:42px
    }

    .rrb-hero p {
        font-size:17px
    }

    .rrb-hero-stats {
        grid-template-columns:1fr
    }

    .rrb-page-hero {
        padding:92px 0 64px
    }

    .rrb-page-hero h1 {
        font-size:42px
    }

    .rrb-grid-2,.rrb-grid-3,.rrb-grid-4 {
        grid-template-columns:1fr
    }

    .rrb-card img {
        height:220px
    }

    .rrb-image-stack .main-img {
        min-height:360px
    }

    .rrb-floating-note {
        position:static;
        margin-top:16px;
        max-width:none
    }

    .rrb-cta {
        padding:34px 24px;
        border-radius:28px
    }

    .rrb-footer-grid {
        grid-template-columns:1fr
    }

    .rrb-map {
        height:330px
    }

    .rrb-btn {
        width:100%;
        padding:15px 18px
    }

    .rrb-hero-actions {
        display:grid
    }

    .rrb-logo {
        font-size:18px
    }

    .rrb-logo-mark {
        width:42px;
        height:42px
    }

}

/*Mobile Menu Fix*/

/* ===== MOBILE RESPONSIVE FIX ===== */

@media (max-width: 768px) {

    .rrb-topbar {
        display: none;
    }

    .rrb-navbar .rrb-container {
        width: calc(100% - 20px);
        min-height: 72px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: relative;
    }

    .rrb-logo {
        font-size: 16px;
        gap: 10px;
        max-width: 70%;
        line-height: 1.2;
    }

    .rrb-logo-mark {
        width: 42px;
        height: 42px;
        font-size: 18px;
        border-radius: 12px;
    }

    .rrb-logo small {
        font-size: 11px;
    }

    .rrb-header-actions {
        display: none;
    }

    .rrb-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        font-size: 26px;
        border-radius: 12px;
        background: var(--rrb-primary);
        color: #fff;
        flex-shrink: 0;
    }

    .rrb-nav {
        display: none;
        position: absolute;
        top: 100px;
        left: 10;
        right: 10;
        width: auto;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 12px 35px rgba(0,0,0,0.12);
        padding: 15px 20px;
        z-index: 9999;
    }

    .rrb-nav.is-open {
        display: block;
    }

    .rrb-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .rrb-menu li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .rrb-menu li:last-child {
        border-bottom: none;
    }

    .rrb-menu a {
        display: block;
        padding: 14px 0;
        font-size: 17px;
        white-space: nowrap;
    }

    .rrb-hero {
        min-height: 580px;
    }

    .rrb-hero h1 {
        font-size: 42px;
        line-height: 1.1;
    }

    .rrb-hero p {
        font-size: 16px;
    }

    .rrb-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .rrb-btn {
        width: 100%;
    }
}

/*Premium*/
/* PREMIUM UI */
.premium-hero {
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    color: #fff;
}

.premium-box {
    background: #f8fafc;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.premium-card {
    border-radius: 14px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: all .3s ease;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* GRID */
.rrb-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.rrb-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rrb-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* TABLE */
.rrb-table {
    width:100%;
    border-collapse: collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.rrb-table th {
    background:#29AB87;
    color:#fff;
    padding:15px;
}

.rrb-table td {
    padding:12px;
    border-bottom:1px solid #eee;
}

/* LIST */
.premium-list li {
    padding:10px 0;
    border-bottom:1px dashed #ddd;
}

/* AREAS */
.rrb-area {
    padding:15px;
    background:#fff;
    text-align:center;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* REVIEWS */
.rrb-review-card {
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* CTA */
.premium-cta {
    background:#29AB87;
    color:#fff;
    text-align:center;
    padding:60px 0;
}



/*Size Fixing*/
/* FIX HEADER LOGO SIZE */
.rrb-logo{
    margin-left:0 !important;
    max-width:220px;
    flex-shrink:0;
}

.rrb-logo img,
.custom-logo{
    width:auto !important;
    max-width:220px !important;
    height:60px !important;
    object-fit:contain;
}

/* SMALLER HEADER HEIGHT */
.rrb-navbar .rrb-container{
    min-height:70px !important;
    padding:8px 0;
}

/* SMALLER HEADER BUTTONS */
.rrb-header-actions .rrb-btn{
    padding:10px 18px !important;
    font-size:15px !important;
    min-height:44px;
    border-radius:28px !important;
    width:auto !important;
}

/* MENU SPACING */
.rrb-menu{
    gap:18px;
}
/*sie fixing*/






/* RESPONSIVE */
@media(max-width:992px){
    .rrb-grid-4{grid-template-columns:repeat(2,1fr);}
    .rrb-grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
    .rrb-grid-4,.rrb-grid-3,.rrb-grid-2{grid-template-columns:1fr;}
}