/*
Theme Name: Ruang JAKA
Theme URI: https://ruangjaka.com
Author: Ruang JAKA Coffee & Free Wifi
Author URI: https://ruangjaka.com
Description: Custom theme built for Ruang JAKA Coffee & Free Wifi — a cafe, restaurant, and coworking space in Kraton, Yogyakarta. Built around real local-SEO signals: structured data for Restaurant/LocalBusiness, fast lean markup, semantic HTML5, interconnected social profiles, and a menu system editable from wp-admin.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ruangjaka
Tags: cafe, restaurant, coworking, custom-menu, translation-ready, custom-colors
*/

/* ===========================================================
   0. DESIGN TOKENS
   Palette grounded in the actual place: warm plastered walls,
   dark-roasted coffee, wood tables with green plants (mentioned
   repeatedly in customer reviews), and the brick-red of the
   Kraton walls just down the street.
   =========================================================== */
:root{
  --bg:            #EDE0C8; /* warm plaster wall */
  --bg-card:       #F7F2E7; /* soft cream, menu card / paper */
  --ink:           #2E2118; /* dark roast coffee bean, primary text */
  --ink-soft:      #5B4636; /* softer brown, secondary text */
  --brick:         #8B3A2E; /* Kraton brick red, CTA accent */
  --brick-dark:    #6E2C22;
  --sage:          #5C7A5E; /* plant green, secondary accent + links */
  --sage-dark:     #45603F;
  --indigo:        #2B3A55; /* batik indigo, footer / badges */
  --line:          rgba(46,33,24,.16);
  --line-strong:   rgba(46,33,24,.30);
  --shadow-soft:   0 1px 2px rgba(46,33,24,.06);
  --radius-sm:     3px;
  --radius-md:     6px;
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:     'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --container:     1180px;
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
}

/* ===========================================================
   1. RESET & BASE
   =========================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--sage-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--brick); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--brick);
  outline-offset: 2px;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1{ font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.5rem); }
p{ margin: 0 0 1.1em; max-width: 68ch; }
ul, ol{ padding-left: 1.2em; }
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--ink); color:#fff; padding:.75em 1.25em; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ===========================================================
   2. SITE HEADER
   =========================================================== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .9rem;
}
.site-brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.site-brand img{ height: 40px; width: auto; }
.site-brand-text{ font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height:1.1; }
.site-brand-text span{ display:block; font-family: var(--font-body); font-weight:400; font-size:.7rem; letter-spacing:.02em; color: var(--ink-soft); }

.status-strip{
  display:flex; align-items:center; gap:1.1rem; font-size:.82rem; color:var(--ink-soft);
}
.status-open{ display:inline-flex; align-items:center; gap:.4em; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); display:inline-block; }
.status-dot.closed{ background: var(--brick); }

.primary-nav ul{ list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; }
.primary-nav a{ color: var(--ink); text-decoration:none; font-weight:500; font-size:.95rem; }
.primary-nav a:hover{ color: var(--brick); }

.header-actions{ display:flex; align-items:center; gap:.6rem; }
.btn{
  display:inline-flex; align-items:center; gap:.4em; padding:.6em 1.15em;
  border-radius: var(--radius-sm); font-weight:600; font-size:.9rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer; line-height:1.2;
}
.btn-primary{ background: var(--brick); color:#fff; }
.btn-primary:hover{ background: var(--brick-dark); color:#fff; }
.btn-outline{ border-color: var(--line-strong); color: var(--ink); background:transparent; }
.btn-outline:hover{ border-color: var(--ink); color:var(--ink); }

.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:.5em .7em; }
@media (max-width: 860px){
  .primary-nav{ display:none; }
  .status-strip{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .primary-nav.is-open{
    display:block; position:absolute; top:100%; left:0; right:0; background:var(--bg-card);
    border-bottom:1px solid var(--line); padding:1rem var(--gutter) 1.5rem;
  }
  .primary-nav.is-open ul{ flex-direction:column; gap:.9rem; }
}

/* ===========================================================
   3. HERO
   =========================================================== */
.hero{ padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero-grid{ display:grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-rating{
  display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; color:var(--ink-soft);
  background:var(--bg-card); border:1px solid var(--line); padding:.4em .8em; border-radius:999px; margin-bottom:1.1em;
  text-decoration:none;
}
.hero-rating strong{ color:var(--ink); }
.hero p.lede{ font-size:1.08rem; color:var(--ink-soft); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.4rem; }
.hero-media{ position:relative; }
.hero-media img{ border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.hero-media figcaption{ font-size:.78rem; color:var(--ink-soft); margin-top:.5em; }

/* facilities strip */
.facilities-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block: 1rem;
}
.facilities-strip ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap: 0 clamp(1rem,3vw,2.5rem); font-size:.9rem; color:var(--ink-soft);
}
.facilities-strip li{ display:flex; align-items:center; gap:.5em; padding-block:.35em; }
.facilities-strip .ico{ width:1.1em; height:1.1em; flex:none; color:var(--sage-dark); }

/* ===========================================================
   4. GENERIC SECTION LAYOUT
   =========================================================== */
.section{ padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-alt{ background: var(--bg-card); }
.section-head{ max-width: 60ch; margin-bottom: 2.2rem; }
.section-head p{ color: var(--ink-soft); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.5rem); align-items:center; }
@media (max-width: 860px){ .two-col{ grid-template-columns:1fr; } }
.two-col.reverse .col-media{ order:2; }

/* ===========================================================
   5. MENU (printed-menu style, not cards)
   =========================================================== */
.menu-highlights-list{ list-style:none; margin:0; padding:0; }
.menu-highlights-list li{
  display:flex; align-items:baseline; gap:.5em; padding:.85em 0; border-bottom:1px dashed var(--line-strong);
}
.menu-item-name{ font-family: var(--font-display); font-size:1.05rem; color:var(--ink); white-space:nowrap; }
.menu-item-leader{ flex:1; border-bottom:1px dotted var(--line-strong); transform: translateY(-.3em); }
.menu-item-price{ font-weight:700; white-space:nowrap; color: var(--brick); }
.menu-item-tag{
  font-size:.68rem; text-transform:none; background:var(--sage); color:#fff; padding:.15em .55em;
  border-radius:999px; margin-left:.4em; vertical-align:middle;
}
.menu-item-desc{ display:block; width:100%; font-size:.86rem; color:var(--ink-soft); margin-top:.2em; }

.menu-category{ margin-bottom: 2.5rem; }
.menu-category h3{ border-bottom:2px solid var(--ink); display:inline-block; padding-bottom:.15em; }

/* ===========================================================
   6. FACILITIES / WFC BLOCK
   =========================================================== */
.facility-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.75rem; }
.facility{ padding-top:.25rem; border-top:2px solid var(--line-strong); }
.facility h3{ font-size:1.05rem; margin-bottom:.35em; }
.facility p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:0; }

.steps-list{ counter-reset: step; list-style:none; padding:0; margin:0; display:grid; gap:1.5rem; }
.steps-list li{ display:flex; gap:1rem; }
.steps-list li::before{
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-size:1.1rem; color:#fff; background:var(--brick);
  width:2.1em; height:2.1em; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
}

/* ===========================================================
   7. TESTIMONIALS — "sticky note" board (real detail from
   the mushola wall where customers pin notes)
   =========================================================== */
.testimonial-board{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.5rem; }
.sticky-note{
  background: var(--bg-card); border:1px solid var(--line); border-top:4px solid var(--sage);
  padding:1.25rem 1.35rem; border-radius: 2px; box-shadow: var(--shadow-soft);
  transform: rotate(var(--tilt, 0deg));
}
.sticky-note:nth-child(2n){ --tilt: -0.6deg; border-top-color: var(--brick); }
.sticky-note:nth-child(3n){ --tilt: 0.5deg; border-top-color: var(--indigo); }
.sticky-note p{ font-size:.95rem; margin-bottom:.75em; }
.sticky-note cite{ font-style:normal; font-size:.82rem; color:var(--ink-soft); }

/* ===========================================================
   8. LOCATION
   =========================================================== */
.location-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:2.5rem; align-items:start; }
@media (max-width: 900px){ .location-grid{ grid-template-columns:1fr; } }
.hours-table{ width:100%; border-collapse:collapse; font-size:.92rem; margin-top:1rem; }
.hours-table td{ padding:.4em 0; border-bottom:1px solid var(--line); }
.hours-table td:last-child{ text-align:right; color: var(--ink-soft); }
.hours-table tr.today td{ font-weight:700; color:var(--ink); }
.map-embed{ border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
.map-embed iframe{ width:100%; height:380px; border:0; display:block; }

/* ===========================================================
   9. SOCIAL / FOLLOW STRIP
   =========================================================== */
.social-follow{ text-align:center; }
.social-icons{ display:flex; justify-content:center; flex-wrap:wrap; gap:.9rem; margin-top:1.4rem; }
.social-icons a{
  display:inline-flex; align-items:center; gap:.5em; padding:.55em 1em; border:1px solid var(--line-strong);
  border-radius:999px; color:var(--ink); text-decoration:none; font-size:.88rem; font-weight:600;
}
.social-icons a:hover{ border-color:var(--brick); color:var(--brick); }
.social-icons svg{ width:1.1em; height:1.1em; }

/* footer variant of the social icons (light on dark) */
.site-footer .social-icons a{ border-color: rgba(255,255,255,.25); color:#fff; }
.site-footer .social-icons a:hover{ border-color:#fff; color:#fff; opacity:.85; }

/* ===========================================================
   10. FOOTER
   =========================================================== */
.site-footer{ background: var(--indigo); color:#EFE9DA; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.site-footer a{ color:#EFE9DA; }
.site-footer a:hover{ color:#fff; text-decoration-color: var(--brick); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.15); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h4{ font-family:var(--font-body); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:#C9BFA0; margin-bottom:1em; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6em; font-size:.92rem; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.5rem; font-size:.82rem; color:#B7AE93; }

/* ===========================================================
   11. UTILITIES / MISC PAGE TYPES
   =========================================================== */
.badge{ display:inline-block; font-size:.72rem; font-weight:700; background:var(--sage); color:#fff; padding:.25em .7em; border-radius:999px; }
.entry-content{ max-width: 72ch; }
.entry-content img{ border-radius: var(--radius-md); margin-block: 1.5rem; }
blockquote{ border-left:3px solid var(--brick); margin:1.5em 0; padding-left:1.2em; color:var(--ink-soft); font-style:italic; }