/*
Theme Name: ROBOTICS Lebak Bulus
Theme URI: https://www.robotics.co.id
Author: ROBOTICS education centre Lebak Bulus
Description: One-page theme for the ROBOTICS® education centre Lebak Bulus branch. LEGO® Education-based robotics classes for ages 4–18. Branch details (address, WhatsApp, schedule, fees) and brand colours are editable in Appearance › Customize › Branch Details.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rec-lebak-bulus
Tags: one-column, custom-logo, custom-colors, education
*/

:root{--rec-orange:#F15B27;--rec-yellow:#F5EB28;--rec-ink:#1A1A1A;--rec-cream:#FFFBEA}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--rec-cream);color:var(--rec-ink);font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:#C94117}a:hover{color:#9E3210}
a:focus-visible,summary:focus-visible{outline:3px solid var(--rec-ink);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:'Baloo 2','Nunito',system-ui,sans-serif}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--rec-ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip-link:focus{left:8px;color:#fff}
.admin-bar header{top:32px !important}
@media (max-width:782px){.admin-bar header{top:46px !important}}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.navlinks a{color:var(--rec-ink);text-decoration:none;font-weight:700;font-size:15px}
.navlinks a:hover{color:#C94117}
@media (max-width:900px){.navlinks{display:none !important}}
@media (max-width:820px){.hero-art{display:none !important}}
@media (max-width:600px){
  main section > div,main > section{padding-top:56px !important;padding-bottom:56px !important}
  #top{padding-top:40px !important}
  header img{height:40px !important}
}

/* Blog / page fallback */
.rec-content{max-width:780px;margin:0 auto;padding:64px 24px}
.rec-content h1{font-size:clamp(32px,4vw,48px);line-height:1.1;margin:0 0 16px}
.rec-content article{margin-bottom:56px}
.rec-content .meta{color:#5A5546;font-size:14px}

/* ---------- Hero video ---------- */
.hero-video{flex:1 1 420px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-video__frame{position:relative;width:100%;max-width:520px;aspect-ratio:4/5;border-radius:40px;border:6px solid var(--rec-yellow);background:var(--rec-orange);overflow:hidden}
.hero-video__frame.is-youtube{aspect-ratio:16/9;border-radius:28px}
.hero-video__media,.hero-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.hero-video__sticker{position:absolute;left:18px;bottom:18px;background:var(--rec-orange);color:#FFF3C4;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;line-height:.95;padding:10px 14px;border-radius:16px;border:3px solid var(--rec-yellow);pointer-events:none}
.hero-video__toggle{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(26,26,26,.75);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hero-video__toggle .icon-play{display:none}
.hero-video__toggle.is-paused .icon-play{display:block}
.hero-video__toggle.is-paused .icon-pause{display:none}
.hero-video__toggle:focus-visible{outline:3px solid var(--rec-yellow);outline-offset:2px}
.hero-video__caption{margin:0;font-size:14px;color:#5A5546;font-weight:600}
@media (max-width:820px){.hero-video__frame{aspect-ratio:16/10;border-radius:28px}.hero-video__frame.is-youtube{aspect-ratio:16/9}.hero-video__sticker{font-size:18px}}

/* ---------- Book a Trial Class form ---------- */
.rec-trial-form{background:#FFFBEA;border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:16px;margin-top:8px;scroll-margin-top:96px}
.rec-form-intro{margin:0;color:#3D3A30;font-size:16px}
.rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.rec-grid{grid-template-columns:1fr}.rec-trial-form{padding:22px}}
.rec-field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
.rec-field input,.rec-field select,.rec-field textarea{font:inherit;font-weight:400;font-size:16px;color:var(--rec-ink);background:#fff;border:2px solid #E3D7A6;border-radius:14px;padding:11px 14px;min-height:48px;width:100%}
.rec-field textarea{resize:vertical;min-height:84px}
.rec-field input:focus,.rec-field select:focus,.rec-field textarea:focus{outline:none;border-color:var(--rec-ink);box-shadow:0 0 0 3px var(--rec-yellow)}
.rec-choices{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rec-choices legend{font-weight:700;font-size:15px;margin-bottom:6px;padding:0;width:100%}
.rec-choices label{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid #E3D7A6;border-radius:999px;padding:10px 16px;min-height:44px;font-weight:600;font-size:15px;cursor:pointer}
.rec-choices label:has(input:checked){background:var(--rec-yellow);border-color:var(--rec-ink)}
.rec-choices input{accent-color:#1A1A1A;margin:0}
.rec-submit{align-self:flex-start;font:inherit;font-weight:800;font-size:17px;background:#1A1A1A;color:var(--rec-yellow);border:0;border-radius:999px;padding:15px 30px;min-height:48px;cursor:pointer}
.rec-submit:hover{background:#000}
.rec-submit:focus-visible{outline:3px solid #1A1A1A;outline-offset:3px}
.rec-form-error{margin:0;background:#FDE2D8;color:#8A2A0C;border-radius:12px;padding:10px 14px;font-weight:700;font-size:15px}
.rec-form-note{margin:0;font-size:14px;color:#5A5546}