/*
Theme Name: Modern Rubbish Removal
Theme URI: https://example.com/
Author: Custom Theme
Description: A modern, reusable WordPress theme for rubbish removal and local service businesses.
Version: 4.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: modern-rubbish-removal
*/
:root {
    --primary:#80ed99;
    --primary-dark:#68d781;
    --primary-soft:#c7f9cc;
    --ink:#13231f;
    --muted:#5f6f6a;
    --line:#dfe8e5;
    --surface:#fff;
    --surface-alt:#f5f8f7;
    --dark:#10231e;
    --radius:18px;
    --shadow:0 16px 45px rgba(20,48,40,.10);
    --container:1220px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Poppins,sans-serif;
    font-size:16px;
    line-height:1.65;
    color:var(--ink);
    background:#fff
}

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

a {
    color:var(--primary-dark);
    text-decoration:none
}

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

.container {
    width:min(var(--container),calc(100% - 40px));
    margin-inline:auto
}

.site-main {
    overflow:hidden
}

.section {
    padding:88px 0
}

.section-sm {
    padding:60px 0
}

.bg-alt {
    background:var(--surface-alt)
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-size:13px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase
}

.section-heading {
    max-width:760px;
    margin-bottom:38px
}

.section-heading.center {
    text-align:center;
    margin-inline:auto;
    margin-bottom:46px
}

.section-heading p {
    font-size:18px;
    color:var(--muted);
    margin:12px 0 0
}

h1,h2,h3,h4 {
    margin:0 0 18px;
    line-height:1.15;
    letter-spacing:-.03em;
    color:var(--ink)
}

h1 {
    font-size:clamp(44px,5vw,48px);
    font-weight:700
}

h2 {
    font-size:clamp(34px,4vw,40px);
    font-weight:700
}

h3 {
    font-size:clamp(26px,3vw,32px);
    font-weight:600
}

h4 {
    font-size:clamp(21px,2.3vw,24px);
    font-weight:600
}

p {
    margin:0 0 20px
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:50px;
    padding:13px 24px;
    border-radius:999px;
    border:2px solid transparent;
    background:var(--primary);
    color:#fff;
    font:600 16px/1 Poppins,sans-serif;
    transition:.2s ease;
    box-shadow:0 8px 24px rgba(41,171,135,.22)
}

.btn:hover {
    background:var(--primary-dark);
    color:#fff;
    transform:translateY(-1px)
}

.btn-outline {
    background:#fff;
    color:var(--ink);
    border-color:var(--line);
    box-shadow:none
}

.btn-outline:hover {
    border-color:var(--primary);
    background:var(--primary-soft);
    color:var(--primary-dark)
}

/* ==========================================================
   HEADER CSS — TOP BAR, LOGO, MENU AND HEADER BUTTONS
========================================================== */

.topbar {
    background:var(--dark);
    color:#dceae6;
    font-size:13px
}

.topbar-inner {
    min-height:38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}

.topbar span {
    display:flex;
    align-items:center;
    gap:8px
}

.site-header {
    position:relative;
    z-index:50;
    background:#fff;
    border-bottom:1px solid var(--line)
}

.header-inner {
    min-height:82px;
    display:grid;
    grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
    align-items:center;
    gap:28px
}

.site-branding {
    display:flex;
    align-items:center;
    gap:12px
}

.brand-mark {
    width:42px;
    height:42px;
    border-radius:13px;
    background:var(--primary-soft);
    display:grid;
    place-items:center;
    color:var(--primary);
    font-size:22px
}

.site-title {
    font-size:20px;
    font-weight:700;
    color:var(--ink);
    line-height:1.2
}

.site-tagline {
    font-size:12px;
    color:var(--muted);
    margin:2px 0 0
}

.custom-logo {
    max-height:54px;
    width:auto
}

.primary-nav ul {
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0
}

.primary-nav a {
    display:block;
    padding:11px 13px;
    color:var(--ink);
    font-size:16px;
    font-weight:500;
    border-radius:10px
}

.primary-nav a:hover,.primary-nav .current-menu-item>a {
    background:var(--primary-soft);
    color:var(--primary-dark)
}

.header-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:15px
}

.header-phone {
    font-weight:600;
    color:var(--ink);
    white-space:nowrap
}

.menu-toggle {
    display:none;
    border:0;
    background:var(--primary-soft);
    width:44px;
    height:44px;
    border-radius:11px;
    font-size:21px;
    color:var(--ink)
}

.hero {
    padding:80px 0 88px;
    background:linear-gradient(120deg,#f8fbfa 0%,#edf8f4 100%)
}

.hero-grid {
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:64px;
    align-items:center
}

.hero-copy>p {
    font-size:18px;
    color:var(--muted);
    max-width:650px
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin:30px 0
}

.trust-row {
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    color:var(--muted);
    font-size:14px
}

.trust-row span {
    display:flex;
    gap:7px;
    align-items:center
}

.hero-image-wrap {
    position:relative
}

.hero-image {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:28px;
    box-shadow:var(--shadow)
}

.hero-badge {
    position:absolute;
    left:-26px;
    bottom:28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px 20px;
    box-shadow:var(--shadow);
    font-weight:600
}

.hero-badge strong {
    display:block;
    font-size:25px;
    color:var(--primary-dark)
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:0 8px 28px rgba(20,48,40,.05)
}

.card:hover {
    box-shadow:var(--shadow);
    transform:translateY(-3px);
    transition:.2s
}

.card-icon {
    width:52px;
    height:52px;
    border-radius:15px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    display:grid;
    place-items:center;
    font-size:22px;
    margin-bottom:22px
}

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

.text-link {
    font-weight:600
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center
}

.split-image {
    border-radius:24px;
    box-shadow:var(--shadow);
    aspect-ratio:4/3;
    object-fit:cover
}

.single-featured-image {
    display:block;
    width:100%;
    height:auto;
    max-height:620px;
    margin:0 0 34px;
    border-radius:24px;
    object-fit:cover;
    box-shadow:var(--shadow)
}

.check-list {
    list-style:none;
    padding:0;
    margin:25px 0
}

.check-list li {
    position:relative;
    padding:8px 0 8px 31px
}

.check-list li:before {
    content:'✓';
    position:absolute;
    left:0;
    top:7px;
    color:var(--primary);
    font-weight:700
}

.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    counter-reset:step
}

.step {
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 24px
}

.step:before {
    counter-increment:step;
    content:counter(step);
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    margin-bottom:20px
}

.testimonial {
    padding:30px;
    border-radius:var(--radius);
    background:#fff;
    border:1px solid var(--line)
}

.stars {
    color:#e6a420;
    letter-spacing:2px;
    margin-bottom:15px
}

.cta {
    background:var(--dark);
    color:#fff;
    border-radius:28px;
    padding:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px
}

.cta h2,.cta p {
    color:#fff
}

.cta p {
    color:#cbdcd6;
    margin-bottom:0
}

.page-hero {
    padding:25px 0;
    background:linear-gradient(120deg,#f7fbfa,#eaf8f4)
}

.page-hero p {
    font-size:18px;
    color:var(--muted);
    max-width:740px
}

.content-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:45px
}

.prose {
    max-width:850px
}

.prose h2,.prose h3,.prose h4 {
    margin-top:38px
}

.prose ul {
    padding-left:22px
}

.contact-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:40px
}

.contact-card {
    padding:30px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius)
}

.field-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

.contact-card input,.contact-card textarea,.contact-card select {
    width:100%;
    padding:14px 15px;
    border:1px solid var(--line);
    border-radius:11px;
    font:400 16px Poppins,sans-serif;
    background:#fff
}

.contact-card textarea {
    min-height:150px
}

.blog-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px
}

.post-card {
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#fff
}

.post-card img {
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover
}

.post-card-body {
    padding:24px
}

.post-meta {
    font-size:13px;
    color:var(--muted);
    margin-bottom:10px
}

.pagination {
    margin-top:35px
}

.sidebar-widget {
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    margin-bottom:22px
}

.sidebar-widget ul {
    list-style:none;
    padding:0;
    margin:0
}

.sidebar-widget li {
    padding:8px 0;
    border-bottom:1px solid var(--line)
}

/* ==========================================================
   FOOTER CSS — FOOTER COLUMNS, LINKS AND BOTTOM BAR
========================================================== */

.site-footer {
    background:var(--dark);
    color:#c9d8d3;
    margin-top:0
}

.footer-main {
    padding:65px 0 48px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.35fr .8fr 1fr 1fr;
    gap:45px
}

.site-footer h3,.site-footer h4 {
    color:#fff
}

.site-footer p,.site-footer a {
    color:#c9d8d3
}

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

.footer-menu {
    list-style:none;
    padding:0;
    margin:0
}

.footer-menu li {
    margin:9px 0
}

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.12);
    padding:20px 0;
    font-size:14px
}

.footer-bottom-inner {
    display:flex;
    justify-content:space-between;
    gap:20px
}

.floating-contact {
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:40;
    width:56px;
    height:56px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#25d366;
    color:#fff;
    font-size:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.18)
}

@media(max-width:1050px) {
    .header-inner {
        grid-template-columns:1fr auto
    }
    .primary-nav {
        grid-column:1/-1;
        display:none;
        border-top:1px solid var(--line);
        padding:10px 0 16px
    }
    .primary-nav.is-open {
        display:block
    }
    .primary-nav ul {
        flex-direction:column;
        align-items:stretch
    }
    .header-actions .header-phone {
        display:none
    }
    .menu-toggle {
        display:block
    }
    .hero-grid,.split,.contact-grid {
        grid-template-columns:1fr
    }
    .hero-image-wrap {
        max-width:740px
    }
    .cards,.blog-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .steps {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media(max-width:700px) {
    .container {
        width:min(100% - 28px,var(--container))
    }
    .topbar {
        display:none
    }
    .header-inner {
        min-height:72px;
        gap:12px
    }
    .header-actions .btn {
        display:none
    }
    .site-title {
        font-size:17px
    }
    .hero {
        padding:58px 0
    }
    .hero-grid {
        gap:38px
    }
    .hero-badge {
        left:12px;
        bottom:12px
    }
    .section {
        padding:64px 0
    }
    .cards,.blog-grid,.steps,.footer-grid {
        grid-template-columns:1fr
    }
    .cta {
        padding:34px 25px;
        display:block
    }
    .cta .btn {
        margin-top:25px
    }
    .field-grid {
        grid-template-columns:1fr
    }
    .content-grid {
        grid-template-columns:1fr
    }
    .footer-bottom-inner {
        display:block
    }
    .trust-row {
        display:grid;
        gap:10px
    }
}

/* Focused mobile-menu, blog-sidebar and post-navigation improvements */
.menu-toggle i {
    line-height:1
}

.menu-toggle.is-active {
    background:var(--primary);
    color:#fff
}

.floating-contact i {
    font-size:28px
}

.recent-posts-list li {
    padding:13px 0
}

.recent-posts-list li:first-child {
    padding-top:0
}

.recent-posts-list li:last-child {
    border-bottom:0;
    padding-bottom:0
}

.recent-posts-list a {
    display:block;
    color:var(--ink);
    font-weight:600;
    line-height:1.45
}

.recent-posts-list a:hover {
    color:var(--primary-dark)
}

.recent-posts-list span {
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-top:4px
}

.single-post-navigation {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    border-top:1px solid var(--line);
    margin-top:48px;
    padding-top:28px
}

.post-navigation-item a {
    display:flex;
    min-height:124px;
    flex-direction:column;
    justify-content:center;
    padding:22px 24px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    color:var(--ink);
    box-shadow:0 8px 24px rgba(20,48,40,.05)
}

.post-navigation-item a:hover {
    border-color:var(--primary);
    box-shadow:0 12px 30px rgba(20,48,40,.1);
    transform:translateY(-2px)
}

.post-navigation-item span {
    font-size:13px;
    color:var(--primary-dark);
    font-weight:600;
    margin-bottom:7px
}

.post-navigation-item strong {
    font-size:16px;
    line-height:1.45
}

.post-navigation-next {
    text-align:right
}

.post-navigation-next a {
    align-items:flex-end
}

@media(max-width:1050px) {
    .site-header {
        position:relative
    }
    .header-inner {
        position:relative;
        grid-template-columns:minmax(0,1fr) auto;
        gap:14px;
        min-height:74px
    }
    .header-actions {
        grid-column:2;
        grid-row:1
    }
    .primary-nav {
        position:absolute;
        left:0;
        right:0;
        top:100%;
        grid-column:auto;
        display:block;
        visibility:hidden;
        opacity:0;
        transform:translateY(-8px);
        pointer-events:none;
        background:#fff;
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
        padding:12px max(20px,calc((100vw - 1180px)/2));
        box-shadow:0 16px 30px rgba(20,48,40,.12);
        transition:opacity .2s ease,transform .2s ease,visibility .2s ease
    }
    .primary-nav.is-open {
        visibility:visible;
        opacity:1;
        transform:translateY(0);
        pointer-events:auto
    }
    .primary-nav ul {
        gap:2px
    }
    .primary-nav a {
        padding:13px 12px
    }
    .menu-toggle {
        display:grid;
        place-items:center;
        flex:0 0 44px
    }
    .header-actions .btn {
        display:none
    }
    .single-post-navigation {
        grid-template-columns:1fr
    }
    .post-navigation-next {
        text-align:left
    }
    .post-navigation-next a {
        align-items:flex-start
    }
}

@media(max-width:600px) {
    .topbar {
        display:none
    }
    .site-tagline {
        font-size:11px
    }
    .site-title {
        font-size:17px
    }
    .brand-mark {
        width:38px;
        height:38px
    }
    .floating-contact {
        right:16px;
        bottom:16px;
        width:54px;
        height:54px
    }
    .single-post-navigation {
        gap:14px
    }
    .post-navigation-item a {
        min-height:auto;
        padding:19px
    }
}


/* ==========================================================
   FOOTER LEGAL LINKS
========================================================== */
.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: var(--primary);
}

.footer-legal-links span {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 760px) {
    .footer-legal-links {
        justify-content: flex-start;
    }
}


/* ==========================================================
   VERSION 4.0 REUSABLE BRAND, BLOG, TABLE AND FOOTER UPDATES
========================================================== */

:root{
    --secondary:#c7f9cc;
    --on-primary:#000;
    --on-secondary:#000;
    --footer-bg:#000;
}

/* Primary and secondary backgrounds always use readable black text. */
.btn,
.card-icon,
.step:before,
.floating-contact,
.menu-toggle.is-active{
    color:var(--on-primary);
}

.btn{
    background:var(--secondary);
    color:var(--on-secondary);
    border-color:transparent;
    box-shadow:0 8px 24px rgba(128,237,153,.25);
}

.btn:hover{
    background:var(--primary);
    color:var(--on-primary);
}

.eyebrow,
.primary-nav a:hover,
.primary-nav .current-menu-item>a{
    background:var(--secondary);
    color:#000;
}

/* Menu icons */
.header-menu a{
    display:flex;
    align-items:center;
    gap:8px;
}

.header-menu a i{
    color:#111;
    font-size:14px;
}

/* Single post metadata and typography */
.single-post-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 18px;
    margin-top:18px;
    color:var(--muted);
    font-size:14px;
}

.single-post-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.single-post article.prose h1,
.page-id-3 .prose h1,
.page-id-73 .prose h1,
.page-id-74 .prose h1{
    font-size:40px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
}

.single-post article.prose h2,
.page-id-3 .prose h2,
.page-id-73 .prose h2,
.page-id-74 .prose h2{
    font-size:28px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
}

.single-post article.prose h3,
.page-id-3 .prose h3,
.page-id-73 .prose h3,
.page-id-74 .prose h3{
    font-size:24px !important;
    line-height:1.4 !important;
    font-weight:600 !important;
}

/* Responsive tables pasted from Excel, Word, websites or ChatGPT */
.table-responsive{
    width:100%;
    margin:26px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
}

.prose table,
.entry-content table,
.wp-block-table table{
    width:100%;
    min-width:640px;
    margin:0;
    border-collapse:collapse;
    border-spacing:0;
    background:#fff;
}

.prose th,
.prose td,
.entry-content th,
.entry-content td,
.wp-block-table th,
.wp-block-table td{
    padding:14px 16px;
    border:1px solid var(--line);
    text-align:left;
    vertical-align:top;
    line-height:1.55;
}

.prose th,
.entry-content th,
.wp-block-table th{
    background:var(--secondary);
    color:#000;
    font-weight:600;
}

.prose tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even){
    background:#f8fbfa;
}

/* Premium black footer */
.site-footer{
    background:#000;
    color:#fff;
}

.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer a{
    color:#fff;
}

.site-footer a:hover,
.footer-menu i,
.footer-contact i{
    color:var(--primary);
}

.footer-menu a,
.footer-contact p{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.footer-menu i,
.footer-contact i{
    flex:0 0 16px;
    margin-top:4px;
}

.footer-logo img{
    max-width:220px;
    max-height:80px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.16);
}

.footer-legal-links a{
    color:#fff;
}

.footer-legal-links a:hover{
    color:var(--primary);
}

@media(max-width:767px){
    .single-post article.prose h1,
    .page-id-3 .prose h1,
    .page-id-73 .prose h1,
    .page-id-74 .prose h1{font-size:32px !important;}

    .single-post article.prose h2,
    .page-id-3 .prose h2,
    .page-id-73 .prose h2,
    .page-id-74 .prose h2{font-size:28px !important;}

    .single-post article.prose h3,
    .page-id-3 .prose h3,
    .page-id-73 .prose h3,
    .page-id-74 .prose h3{font-size:22px !important;}

    .table-responsive{
        margin:20px 0;
        border-radius:10px;
    }

    .prose th,.prose td,
    .entry-content th,.entry-content td,
    .wp-block-table th,.wp-block-table td{
        padding:11px 12px;
        font-size:14px;
    }
}


/* Blog listing and single/legal page hero heading sizes */
.blog-grid .post-card h2{
    font-size:27px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
}

.single-post .page-hero h1,
.page-id-3 .page-hero h1,
.page-id-73 .page-hero h1,
.page-id-74 .page-hero h1{
    font-size:40px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
}

.single-post-meta a{
    color:inherit;
    font-weight:600;
}
.single-post-meta a:hover{color:var(--primary-dark);}

@media(max-width:767px){
    .blog-grid .post-card h2{font-size:23px !important;}
    .single-post .page-hero h1,
    .page-id-3 .page-hero h1,
    .page-id-73 .page-hero h1,
    .page-id-74 .page-hero h1{font-size:32px !important;}
}


/* =========================================================
   SINGLE BLOG POST - RESPONSIVE FIX
========================================================= */

/* Prevent content from overflowing */
.single-post .prose {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* =========================================================
   IMAGES
========================================================= */

.single-post .prose img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 28px !important;
    border-radius: 10px;
}

/* WordPress image blocks */
.single-post .prose figure,
.single-post .prose .wp-block-image {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    margin-bottom: 28px !important;
}

.single-post .prose figure img,
.single-post .prose .wp-block-image img {
    margin: 0 !important;
    width: 100%;
    height: auto;
}

/* Space after image before next paragraph */
.single-post .prose figure + p,
.single-post .prose .wp-block-image + p,
.single-post .prose img + p {
    margin-top: 24px !important;
}


/* =========================================================
   HEADINGS
========================================================= */

.single-post .prose h1 {
    font-size: 38px !important;
    line-height: 1.2;
    margin-bottom: 22px;
}

.single-post .prose h2 {
    font-size: 30px !important;
    line-height: 1.3;
    margin-top: 38px;
    margin-bottom: 18px;
}

.single-post .prose h3 {
    font-size: 23px !important;
    line-height: 1.4;
    margin-top: 30px;
    margin-bottom: 15px;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.single-post .prose p {
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.8;
}


/* =========================================================
   LISTS
========================================================= */

.single-post .prose ul,
.single-post .prose ol {
    max-width: 100%;
    margin: 18px 0 24px;
    padding-left: 25px;
}

.single-post .prose li {
    margin-bottom: 8px;
    line-height: 1.7;
}


/* =========================================================
   TABLE RESPONSIVE FIX
========================================================= */

/*
 WordPress Gutenberg normally wraps tables in
 .wp-block-table. This makes them horizontally scrollable.
*/

.single-post .prose .wp-block-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    margin: 28px 0;
    -webkit-overflow-scrolling: touch;
}

/* Classic Editor / normal HTML tables */
.single-post .prose table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    margin: 0;
}

/*
 If table is NOT inside .wp-block-table,
 this prevents it from breaking the entire page.
*/
.single-post .prose {
    overflow-x: auto;
}

/* Table cells */
.single-post .prose th,
.single-post .prose td {
    padding: 14px 16px;
    border: 1px solid #dddddd;
    text-align: left;
    vertical-align: top;
    white-space: normal;
}

.single-post .prose th {
    background: #80ed99;
    color: #000000;
    font-weight: 700;
}


/* =========================================================
   VIDEOS / IFRAMES
========================================================= */

.single-post .prose iframe,
.single-post .prose video,
.single-post .prose embed,
.single-post .prose object {
    max-width: 100%;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .single-post .prose {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }

    .single-post .prose h1 {
        font-size: 31px !important;
        line-height: 1.25;
    }

    .single-post .prose h2 {
        font-size: 26px !important;
        line-height: 1.3;
        margin-top: 32px;
    }

    .single-post .prose h3 {
        font-size: 21px !important;
        line-height: 1.4;
        margin-top: 26px;
    }

    .single-post .prose p {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 18px;
    }

    /* Image fix */
    .single-post .prose img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 24px !important;
    }

    .single-post .prose figure,
    .single-post .prose .wp-block-image {
        width: 100%;
        max-width: 100%;
        margin-bottom: 24px !important;
    }

    /* Lists */
    .single-post .prose ul,
    .single-post .prose ol {
        padding-left: 22px;
    }

    /*
     Gutenberg table:
     swipe left/right on mobile
    */
    .single-post .prose .wp-block-table {
        width: 100%;
        max-width: calc(100vw - 30px);
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .single-post .prose .wp-block-table table {
        width: max-content;
        min-width: 650px;
    }

    .single-post .prose th,
    .single-post .prose td {
        padding: 12px 14px;
        font-size: 14px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .single-post .prose h1 {
        font-size: 28px !important;
    }

    .single-post .prose h2 {
        font-size: 24px !important;
    }

    .single-post .prose h3 {
        font-size: 20px !important;
    }

    .single-post .prose p,
    .single-post .prose li {
        font-size: 15.5px;
    }
}



/* Responsive tables in single blog posts */

.responsive-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 28px 0;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.responsive-table-wrap table {
    width: 100%;
    min-width: 700px;
    margin: 0 !important;
}