/*
Theme Name: Web Social 2026
Theme URI: https://web-social.co.uk/
Author: Web Social
Description: Custom theme for Web Social — get found, get chosen, get more business.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: web-social-2026
*/

/* Page-specific styles live in assets/css/. These are shared WordPress tweaks. */
.ws-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}
.ws-form-error{color:#B42318;font-size:0.86rem;margin-top:10px;}
.ws-pagination{display:flex;gap:8px;justify-content:center;margin-top:30px;}
.ws-pagination .page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:100px;font-size:0.88rem;}
.ws-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);}
.post-article img{max-width:100%;height:auto;border-radius:12px;}
.post-hero-img img{width:100%;height:auto;display:block;}
.blog-card .thumb,.post-card .thumb,.featured-post .thumb{position:relative;}
.blog-card .thumb .illus,.post-card .thumb .illus,.featured-post .thumb .illus{position:absolute;inset:0;min-height:180px;}
.cat-box .cat-icon .illus{transform:none;}
a.cat-box{display:block;color:inherit;}
html,body{overflow-x:clip;}
.page-hero,.post-hero,.blog-hero{position:relative;overflow:hidden;}
body.admin-bar header{top:32px;}
@media(max-width:782px){body.admin-bar header{top:46px;}}

/* Portfolio strip */
.ws-portfolio{padding:8px 0 12px;}
.ws-portfolio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px;}
.ws-portfolio-head .mono{color:var(--green-deep);display:block;margin-bottom:10px;}
.ws-portfolio-head h2{font-size:clamp(0.95rem,3vw,1.9rem);font-weight:600;white-space:nowrap;}
.ws-portfolio-head p{color:var(--ink-soft);margin-top:10px;font-size:1rem;max-width:56ch;}
.ws-portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.ws-portfolio-card{display:block;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:transform .2s,box-shadow .2s;}
a.ws-portfolio-card:hover{transform:translateY(-4px);box-shadow:0 20px 36px -22px rgba(16,27,51,0.3);}
.ws-portfolio-thumb{aspect-ratio:4/5;overflow:hidden;background:var(--line);}
.ws-portfolio-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .4s ease;}
a.ws-portfolio-card:hover .ws-portfolio-thumb img{transform:scale(1.04);}
.ws-portfolio-card h3{font-size:0.98rem;font-weight:600;padding:14px 16px 18px;line-height:1.35;}
@media(max-width:900px){.ws-portfolio-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media(max-width:420px){.ws-portfolio-card h3{font-size:0.86rem;padding:10px 12px 14px;}}

/* Real-results screenshots */
.proof-photo.proof-shot{background:#fff;display:flex;align-items:center;justify-content:center;}
.proof-photo.proof-shot img{width:100%;height:100%;object-fit:contain;display:block;}
/* Sam */
.trust-face{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 6px 16px -8px rgba(16,27,51,0.4);}
.sam-card{position:relative;border-radius:28px;overflow:hidden;background:#E7E8EA;box-shadow:0 30px 60px -28px rgba(16,27,51,0.45);aspect-ratio:4/5;max-height:520px;margin-left:auto;}
.sam-card img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.sam-chip{position:absolute;background:#fff;border-radius:100px;padding:10px 16px;font-size:0.85rem;color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,0.45);}
.sam-chip-a{top:22px;left:18px;}
.sam-chip-b{bottom:22px;right:18px;}
img.av,img.av-lg{object-fit:cover;border-radius:50%;}
img.av{width:34px;height:34px;} img.av-lg{width:56px;height:56px;}

/* Footer contact form + WhatsApp button (shared by every page) */
.footer-contact{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;margin-bottom:44px;scroll-margin-top:90px;}
  .footer-contact-head{margin-bottom:22px;}
  .footer-contact-head .mono{color:var(--green-deep);display:block;margin-bottom:10px;}
  .footer-contact-head h2{font-size:clamp(0.85rem,2.6vw,1.5rem);font-weight:600;white-space:nowrap;}
  .footer-contact-head p{color:var(--ink-soft);margin-top:8px;font-size:0.95rem;}
  .footer-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .footer-contact-grid .full{grid-column:1 / -1;}
  .footer-form-row{display:flex;flex-direction:column;gap:7px;}
  .footer-form-row label{font-size:0.85rem;font-weight:600;color:var(--ink);}
  .footer-form-row input,.footer-form-row textarea{
    font-family:'Inter',sans-serif;font-size:0.93rem;padding:11px 13px;border-radius:10px;
    border:1.5px solid var(--line);background:var(--bg);color:var(--ink);transition:border-color .15s;resize:vertical;width:100%;
  }
  .footer-form-row input:focus,.footer-form-row textarea:focus{outline:none;border-color:var(--green);}
  .footer-contact .btn-primary{border:none;cursor:pointer;margin-top:6px;}
  .footer-contact-success{display:none;text-align:center;padding:20px 10px;}
  .footer-contact-success .success-badge{width:48px;height:48px;border-radius:50%;background:var(--green-deep);color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .footer-contact-success h3{font-size:1.15rem;margin-bottom:6px;}
  .footer-contact-success p{color:var(--ink-soft);font-size:0.9rem;}
  @media(max-width:700px){.footer-contact-grid{grid-template-columns:1fr;}.footer-contact{padding:26px 22px;}}


  .whatsapp-btn{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:10px 18px;border-radius:100px;font-weight:600;font-size:0.88rem;margin-top:14px;transition:background .15s,transform .15s;}
  .whatsapp-btn:hover{background:#1DA851;transform:translateY(-1px);}

/* About dropdown */
.nav-drop{position:relative;display:flex;align-items:center;}
.nav-drop-btn{background:none;border:none;padding:0;font:inherit;font-weight:500;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.nav-drop-btn:hover{color:var(--green-deep);}
.nav-drop-btn svg{transition:transform .2s;}
.nav-drop-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 44px -20px rgba(16,27,51,0.35);padding:8px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:60;}
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
.nav-drop-menu a{display:block;padding:10px 14px;border-radius:9px;font-size:0.92rem;white-space:nowrap;}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--green-pale);color:var(--green-deep);}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0);}
.nav-drop:hover .nav-drop-btn svg,.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg);}

/* Reviews strip (Who We Are) */
.ws-rstrip{background:var(--green-pale);margin-bottom:56px;}
.ws-rstrip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px;}
.ws-rstrip-head .mono{color:var(--green-deep);display:block;margin-bottom:10px;}
.ws-rstrip-head h2{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:600;}
.ws-rstrip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.ws-rstrip-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;}
.ws-rstrip-stars{color:var(--gold);letter-spacing:2px;font-size:1rem;}
.ws-rstrip-stars span{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.05em;text-transform:uppercase;margin-left:8px;}
.ws-rstrip-card p{color:var(--ink);font-size:0.96rem;line-height:1.6;margin:14px 0 18px;flex:1;}
.ws-rstrip-who strong{display:block;font-size:0.92rem;}
.ws-rstrip-who span{font-size:0.8rem;color:var(--muted);}

/* Footer blog feed + logo in contact column */
.ft-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.ft-posts a{display:flex;gap:12px;align-items:flex-start;color:var(--ink);}
.ft-posts a:hover .ft-title{color:var(--green-deep);}
.ft-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.ft-title{display:block;font-size:0.88rem;font-weight:600;line-height:1.35;}
.ft-date{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.68rem;color:var(--muted);margin-top:4px;}
.ft-all{display:inline-block;margin-top:14px;font-size:0.85rem;font-weight:700;color:var(--green-deep);}
.ft-logo{margin-bottom:12px;}
.ft-logo .logo-img{height:30px;width:auto;}
/* portfolio header buttons */
.ws-portfolio-links{display:flex;gap:12px;flex-wrap:wrap;}

.footer-grid .ft-all{color:var(--green-deep);font-weight:700;}
.footer-grid .ft-posts a{color:var(--ink);}
.footer-grid li{font-size:0.92rem;color:var(--ink-soft);}

/* stock photos on the Web Design page */
.page-hero-visual img.ws-photo,.mini-hero-visual img.ws-photo{width:100%;height:100%;object-fit:cover;display:block;}

/* Captcha row (all forms) */
.ws-captcha{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 6px;}
.ws-captcha label{font-size:0.88rem;font-weight:600;color:var(--ink);}
.ws-captcha-q{font-weight:700;}
.ws-captcha input[name="captcha_answer"]{width:96px;padding:11px 13px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);font-size:0.95rem;color:var(--ink);font-family:'Inter',sans-serif;}
.ws-captcha input[name="captcha_answer"]:focus{outline:none;border-color:var(--green);}
.ws-captcha-msg{flex-basis:100%;font-size:0.84rem;color:#B42318;}

/* Footer contact form — black */
.footer-contact{background:#0B0C10;border-color:#0B0C10;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 60px -32px rgba(11,12,16,0.6);}
.footer-contact::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 0%,rgba(0,179,240,0.22),transparent 45%);pointer-events:none;}
.footer-contact > *{position:relative;}
.footer-contact-head .mono{color:var(--green);}
.footer-contact-head h2{color:#fff;}
.footer-contact-head p{color:#C9CEDB;}
.footer-contact-grid{grid-template-columns:repeat(3,1fr);}
.footer-contact .footer-form-row label,.footer-contact .ws-captcha label{color:#E6E9F0;}
.footer-contact .footer-form-row input,.footer-contact .footer-form-row textarea,.footer-contact .ws-captcha input[name="captcha_answer"]{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:#fff;}
.footer-contact .footer-form-row input::placeholder,.footer-contact .footer-form-row textarea::placeholder,.footer-contact .ws-captcha input::placeholder{color:#8B93A8;}
.footer-contact .footer-form-row input:focus,.footer-contact .footer-form-row textarea:focus,.footer-contact .ws-captcha input:focus{border-color:var(--green);background:rgba(255,255,255,0.09);}
.footer-contact .btn-primary{background:var(--green);color:#0B0C10;}
.footer-contact .btn-primary:hover{background:#fff;color:#0B0C10;}
.footer-contact .ws-form-error,.footer-contact .ws-captcha-msg{color:#FF9B8F;}
.footer-contact-success h3{color:#fff;}
.footer-contact-success p{color:#C9CEDB;}
@media(max-width:900px){.footer-contact-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.footer-contact-grid{grid-template-columns:1fr;}}

/* Footer form: white input boxes on the black card */
.footer-contact .footer-form-row input,.footer-contact .footer-form-row textarea,.footer-contact .ws-captcha input[name="captcha_answer"]{background:#fff;border-color:#fff;color:#0B0C10;}
.footer-contact .footer-form-row input::placeholder,.footer-contact .footer-form-row textarea::placeholder,.footer-contact .ws-captcha input::placeholder{color:#8A90A0;}
.footer-contact .footer-form-row input:focus,.footer-contact .footer-form-row textarea:focus,.footer-contact .ws-captcha input:focus{background:#fff;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,179,240,0.35);}

/* ---------- Colourful service illustrations ---------- */
/* Reputation: warm amber -> coral */
.illus.illus-reputation{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,0.35),transparent 45%),linear-gradient(135deg,#FFC24B 0%,#FF8A4C 55%,#F2546B 100%);}
.illus-reputation .phone{background:#1B1035;box-shadow:0 18px 34px -12px rgba(120,20,40,0.55);}
.illus-reputation .phone i{background:linear-gradient(180deg,#fff,#FFF4E6);}
.illus-reputation .stars-float{color:#fff;text-shadow:0 4px 14px rgba(150,40,20,0.45);}
.illus-reputation .s2{opacity:0.85;}
.illus-reputation .bubble{color:#E2435E;box-shadow:0 12px 26px -12px rgba(150,30,40,0.55);}
/* Listings: green-teal map */
.illus.illus-listings{background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.25),transparent 40%),linear-gradient(135deg,#3DDC97 0%,#14B8A6 50%,#0EA5E9 100%);}
.illus-listings .road{background:#fff;opacity:0.75;}
.illus-listings .pin-lg{background:#EF4444;box-shadow:0 12px 22px -8px rgba(120,10,10,0.6);}
.illus-listings .pin-sm{background:#fff;opacity:0.85;}
/* Local SEO: indigo -> brand blue */
.illus.illus-seo{background:radial-gradient(circle at 15% 15%,rgba(255,255,255,0.22),transparent 45%),linear-gradient(135deg,#6D5BF5 0%,#4F7BF7 45%,#00B3F0 100%);}
.illus-seo .bars span{background:#fff;opacity:0.55;}
.illus-seo .bars span:nth-child(4){background:#FFC24B;opacity:1;box-shadow:0 0 18px rgba(255,194,75,0.7);}
.illus-seo .rank-badge{background:#fff;color:#3B2DB8;box-shadow:0 12px 26px -12px rgba(30,20,90,0.6);}
/* lighter shade under the "01 / Reputation" labels so the colour shows */
.pillar-photo::after{background:linear-gradient(180deg,transparent 58%,rgba(11,12,16,0.32));}
.pillar-photo .num{text-shadow:0 1px 6px rgba(0,0,0,0.35);}

/* Web design illustration: pink -> violet (blog category boxes, post placeholders) */
.illus.illus-webdesign{background:radial-gradient(circle at 85% 10%,rgba(255,255,255,0.3),transparent 45%),linear-gradient(135deg,#FF7EB3 0%,#B36BF2 55%,#6D5BF5 100%);}
.illus-webdesign .browser{box-shadow:0 18px 30px -14px rgba(60,20,110,0.55);}
.illus-webdesign .browser .block.accent{background:#FF7EB3;}

/* ---------- Feature cards: colour + icons ---------- */
.fc-rep{--fc1:#FFC24B;--fc2:#F2546B;--fct:#E8573A;--fcs:rgba(242,84,107,0.28);}
.fc-list{--fc1:#3DDC97;--fc2:#0EA5E9;--fct:#0F9488;--fcs:rgba(20,184,166,0.28);}
.fc-seo{--fc1:#6D5BF5;--fc2:#00B3F0;--fct:#4F46E5;--fcs:rgba(79,123,247,0.3);}
.fc-brand{--fc1:#00B3F0;--fc2:#B36BF2;--fct:#0077A8;--fcs:rgba(0,179,240,0.28);}
.feature-card[class*="fc-"],.pillar-mini[class*="fc-"]{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff 55%,color-mix(in srgb,var(--fc1) 9%,#fff));border:1px solid color-mix(in srgb,var(--fc2) 18%,var(--line));}
.feature-card[class*="fc-"]::before,.pillar-mini[class*="fc-"]::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--fc1),var(--fc2));}
.feature-card[data-n]::after{content:attr(data-n);position:absolute;right:16px;top:14px;font-family:'Fraunces',serif;font-weight:700;font-size:4.2rem;line-height:1;color:var(--fc2);opacity:0.09;pointer-events:none;}
.feature-card[class*="fc-"] > *{position:relative;}
.fc-icon{width:54px;height:54px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--fc1),var(--fc2));color:#fff;box-shadow:0 14px 26px -12px var(--fcs);margin-bottom:18px;transition:transform .25s ease;}
.fc-icon svg{width:26px;height:26px;}
.feature-card[class*="fc-"] .num,.pillar-mini[class*="fc-"] .num{color:var(--fct);font-weight:600;}
.feature-card[class*="fc-"]:hover{transform:translateY(-6px);box-shadow:0 26px 46px -26px var(--fcs);}
.feature-card[class*="fc-"]:hover .fc-icon{transform:rotate(-6deg) scale(1.06);}
.pillar-mini[class*="fc-"]{text-align:center;padding:28px 20px 26px;}
.pillar-mini .fc-icon{margin:0 auto 14px;}

/* Responsive: headings forced onto one line on desktop wrap normally on smaller screens */
h1,h2,h3,h4{overflow-wrap:break-word;}
@media(max-width:900px){
  .section-head h2,.mini-hero h2,.cta-band h2,.proof-cta h2,.proof-text h2,.price-teaser h2,
  .footer-contact-head h2,.ws-portfolio-head h2,.featured-post h2,.case-hero h1,.rv-hero h1,.page-hero h1{
    white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.25;}
  .section-head h2,.mini-hero h2,.ws-portfolio-head h2,.proof-text h2,.featured-post h2{font-size:clamp(1.3rem,4.6vw,1.7rem);}
  .cta-band h2,.proof-cta h2,.price-teaser h2,.footer-contact-head h2{font-size:clamp(1.2rem,4.4vw,1.6rem);}
  .case-hero h1{font-size:clamp(1.7rem,7vw,2.6rem);}
  .breadcrumb{white-space:normal;}
}
@media(max-width:520px){
  .footer-contact .captcha-row,.ws-captcha{flex-wrap:wrap;}
  .site-footer a[href^="mailto:"]{word-break:break-all;}
  .breakdown-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  .breakdown-table th,.breakdown-table td{padding-left:10px;padding-right:10px;}
}

/* Click to Chat plugin button: keep it in the bottom corner, clear of the header/menu */
#ht-ctc-chat{top:auto !important;bottom:22px !important;right:18px !important;left:auto !important;}
@media(max-width:600px){#ht-ctc-chat{bottom:16px !important;right:14px !important;}}