/*
Theme Name: Petit Café
Description: Custom theme for petitcafelondon.com (replaces Despero + WPBakery). Business details live in functions.php (pc_info).
Version: 1.6
Author: Salam Daher
*/
:root { --gold:#d5c3a0; --ink:#2f2d2a; --cream:#faf8f2; --green:#4f6b45; --dark:#2b2a27; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.65 "Open Sans",sans-serif; color:var(--ink); background:#fff; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1,h2,h3 { font-family:"Josefin Sans",sans-serif; margin:0; line-height:1.15; }
.script { font-family:"Gloria Hallelujah",cursive; color:var(--gold); font-size:20px; margin:0 0 6px; }
.wrap { max-width:1140px; margin:0 auto; padding:0 16px; }
.center { text-align:center; }
section { padding:72px 0; }
section.alt { background:var(--cream); }
.sec-title { font-size:38px; margin-bottom:30px; }

/* header */
header.site { background:#fff; position:sticky; top:0; z-index:5; box-shadow:0 1px 0 #eee; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:80px; }
header.site .logo img { height:58px; }
nav { display:flex; gap:28px; align-items:center; font:600 14px "Josefin Sans"; letter-spacing:1px; text-transform:uppercase; }
nav a { text-decoration:none; color:#333; }
nav a.on { color:var(--green); border-bottom:2px solid var(--gold); }
nav a.cta { background:var(--green); color:#fff; padding:10px 18px; border-radius:24px; border:0; }
.burger { display:none; background:none; border:0; width:44px; height:44px; padding:10px; cursor:pointer; }
.burger span { display:block; height:3px; background:#222; margin:5px 0; border-radius:2px; }

/* buttons */
.btn { display:inline-block; padding:13px 26px; border-radius:30px; font:600 14px "Josefin Sans"; letter-spacing:1px;
       text-transform:uppercase; text-decoration:none; margin:4px; border:2px solid var(--gold); cursor:pointer; }
.btn.solid { background:var(--gold); color:#222; }
.btn.line { color:#fff; background:transparent; }
.btn.green { background:var(--green); border-color:var(--green); color:#fff; }
.btn.dark { color:#222; background:#fff; }

/* hero */
.hero { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
        background:center/cover no-repeat; padding:0; }
.hero.small { min-height:340px; }
.hero:before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)); }
.hero > div { position:relative; padding:0 16px; }
.hero h1 { font-size:64px; font-weight:600; }
.hero.small h1 { font-size:50px; }
.hero .sub { letter-spacing:4px; font-size:13px; margin:12px 0 28px; text-transform:uppercase; }

/* split blocks */
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split .ph { border-radius:8px; overflow:hidden; aspect-ratio:4/3; }
.split .ph img { width:100%; height:100%; object-fit:cover; }
.split h2 { font-size:36px; margin-bottom:16px; }

/* cards */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card .ph { aspect-ratio:4/3; overflow:hidden; border-radius:8px; }
.card .ph img { width:100%; height:100%; object-fit:cover; }
.card h3 { font-size:19px; margin:14px 0 4px; }
.card p { margin:0; font-size:14px; color:#777; }

/* info strip */
.info { background:var(--dark); color:#ddd; padding:56px 0; }
.info .cols { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.info h3 { color:#fff; font-size:20px; margin-bottom:12px; }
.info table { border-collapse:collapse; } .info td { padding:3px 18px 3px 0; }
.info a { color:var(--gold); text-decoration:none; }

/* menu */
.tabs { display:inline-flex; background:#fff; border:1px solid #e6dcc6; border-radius:30px; padding:4px; margin-bottom:28px; }
.tabs button { border:0; background:none; padding:11px 28px; border-radius:26px; font:600 15px "Josefin Sans"; cursor:pointer; color:#555; }
.tabs button.on { background:var(--green); color:#fff; }
.pages { max-width:760px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.pages a { display:block; box-shadow:0 6px 24px rgba(0,0,0,.12); border-radius:6px; overflow:hidden; }
.pages img { width:100%; height:auto; }
.hint { font-size:13px; color:#888; margin:16px 0 18px; }
.menu-teaser { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:620px; margin:0 auto; }
.menu-teaser a { text-decoration:none; } .menu-teaser img { border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.12); }
.menu-teaser h3 { margin-top:12px; font-size:18px; }
[hidden] { display:none !important; }

/* gallery */
.filters { margin-bottom:26px; }
.masonry { columns:3; column-gap:16px; }
.masonry img { width:100%; margin:0 0 16px; border-radius:6px; break-inside:avoid; }

/* forms */
.map { width:100%; height:380px; border:0; display:block; filter:grayscale(.3); }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:46px; }
.contact-cards div { background:var(--cream); border-radius:8px; padding:26px; text-align:center; }
.contact-cards h3 { font-size:18px; margin-bottom:6px; }

footer.site { background:#1f1e1c; color:#999; text-align:center; padding:26px 16px; font-size:13px; }

/* phone */
@media (max-width:760px) {
  section { padding:46px 0; }
  .sec-title { font-size:30px; margin-bottom:22px; }
  header.site .wrap { height:66px; } header.site .logo img { height:46px; }
  .burger { display:block; }
  nav { display:none; position:absolute; top:66px; left:0; right:0; background:#fff; flex-direction:column; gap:0; box-shadow:0 8px 20px rgba(0,0,0,.1); }
  nav.open { display:flex; }
  nav a { padding:15px 20px; width:100%; border-bottom:1px solid #f1f1f1; }
  nav a.on { border-bottom:1px solid #f1f1f1; }
  nav a.cta { border-radius:0; text-align:center; }
  .hero { min-height:460px; } .hero.small { min-height:260px; }
  .hero h1 { font-size:40px; } .hero.small h1 { font-size:34px; }
  .hero .sub { letter-spacing:2px; font-size:11px; }
  .btn { padding:12px 20px; font-size:13px; }
  .split { grid-template-columns:1fr; gap:22px; } .split h2 { font-size:28px; }
  .grid3 { grid-template-columns:1fr 1fr; gap:14px; }
  .card h3 { font-size:15px; margin-top:8px; } .card p { font-size:12px; }
  .info .cols { grid-template-columns:1fr; }
  .masonry { columns:2; column-gap:10px; } .masonry img { margin-bottom:10px; }
  .contact-cards { grid-template-columns:1fr; gap:12px; }
  .map { height:280px; }
  .menu-teaser { gap:14px; }
}

/* theme additions */
header.site .logo img { width:auto; }
.page-head { background:var(--cream); padding:56px 0 40px; text-align:center; }
.page-head h1 { font-size:40px; }
.content { max-width:900px; }
.content img { height:auto; }
.lead { max-width:620px; margin:0 auto 30px; }
.masonry a { display:block; break-inside:avoid; }
.masonry img { height:auto; }
.split .ph img, .card .ph img { height:100%; }
.menu-teaser img { width:100%; height:auto; }

/* Contact Form 7 (reuses the existing forms) */
.form { max-width:760px; margin:0 auto; text-align:left; }
.form .clearfix { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
.form .clearfix > p { display:contents; }
.form .clearfix:before, .form .clearfix:after { content:none; display:none; }
.form .clearfix br { display:none; }
.form .wpcf7-form-control-wrap { display:block; }
.form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .form select, .form textarea {
  width:100%; padding:13px 14px; border:1px solid #ddd; border-radius:6px; font:15px "Open Sans",sans-serif; background:#fff; color:var(--ink); }
.form textarea { height:140px; margin-bottom:14px; }
.form p { margin:0 0 14px; }
.form .text-center, .form p:last-of-type { text-align:center; }
.form input[type=submit] { background:var(--green); color:#fff; border:0; border-radius:30px; padding:14px 34px;
  font:600 14px "Josefin Sans"; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.form .wpcf7-not-valid-tip { font-size:13px; }
.form .wpcf7-response-output { border-radius:6px; margin:14px 0 0 !important; }
@media (max-width:760px) {
  .form .clearfix { grid-template-columns:1fr; }
  .page-head h1 { font-size:30px; }
}

/* coffee section */
.coffee { background:var(--dark); color:#ddd; }
.coffee h2 { color:#fff; }
.coffee .ph { aspect-ratio:16/10; width:100%; }
.drinks { list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; }
.drinks li { padding:8px 0; border-bottom:1px dashed rgba(213,195,160,.35); font:600 15px "Josefin Sans",sans-serif; letter-spacing:.5px; }
.drinks li:before { content:"☕"; margin-right:8px; font-size:13px; }
@media (max-width:760px) { .coffee .ph { aspect-ratio:16/10; } .drinks { gap:2px 16px; } .drinks li { font-size:14px; } }

/* Cloudflare Turnstile box (Contact Form 7) centred above the fields */
.form .wpcf7-turnstile { display:flex; justify-content:center; margin:0 0 16px; }