/* Wirral Skips theme 2.5 — desktop look. Loaded on the site AND in the editor, so the editor shows the real layout.
 * Phone rules are in site-mobile.css, which only loads on the site.
 * Colours come from theme.json (Appearance → Editor → Styles → Colours), so changing a colour there changes it here. */
:root{--navy:var(--wp--preset--color--navy,#13293D);--green:var(--wp--preset--color--green,#16A34A);--green-dark:var(--wp--preset--color--green-dark,#15803D);--yellow:var(--wp--preset--color--yellow,#F4C542);--cream:var(--wp--preset--color--cream,#F8F7F3);--muted:var(--wp--preset--color--muted,#5F6B76);--pale-green:var(--wp--preset--color--pale-green,#EDF9F0);--line:#E1E5E8}
html{scroll-behavior:smooth}
body{margin:0;color:var(--navy);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}

/* Remove the editor's automatic gaps between full-width sections; sections set their own spacing. */
.wp-site-blocks>*+*,.wp-block-post-content>section,.wp-block-post-content>section+*{margin-block-start:0}
.ws-main{margin:0}
.ws-wrap{max-width:1180px;margin-left:auto!important;margin-right:auto!important;padding:0 28px;box-sizing:border-box;width:100%}
.ws-narrow{max-width:820px}
.ws-section{padding:58px 0}
.ws-cream{background:var(--cream)}
.ws-section h2{font-size:38px;line-height:1.1;margin:0 0 8px;letter-spacing:-1px}
.ws-center{text-align:center}
.ws-sub{text-align:center;color:#65717E;margin:0 0 36px}
.ws-sub.ws-left{text-align:left;margin-bottom:20px}

/* Plain pages (Privacy Policy, Terms, guides): readable width. Pages built from sections ignore this. */
.ws-page-title{max-width:820px;margin:44px auto 10px!important;padding:0 28px;font-size:40px}
.ws-page-content>:not(section){max-width:820px;margin-left:auto!important;margin-right:auto!important;padding-left:28px;padding-right:28px;box-sizing:border-box}
.ws-page-content>:last-child:not(section){margin-bottom:56px}

/* Header */
.ws-site-head{background:var(--navy);color:#fff;min-height:84px;display:flex;align-items:center}
.ws-head-inner{min-height:84px;gap:24px}
.ws-brand{margin:0}
.ws-brand{flex-shrink:1;min-width:0}
.ws-brand img{max-width:100%;height:auto;display:block}
.ws-nav{font-size:14px;gap:34px}
.ws-nav a:hover,.ws-foot-links a:hover{color:var(--yellow)}
.ws-nav .wp-block-navigation__responsive-container-open{color:#fff}
.ws-nav .wp-block-navigation__responsive-container.is-menu-open{background:var(--navy)!important;color:#fff!important;padding:24px}
.ws-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{font-size:20px;padding:6px 0}

/* Hero */
.ws-hero{position:relative;overflow:hidden;background:#fff;min-height:490px}
.ws-hero-photo{position:absolute;top:0;right:0;bottom:0;width:68%;margin:0!important;z-index:0}
.ws-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.ws-hero:not(.ws-hero--plain):before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fff 0 40%,rgba(255,255,255,.98) 46%,rgba(255,255,255,.72) 53%,rgba(255,255,255,.12) 66%,transparent 73%)}
.ws-hero-inner{position:relative;z-index:2;padding-top:58px;padding-bottom:48px}
.ws-hero-copy{max-width:590px}
.ws-h1{font-size:56px!important;line-height:.98!important;margin:0 0 20px;letter-spacing:-2px}
.ws-hero mark{background:none!important}
.ws-lead{font-size:20px;line-height:1.45;color:#455466;max-width:540px;margin:0}
.ws-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;font-weight:700;margin:22px 0!important;padding:0}
.ws-ticks li{display:flex;align-items:center}
.ws-ticks li:before{content:'✓';display:inline-grid;place-items:center;background:var(--green);color:#fff;border-radius:50%;width:23px;height:23px;margin-right:8px;font-size:13px;flex:0 0 auto}
.ws-hero--plain{min-height:0;background:var(--cream)}
.ws-hero--plain .ws-hero-inner{padding-bottom:52px}

/* Postcode box (shortcode) */
.ws-postcode-box{background:#fff;padding:20px;border-radius:12px;box-shadow:0 7px 24px rgba(19,41,61,.1);max-width:580px;margin:0}
.ws-postcode-box label{display:block;font-weight:800;font-size:18px;margin-bottom:9px}
.ws-postcode-row{display:flex;gap:10px}
.ws-postcode-row input{flex:1;min-width:0;padding:15px;border:1px solid #CFD6DC;border-radius:8px;font-size:16px;font-family:inherit;color:var(--navy)}
.ws-postcode-row input:focus{outline:3px solid rgba(22,163,74,.25);border-color:var(--green)}
.ws-btn{background:var(--green-dark);color:#fff;border:0;border-radius:8px;padding:15px 22px;font-weight:800;font-size:16px;font-family:inherit;cursor:pointer;white-space:nowrap}
.ws-btn:hover{filter:brightness(.94)}
.ws-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.ws-micro{font-size:13px;color:#536170;margin:11px 0 0}
.ws-postcode-box--dark{background:transparent;box-shadow:none;padding:0;max-width:690px}
.ws-postcode-box--dark label{color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Steps */
.ws-steps{gap:44px!important;text-align:center;margin:0!important}
.ws-step-num{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900;margin:0 auto -5px!important;position:relative;z-index:2}
.ws-step-icon{margin:0 auto 5px!important}
.ws-step-icon img{width:128px;height:128px;object-fit:contain;display:block;margin:0 auto}
.ws-steps h3{margin:4px 0;font-size:19px}
.ws-steps p:not(.ws-step-num){margin:5px 0;color:#65717E}

/* Skip sizes */
.ws-skip-grid{gap:16px!important;margin:0!important}
.ws-skip-card{border:1px solid var(--line);border-radius:12px;padding:14px 14px 18px;text-align:center;background:#fff;min-height:290px;box-shadow:0 3px 14px rgba(19,41,61,.04)}
.ws-skip-card figure{margin:0!important}
.ws-skip-card img{width:100%;height:165px;object-fit:contain;transform:scale(1.08)}
.ws-skip-card h3{font-size:22px;margin:10px 0 7px}
.ws-skip-card p{font-size:14px;line-height:1.45;color:#536170;margin:5px 0}
.ws-skip-card .ws-bags{color:var(--navy)}
.ws-not-sure{background:var(--pale-green);display:flex;flex-direction:column;justify-content:center}
.ws-question{font-size:44px!important;color:var(--green)!important;border:4px solid var(--green);width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px!important;font-weight:900;line-height:1}

/* Advice guides */
.ws-guides-band{border-top:1px solid #EEE;border-bottom:1px solid #EEE}
.ws-guides{gap:0!important;margin:0 auto!important;padding:0!important}
.ws-guide{padding:30px 24px;border-right:1px solid #E2E6E9;text-align:center}
.ws-guide:last-child{border-right:0}
.ws-guide figure{margin:0 auto 8px!important}
.ws-guide img{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto}
.ws-guide h3{margin:0 0 7px;font-size:17px}
.ws-guide p{font-size:14px;color:#65717E;line-height:1.45;margin:0 0 8px}
.ws-guide .ws-guide-link a{color:var(--green-dark);font-weight:800;text-decoration:none}

/* Areas */
.ws-area-layout{gap:55px!important;margin:0 auto!important}
.ws-areas h2{text-align:left}
.ws-pills{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;padding:0;margin:0}
.ws-pills li{padding:4px 14px 4px 0;color:#536170;font-size:14px}
.ws-pills a{text-decoration:underline;text-underline-offset:3px}
.ws-map{margin:0!important}
.ws-map img{width:100%;max-height:430px;object-fit:contain}

/* Final call to action */
.ws-final-cta{background:var(--navy);color:#fff;overflow:hidden;padding:66px 0;position:relative}
.ws-cta-copy{position:relative;z-index:2;width:72%}
.ws-final-cta h2{color:#fff;font-size:48px;line-height:1.05;margin:0 0 10px;letter-spacing:-1px}
.ws-final-cta h2:before{content:'';display:block;width:55px;height:5px;border-radius:5px;background:var(--yellow);margin-bottom:24px}
.ws-cta-lead{font-size:20px;margin:0 0 25px!important;color:#fff}
.ws-cta-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0!important;padding:0;font-size:14px}
.ws-cta-ticks li:before{content:'✓';color:var(--yellow);font-size:20px;font-weight:900;margin-right:8px}

/* FAQ */
.ws-faq-grid{gap:46px!important;margin:0 auto!important}
.ws-faq-grid h2{text-align:left}
.ws-faq{border:1px solid #DFE4E7;border-radius:8px;padding:16px;margin:9px 0!important;background:#fff}
.ws-faq summary{font-weight:750;cursor:pointer}
.ws-faq p{margin:10px 0 0}
.ws-faq-img{margin:0!important}
.ws-faq-img img{width:100%;height:310px;object-fit:cover;object-position:70% center;border-radius:14px}

/* Local page */
.ws-local h2{text-align:left}

/* Footer */
.ws-site-foot{background:var(--navy);color:#fff;padding:36px 0}
.ws-foot{align-items:center}
.ws-foot-logo{margin:0}
.ws-foot-logo img{max-width:100%;height:auto;display:block}
.ws-foot-links{font-size:13px;gap:26px}
.ws-legal{font-size:12px;opacity:.75;margin:25px 0 0}
.ws-legal a{color:inherit}

/* Quote page */
.page-template-page-no-title .ws-main>.wp-block-post-content>.wp-block-shortcode,.ws-main>.wp-block-post-content>.ws-quote{max-width:760px;margin:45px auto 60px!important;padding:0 18px}



/* Repeating cards: you can add, duplicate or delete cards and the grid adjusts to how many there are.
   1–4 cards sit in one row; 5–6 use three columns; 7 or more use four. Phones: two per row (steps: one). */
.wp-block-columns.ws-skip-grid,.wp-block-columns.ws-guides,.wp-block-columns.ws-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}
.wp-block-columns.ws-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps):has(>.wp-block-column:only-child){grid-template-columns:minmax(0,420px);justify-content:center}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps):has(>.wp-block-column:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps):has(>.wp-block-column:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps):has(>.wp-block-column:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps):has(>.wp-block-column:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps):has(>.wp-block-column:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
.wp-block-columns:is(.ws-skip-grid,.ws-guides,.ws-steps)>.wp-block-column{flex-basis:auto!important;width:auto!important;margin:0!important}
.ws-guides:not(.ws-guides--cards):has(>.wp-block-column:nth-child(5))>.ws-guide{border-bottom:1px solid #E2E6E9;border-right:0}


/* "Get a Skip" button in the header menu. Give any menu item the class ws-nav-cta (Advanced → Additional CSS class) to make it the button. */
.ws-nav .ws-nav-cta>a.wp-block-navigation-item__content{background:var(--green-dark);color:#fff!important;font-weight:800;padding:10px 18px;border-radius:8px;text-decoration:none}
.ws-nav .ws-nav-cta>a.wp-block-navigation-item__content:hover{background:#116932}
.ws-nav .is-menu-open .ws-nav-cta{margin-top:10px}
.ws-nav .wp-block-navigation__responsive-container.is-menu-open .ws-nav-cta>a.wp-block-navigation-item__content{padding:12px 24px!important}

/* ---- 2.5 sections ("bands"): the section itself sets the content width, so there's no hidden wrapper to click through. ---- */
.ws-band{padding-left:max(28px,calc((100% - 1124px) / 2));padding-right:max(28px,calc((100% - 1124px) / 2));box-sizing:border-box}
.ws-hero.ws-band{padding-top:58px;padding-bottom:48px}
.ws-hero.ws-band>.ws-hero-copy{position:relative;z-index:2;max-width:590px;margin:0!important}
.ws-hero--plain.ws-band{padding-bottom:52px}
.ws-final-cta.ws-band>*{max-width:760px;position:relative;z-index:2}
.ws-final-cta.ws-band>.ws-postcode-box{max-width:690px}
.ws-local.ws-band>*{max-width:820px}

/* Help & advice: clean white cards on the warm off-white band */
.ws-guides--cards{gap:16px!important}
.wp-block-columns.ws-guides--cards>.wp-block-column.ws-guide{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 18px 22px;box-shadow:0 3px 14px rgba(19,41,61,.04)}

/* Postcode box block in the editor: the button is text, not a real button */
.ws-postcode-row span.ws-btn{display:inline-block;cursor:text}

/* Fixed picture sizes. !important because the editor puts height:auto on every image; this keeps the
   editor the same as the site (otherwise skip photos and icons blow up while editing). */
.ws-skip-card img{height:165px!important}
.ws-step-icon img{width:128px!important;height:128px!important}
.ws-guide img{width:104px!important;height:104px!important}
.ws-hero-photo img{height:100%!important}
.ws-faq-img img{height:310px!important}
.ws-map img{height:auto!important;max-height:430px}

/* ---- 2.6 production pass ---- */
/* Buttons and small green text use a slightly darker green (theme.json: "Green for buttons and small text") so they meet
   WCAG AA contrast (5.0:1 with white). The brand green stays for ticks, large headings and icons. */
/* Bigger tap areas, same look: FAQ questions are clickable across the whole box; advice links get a 44px target. */
.ws-faq{padding:0!important}
.ws-faq summary{padding:16px}
.ws-faq[open] summary{padding-bottom:10px}
.ws-faq p{margin:0!important;padding:0 16px 16px}
.ws-guide .ws-guide-link a{display:inline-block;padding:13px 6px;margin:-13px -6px}
.ws-nav .wp-block-navigation__responsive-container-open,.ws-nav .wp-block-navigation__responsive-container-close{padding:10px;margin:-10px}
/* Header menu that doesn't fit on one line (long labels, more items): show the ☰ menu instead of wrapping.
   The class is set by a few lines of script printed straight after the menu (see inc/nav.php). */
.ws-nav.ws-nav--collapsed .wp-block-navigation__responsive-container-open{display:flex!important}
.ws-nav.ws-nav--collapsed .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}
/* Keyboard focus that's easy to see on every link and button (not colour alone: a solid outline) */
/* Navy ring on light backgrounds; yellow ring on the navy header, call-to-action band and footer (≥3:1 either way). */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:3px}
:is(.ws-site-head,.ws-final-cta,.ws-site-foot,.wp-block-navigation__responsive-container.is-menu-open) :is(a,button,summary,input):focus-visible{outline-color:var(--yellow)}
.ws-postcode-box--card input:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
/* Enquiry page: the form card sits on the warm off-white band, like the homepage sections. */
.ws-quote-main{background:var(--cream);padding:48px 18px 72px}
/* Short pages (e.g. the enquiry page's first step): the main area grows so the footer always reaches the bottom
   of the screen, with no white strip underneath. */
.wp-site-blocks{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.wp-site-blocks>.ws-main,.wp-site-blocks>main{flex:1 0 auto}