/*
Theme Name: Mobile Phone Sex Handset
Theme URI: https://www.mobilephonesex.co.uk/
Author: Kilo Delta
Description: Plugin-free mobile-first "app" theme for Mobile Phone Sex: compact app bar, bottom tab bar, swipeable style chips and picture galleries, big thumb-sized call buttons, automatic dark mode, age gate and cookie consent built in.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mps-handset
*/
:root{--bg:#eef1f5;--surface:#fff;--surface2:#f6f8fb;--ink:#121a24;--muted:#556272;--call:#15803d;--call2:#0f6b32;--accent:#be185d;--link:#1d4ed8;--line:#dbe1ea;--r:20px;--rs:14px;--w:960px;--bar:60px;--shadow:0 1px 2px rgba(18,26,36,.06),0 6px 18px rgba(18,26,36,.07);
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0b1016;--surface:#151c26;--surface2:#1c2531;--ink:#eef2f7;--muted:#a3afbf;--call:#1f9a53;--call2:#1a8a4a;--accent:#f472b6;--link:#8db4ff;--line:#2a3544;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--font);padding-bottom:calc(var(--bar) + 18px + env(safe-area-inset-bottom))}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)}
h1{font-size:clamp(1.65rem,6.2vw,2.6rem);margin:.3em 0 .35em}
h2{font-size:clamp(1.25rem,4.4vw,1.6rem);margin:1.5em 0 .6em}
h3{font-size:1.1rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--call);box-shadow:0 0 0 0 rgba(34,164,90,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(34,164,90,0)}100%{box-shadow:0 0 0 0 rgba(34,164,90,0)}}

/* App bar */
.masthead{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.brand .b1{color:var(--ink)}
.brand .b2{color:var(--call)}
.brand small{display:none}
.pill18{font:800 .78rem var(--font);color:var(--accent);border:2px solid var(--accent);border-radius:999px;padding:3px 10px;letter-spacing:.04em}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;display:inline-block}
.nav a:hover{background:var(--surface2)}

/* Bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--bar);color:var(--muted);text-decoration:none;font:700 .72rem var(--font)}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar a[aria-current="page"],.tabbar a:hover{color:var(--call)}

/* Buttons */
.call{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;background:var(--call);color:#fff;font:800 1.15rem var(--font);text-decoration:none;padding:12px 22px;border-radius:999px;box-shadow:0 6px 16px rgba(21,128,61,.3);white-space:nowrap}
.call:hover,.call:active{background:var(--call2);color:#fff}
.call.big{min-height:60px;font-size:1.3rem;padding:14px 28px}
.btn{font:800 16px var(--font);background:var(--call);color:#fff;border:0;border-radius:999px;padding:12px 24px;min-height:48px;cursor:pointer}
.btn.alt{background:var(--surface2);border:1px solid var(--line);color:var(--ink)}

/* Hero */
.hero{padding:22px 0 8px}
.hero .lead{color:var(--muted);font-size:1.05rem;max-width:62ch}
.stamp{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font:700 .8rem var(--font);padding:6px 13px;border-radius:999px}
.how{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.how li{background:var(--surface);border-radius:var(--rs);padding:12px 8px;text-align:center;font:700 .86rem var(--font);box-shadow:var(--shadow)}
.how b{display:grid;place-items:center;margin:0 auto 6px;width:30px;height:30px;border-radius:50%;background:var(--call);color:#fff;font-size:.95rem}
.hero .call.big{width:100%}
.notice{margin:16px 0;padding:12px 14px;background:var(--surface);color:var(--muted);border-radius:var(--rs);font-size:.92rem;box-shadow:var(--shadow)}
.notice strong{color:var(--accent)}
.quick{background:var(--surface);border-radius:var(--r);padding:2px 18px 16px;margin:20px 0 4px;box-shadow:var(--shadow)}
.quick h2{margin-top:.9em}
.quick p{margin:.4em 0 0;color:var(--muted)}

/* Style tiles: swipe row on phones, grid on larger screens */
.styles{list-style:none;margin:0 -16px;padding:2px 16px 12px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.styles::-webkit-scrollbar{display:none}
.styles li{flex:0 0 74%;max-width:280px;scroll-snap-align:start}
.styles a{display:flex;flex-direction:column;gap:3px;height:100%;background:var(--surface);color:var(--ink);text-decoration:none;padding:16px;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid transparent}
.styles a:hover,.styles a:active{border-color:var(--call)}
.styles strong{font-size:1.1rem}
.styles span{font-size:.9rem;color:var(--muted)}

/* Line cards */
.group{margin:6px 0 22px}
.gh{margin:1.1em 0 .6em;font-size:1.2rem}
.gh a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.gh a:after{content:"\203A";color:var(--call);font-size:1.5rem;line-height:1}
.group h2 small{display:block;font:500 .95rem var(--font);color:var(--muted);margin-top:4px}
.group h2 a{color:var(--ink);text-decoration:none}
.lines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.line{display:grid;grid-template-columns:92px 1fr;grid-template-areas:"pic body" "call call";gap:10px 14px;background:var(--surface);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}
.line-pic{grid-area:pic;display:block;width:92px;height:118px;overflow:hidden;border-radius:14px;background:var(--surface2)}
.line-pic img{width:100%;height:100%;object-fit:cover}
.line-body{grid-area:body;min-width:0}
.line-body h3{margin:4px 0 2px}
.line-body h3 a{color:var(--ink);text-decoration:none}
.line-body p{margin:0;font-size:.92rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tagline{display:inline-block;background:var(--surface2);color:var(--accent);font:800 .68rem var(--font);text-transform:uppercase;letter-spacing:.07em;padding:3px 9px;border-radius:999px}
.line-call{grid-area:call;display:flex;flex-direction:column;gap:6px}
.line-call .call{width:100%}
.line-call small{font-size:.76rem;line-height:1.3;color:var(--muted);text-align:center}
.chips{list-style:none;margin:10px -16px;padding:2px 16px 8px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-block;white-space:nowrap;background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 16px;text-decoration:none;font-weight:700;font-size:.95rem;box-shadow:var(--shadow)}
.chip:hover{color:var(--call)}

/* Text blocks */
.prose p{max-width:70ch}
.prose{background:var(--surface);border-radius:var(--r);padding:4px 18px 16px;margin:18px 0;box-shadow:var(--shadow)}
.prose h2{margin-top:1.1em}
.tick{list-style:none;padding:0;margin:.5em 0}
.tick li{padding-left:30px;position:relative;margin:.45em 0}
.tick li:before{content:"\2713";position:absolute;left:0;top:2px;color:#fff;background:var(--call);width:21px;height:21px;border-radius:50%;font-size:.8rem;display:grid;place-items:center;font-weight:800}
.steps{padding-left:22px}
.steps li{margin:.4em 0}
details{background:var(--surface);border-radius:var(--rs);margin:10px 0;box-shadow:var(--shadow)}
.prose details{background:var(--surface2);box-shadow:none}
summary{cursor:pointer;font-weight:700;padding:15px 16px;list-style:none;min-height:50px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";display:inline-block;width:1.3em;color:var(--call);font-weight:900}
details[open] summary:before{content:"\2212"}
details p{margin:0;padding:0 16px 14px 38px;color:var(--muted)}
.page{padding-bottom:12px}
.crumbs{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.crumbs a{color:var(--muted)}
.lead{font-size:1.05rem;max-width:66ch;color:var(--muted)}
.meta{color:var(--muted);font-size:.9rem;margin-top:-4px}
.style-head{display:grid;gap:14px;margin:6px 0}
.trio{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.trio::-webkit-scrollbar{display:none}
.trio img{flex:0 0 38%;max-width:170px;aspect-ratio:3/4;object-fit:cover;border-radius:16px;scroll-snap-align:start;background:var(--surface2)}

/* Line page: swipe gallery then details */
.ticket{display:grid;gap:14px;margin:12px 0 4px}
.ticket-pics{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.ticket-pics::-webkit-scrollbar{display:none}
.ticket-pics img{flex:0 0 82%;max-width:420px;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);scroll-snap-align:center;background:var(--surface2);box-shadow:var(--shadow)}
.ticket-body{background:var(--surface);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.ticket-body h1{margin-top:.3em}
.ticket-body .call{width:100%;margin-top:6px}
.price{font-size:.88rem;color:var(--muted);margin:10px 0 0;text-align:center}
.callbar{position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom));z-index:55;padding:8px 12px;background:var(--surface);border-top:1px solid var(--line)}
.callbar .call{width:100%;max-width:520px;margin:0 auto;display:flex}
.has-callbar{padding-bottom:calc(var(--bar) + 84px + env(safe-area-inset-bottom))}
.cta{margin-bottom:10px}
.article h1{max-width:22ch}
.prose h2[id]{scroll-margin-top:70px}

/* Footer */
.site-footer{margin-top:32px;padding:6px 0 10px}
.site-footer ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.site-footer a{color:var(--link)}
.site-footer .legal{font-size:16px;line-height:1.6;color:var(--muted)}

/* Cookie banner and age gate */
#mps-cookie{position:fixed;left:12px;right:12px;bottom:calc(var(--bar) + 10px + env(safe-area-inset-bottom));z-index:90;max-width:640px;margin:0 auto;background:var(--surface);color:var(--ink);border-radius:var(--r);padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;font-size:15px}
#mps-cookie[hidden]{display:none}
#mps-cookie p{margin:0;flex:1 1 260px}
html.mps-age-need body{overflow:hidden}
#mps-age{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:rgba(10,14,20,.92);align-items:flex-end;justify-content:center;padding:0}
html.mps-age-need #mps-age{display:flex}
.mps-age-card{background:var(--surface);color:var(--ink);border-radius:28px 28px 0 0;max-width:560px;width:100%;padding:26px 22px calc(26px + env(safe-area-inset-bottom));text-align:center}
.mps-age-card .brand{display:block;font-size:1.5rem;font-weight:800;margin-bottom:8px}
.mps-age-card .brand b{color:var(--call)}
.mps-age-card h2{margin:0 0 8px;font-size:1.5rem}
.mps-age-card p{margin:0 0 16px;color:var(--muted)}
.mps-age-btns{display:flex;gap:12px;justify-content:center;margin-bottom:14px}
.mps-age-btns .btn{flex:1;max-width:200px;font-size:18px;padding:15px 20px}
.mps-age-card label{font-size:15px;color:var(--muted);cursor:pointer}

/* Larger screens: top nav replaces tab bar, cards go two-up */
@media (min-width:900px){
 body{padding-bottom:0;font-size:17.5px}
 .tabbar{display:none}
 .nav{display:block}
 .callbar{display:none}
 .has-callbar{padding-bottom:0}
 .brand{font-size:1.35rem}
 .how{max-width:520px}
 .hero .call.big{width:auto}
 .styles{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
 .styles li{flex:1 1 calc(33.33% - 10px);max-width:none}
 .lines{grid-template-columns:1fr 1fr}
 .style-head{grid-template-columns:1fr auto;align-items:center}
 .trio img{flex:0 0 auto;width:130px}
 .ticket{grid-template-columns:1.2fr 1fr;align-items:start}
 .ticket-pics{margin:0;padding:0}
 .ticket-pics img{flex:0 0 46%}
 #mps-cookie{bottom:16px}
 #mps-age{align-items:center;padding:18px}
 .mps-age-card{border-radius:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}