/*
Theme Name: Ocean Bar & Grill Gutenberg
Theme URI: https://cavellaphuquoc.com/
Author: Cavella
Description: Gutenberg-editable landing page theme for Ocean Bar & Grill, based on the supplied HTML design.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ocean-bar-grill-gutenberg
*/

:root{--teal:#123d45;--deep:#102d35;--sand:#faf7f1;--paper:#fffdfa;--ink:#292521;--muted:#716a62;--line:#e9e2d8;--orange:#e55f2e;--gold:#d9a26b;--serif:'Playpen Sans',sans-serif;--sans:'Playpen Sans',sans-serif;--shadow:0 12px 35px #24190e12}
    *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:var(--sand);color:var(--ink);font:14px/1.65 var(--sans)}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{min-height:28px;padding:4px 5.2%;background:var(--deep);color:#f7eee3;text-align:center;font-size:10px;letter-spacing:.1em}.head{height:72px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;gap:26px;background:#fffdfaeb;border-bottom:1px solid #e7ded2;position:sticky;top:0;z-index:15;backdrop-filter:blur(12px)}.logo{width:126px;flex:none}.navlinks{display:flex;gap:24px;align-items:center;font-size:11px;color:#514a43}.navlinks a:hover{color:var(--orange)}.head-right{display:flex;align-items:center;gap:13px}.lang{display:flex;border:1px solid var(--line);border-radius:30px;padding:3px}.lang button{border:0;background:transparent;color:#756d65;font-size:10px;padding:5px 8px;border-radius:24px}.lang button.active{background:var(--teal);color:white}.icon-btn{font-size:14px;color:var(--teal);border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--orange);color:#fff;border-radius:3px;padding:11px 16px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;transition:.2s}.cta:hover{background:#c84d24;transform:translateY(-1px)}.cta.dark{background:var(--deep)}.cta.dark:hover{background:var(--teal)}.cta.ghost{background:#ffffff12;border:1px solid #ffffffa3;color:white}.hero{height:min(690px,calc(100vh - 100px));min-height:550px;position:relative;display:flex;align-items:center;color:white;overflow:hidden;background:#253d40}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;z-index:0}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,24,23,.78),rgba(29,26,24,.47) 47%,rgba(20,23,22,.1)),linear-gradient(0deg,rgba(17,25,25,.42),transparent 60%);z-index:1}.hero-content{position:relative;z-index:2;width:min(1180px,89%);margin:auto;padding:50px 0}.pill{display:inline-block;border:1px solid #ffffff75;background:#161d1c59;border-radius:30px;padding:5px 11px;font-size:9px;letter-spacing:.08em}.eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#bb714a}.hero .eyebrow{color:#f1c08e;margin:21px 0 7px}.hero h1{font:500 clamp(40px,5.4vw,72px)/1.04 var(--serif);max-width:620px;margin:0 0 14px;letter-spacing:-.025em}.hero-copy{font-size:13px;max-width:475px;color:#eee7df;margin:0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.sunset-card{position:absolute;z-index:2;right:6%;top:50%;transform:translateY(-28%);width:255px;background:#fffdfa;color:var(--ink);padding:17px 18px;border-radius:5px;box-shadow:var(--shadow);font-size:10px}.sunset-card b{font-size:15px;font-family:var(--serif);color:var(--teal)}.sunset-card .orange{color:var(--orange);font-weight:700}.hero-stats{display:flex;gap:8px;max-width:600px;margin-top:27px}.hero-stats div{flex:1;border:1px solid #ffffff52;background:#141d1d52;padding:10px 12px;backdrop-filter:blur(4px)}.hero-stats strong{font:500 23px var(--serif);display:block}.hero-stats span{font-size:9px;color:#f5e9dc;line-height:1.2;display:block}.section{padding:78px 0}.wrap{width:min(1160px,89%);margin:auto}.story{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.story h2,.section-title{font:500 clamp(30px,3.4vw,43px)/1.12 var(--serif);color:var(--teal);margin:8px 0 13px}.story p{color:var(--muted);font-size:12px}.story-images{display:grid;grid-template-columns:1fr .72fr;gap:12px;align-items:center}.story-images img{width:100%;height:260px;object-fit:cover;border-radius:4px}.story-images .portrait{height:316px}.story-images .quote-card{background:var(--deep);color:#fff;padding:18px;border-radius:4px;grid-column:1;grid-row:2;font:italic 16px/1.4 var(--serif);margin-top:-3px}.story-images .quote-card small{display:block;font:8px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#efac77;margin-top:14px}.story-images .portrait{grid-column:2;grid-row:1 / span 2}.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.feature{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--paper);padding:12px}.feature img{width:52px;height:42px;object-fit:cover;border-radius:2px}.feature b{font:600 10px var(--serif);color:var(--teal);display:block}.feature span{display:block;font-size:9px;color:var(--muted)}.quote-inline{border-left:2px solid var(--orange);padding-left:14px;color:var(--teal);font:italic 17px var(--serif);margin:19px 0}.booking{background:#f2ede6}.center{text-align:center;max-width:720px;margin:0 auto 30px}.center p{color:var(--muted);font-size:12px;margin:4px auto}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:610px;margin:20px auto 22px}.step{background:#e9e4dc;padding:10px 12px;font-size:10px;color:#665e57;display:flex;align-items:center;gap:9px;border-radius:3px}.step.active{background:var(--deep);color:white}.step strong{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--deep);font-size:10px}.book-grid{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(285px,.78fr);gap:16px;align-items:start}.card{background:var(--paper);border:1px solid #ece4da;border-radius:5px;padding:18px;box-shadow:0 5px 20px #3b281009}.card h3{font:500 19px var(--serif);color:var(--teal);margin:0 0 12px}.fields{display:grid;grid-template-columns:1.1fr 1fr .8fr;gap:10px}.field label{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:#746c65;font-weight:700;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;border:1px solid #e5ddd2;border-radius:3px;background:white;color:var(--ink);padding:9px 10px;font-size:11px;outline-color:var(--teal)}.zonebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 8px;flex-wrap:wrap}.zone-tabs{display:flex;gap:6px;flex-wrap:wrap}.zone-tab{border:1px solid var(--line);border-radius:20px;background:white;padding:7px 10px;font-size:9px;color:#514b44}.zone-tab.active{background:var(--deep);border-color:var(--deep);color:white}.legend{font-size:8px;color:#6a625b;display:flex;gap:9px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}.green{background:#16a16a}.orange-dot{background:var(--orange)}.red{background:#d75050}.amber{background:#d9a327}.floorplan{border:1px solid var(--line);padding:7px;background:#fff;position:relative}.floorplan img{width:100%;border-radius:3px}.floorplan-note{font-size:8px;color:var(--muted);padding-top:6px}.seat-list{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}.seat{min-height:47px;border:1px solid #d7e4da;background:#f3faf5;border-radius:3px;color:#226c50;font-size:10px;font-weight:700;position:relative}.seat small{display:block;font-size:7px;font-weight:500;opacity:.8}.seat.selected{background:var(--orange);border-color:var(--orange);color:white}.seat.booked{color:#ac5555;border-color:#efdada;background:#fbf3f1;cursor:not-allowed}.seat.held{color:#89621a;background:#fff8e8;border-color:#e9d8aa;cursor:not-allowed}.zone-group{margin-top:13px;padding:10px;border:1px solid var(--line);background:#fffdf9;border-radius:4px;scroll-margin-top:94px}.zone-group h4{font:600 10px var(--sans);color:var(--teal);margin:0 0 6px}.summary{position:sticky;top:90px}.selected-label{font:500 27px var(--serif);color:var(--orange);margin:0 0 2px}.summary-line{font-size:10px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px 0;display:flex;justify-content:space-between;gap:8px}.summary-line strong{color:var(--ink);text-align:right}.summary .field{margin-top:10px}.deposit{padding:12px;background:#f7f1e9;margin:14px 0;border-left:2px solid var(--orange);font-size:9px;color:var(--muted)}.deposit strong{font:600 13px var(--serif);color:var(--teal)}.full{width:100%}.fine{font-size:8px;color:var(--muted);margin:8px 0 0}.menu-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:22px}.menu-head .lead{max-width:360px;color:var(--muted);font-size:11px}.preorder{background:#fff9f1;border:1px solid #f2dfca;padding:12px 14px;border-radius:4px;font-size:9px;color:#79532e;max-width:270px}.preorder strong{display:block;color:var(--orange);font-size:10px;margin-bottom:3px}.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.dish{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 4px 14px #3b28100a}.dish img{width:100%;height:175px;object-fit:cover}.dish-body{padding:13px 14px 15px}.dish-tag{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);font-weight:700}.dish h3{font:600 16px/1.2 var(--serif);color:var(--teal);margin:5px 0}.dish .en-name{font-size:9px;color:#8c6e57;font-style:italic;margin:0 0 7px}.dish p{font-size:9px;line-height:1.5;color:var(--muted);margin:0}.diet-note{margin-top:15px;padding:10px 13px;background:#f4f0ea;border:1px solid var(--line);font-size:9px;color:#6f665e}.ambiance{padding:70px 0}.gallery{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-template-rows:145px 145px;gap:12px}.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:4px}.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.gallery figure:hover img{transform:scale(1.04)}.gallery figure:first-child{grid-row:span 2}.gallery figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#111b);padding:20px 12px 9px;color:white;font-size:9px}.location{background:#f2ede6}.loc-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:center}.loc-grid p{font-size:11px;color:var(--muted)}.loc-facts{display:grid;gap:8px;margin:15px 0}.loc-facts div{font-size:10px;color:#625b54}.loc-facts b{color:var(--teal)}.map-card{min-height:285px;border-radius:5px;overflow:hidden;position:relative;background:linear-gradient(130deg,#d5e3d1,#c6dcd2 42%,#dce6d8);display:grid;place-items:center;text-align:center}.map-card:before,.map-card:after{content:"";position:absolute;height:1px;background:#a9c5b5;opacity:.8;width:130%;transform:rotate(-20deg);top:35%}.map-card:after{transform:rotate(27deg);top:65%}.map-marker{position:relative;z-index:1;background:white;border-radius:4px;padding:12px 17px;box-shadow:var(--shadow);font-size:9px;transition:.2s}.map-card:hover .map-marker{transform:translateY(-2px)}.map-open{display:inline-block;margin-top:9px;padding:7px 10px;border-radius:3px;background:var(--deep);color:white;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.map-marker strong{display:block;font:500 18px var(--serif);color:var(--teal)}.footer{background:var(--deep);color:#efe8df;padding:43px 5.5% 20px}.footgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:30px}.footer h3{font:500 20px var(--serif);margin:0 0 10px;color:white}.footer p,.footer a{font-size:9px;color:#d0c6bc;margin:5px 0}.footlogo{width:140px;background:var(--sand);padding:5px;border-radius:2px;margin-bottom:12px}.copyright{border-top:1px solid #ffffff25;margin-top:25px;padding-top:13px;display:flex;justify-content:space-between;font-size:8px;color:#b7aca2}.concierge{position:fixed;right:18px;bottom:18px;z-index:20;width:255px;background:#fffdfa;border-radius:7px;box-shadow:0 9px 35px #1115;border:1px solid var(--line);overflow:hidden;font-size:9px}.concierge-head{background:var(--deep);color:white;padding:9px 11px;display:flex;align-items:center;gap:8px}.ob{width:22px;height:22px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:8px;font-weight:700}.concierge-body{padding:10px 11px;color:#5a524b}.concierge-body p{margin:3px 0 9px}.chat-action{font-size:8px;color:var(--orange);font-weight:700}.mobile-book{display:none}.toast{position:fixed;left:50%;bottom:24px;z-index:30;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:.25s;background:var(--deep);color:white;padding:11px 16px;border-radius:4px;box-shadow:var(--shadow);font-size:11px}.toast.show{opacity:1;transform:translate(-50%,0)}
    body,button,input,select,textarea{font-family:'Playpen Sans',sans-serif}
    .hero h1,.story h2,.section-title,.card h3,.selected-label,.dish h3,.map-marker strong,.footer h3,.sunset-card b,.feature b{font-family:'Playpen Sans',sans-serif;font-weight:700}
    .map-frame{min-height:285px;border-radius:5px;overflow:hidden;box-shadow:var(--shadow);background:#e9eee8}.map-frame iframe{display:block;width:100%;height:100%;min-height:285px;border:0}
    @media(max-width:900px){.navlinks{gap:13px}.sunset-card{right:4%;width:220px}.hero-content{margin-left:6%}.book-grid{grid-template-columns:1fr}.summary{position:static}.summary .fields{grid-template-columns:1fr 1fr}.footgrid{grid-template-columns:1fr 1fr}.dishes{gap:10px}.dish img{height:145px}}
    @media(max-width:640px){html{scroll-padding-top:70px}.topbar{font-size:8px}.head{height:62px;padding:0 4%;gap:8px}.logo{width:100px}.navlinks{display:none}.head-right{gap:7px}.head-right .cta{display:none}.hero{height:auto;min-height:680px;align-items:flex-start}.hero>img{object-position:57% center}.hero:after{background:linear-gradient(90deg,rgba(17,24,24,.66),rgba(17,24,24,.2)),linear-gradient(0deg,rgba(14,22,24,.6),transparent 74%)}.hero-content{width:90%;margin:0 auto;padding:68px 0 45px}.hero h1{font-size:47px;max-width:530px}.hero-copy{max-width:400px;font-size:12px}.sunset-card{top:auto;right:5%;bottom:24px;transform:none;width:205px;padding:12px}.sunset-card b{font-size:13px}.hero-stats{margin-top:23px}.hero-stats div{padding:8px}.hero-stats strong{font-size:19px}.hero-stats span{font-size:7px}.section{padding:55px 0}.wrap{width:91%}.story{grid-template-columns:1fr;gap:22px}.story-images{order:2;grid-template-columns:1fr .68fr}.story-images img{height:190px}.story-images .portrait{height:230px}.story-images .quote-card{padding:13px;font-size:14px}.feature-row{margin-top:16px}.center{margin-bottom:20px}.steps{gap:5px}.step{padding:8px 5px;font-size:8px;gap:4px}.step strong{width:19px;height:19px;flex:none}.book-grid{gap:11px}.card{padding:13px}.fields{grid-template-columns:1fr 1fr}.fields .field:first-child{grid-column:span 2}.zonebar{align-items:flex-start}.legend{width:100%}.seat-list{grid-template-columns:repeat(5,1fr);gap:4px}.seat{min-height:42px;font-size:9px}.seat small{font-size:6px}.summary .fields{grid-template-columns:1fr}.menu-head{display:block}.menu-head .lead{margin-top:0}.preorder{margin-top:12px}.dishes{grid-template-columns:1fr 1fr}.dish img{height:125px}.dish-body{padding:10px}.dish h3{font-size:14px}.dish p{font-size:8px}.gallery{grid-template-columns:1fr 1fr;grid-template-rows:180px 120px}.gallery figure:first-child{grid-row:span 2}.loc-grid{grid-template-columns:1fr}.map-card{min-height:220px}.footgrid{grid-template-columns:1fr 1fr;gap:18px}.footgrid>div:first-child{grid-column:span 2}.copyright{display:block;line-height:2}.concierge{display:none}.mobile-book{display:block;position:fixed;bottom:0;left:0;right:0;padding:9px 14px;background:#fffdfaee;box-shadow:0 -4px 15px #0002;z-index:16}.mobile-book .cta{width:100%}body{padding-bottom:58px}}

/* Gutenberg theme refinements */
:root { --wp--preset--color--contrast: #102d35; --wp--preset--color--base: #faf7f1; }
body { background: var(--sand, #faf7f1); }
.site-content, #site-content { min-height: 40vh; }
.head { min-height:72px; height:auto; }
.logo img { width:126px; height:auto; }
.navlinks { flex-wrap:wrap; }
.obg-hero { color:#fff; padding:0; }
.obg-hero .wp-block-cover__background { background-color:#102d35 !important; }
.obg-hero .wp-block-cover__image-background { object-position:center 54%; }
.obg-hero-inner { width:min(1180px,89%); margin:0 auto; padding:50px 0; }
.obg-hero-title { color:#fff; font:500 clamp(40px,5.4vw,72px)/1.04 var(--serif, sans-serif); max-width:700px; margin:18px 0 14px; letter-spacing:-.025em; }
.obg-hero-copy { max-width:475px; color:#eee7df; }
.obg-section { padding-top:78px; padding-bottom:78px; }
.obg-section .wrap { width:min(1160px,89%); margin-left:auto; margin-right:auto; }
.obg-story { align-items:center; gap:42px; }
.obg-story .wp-block-image img, .obg-location-image img { width:100%; height:360px; object-fit:cover; border-radius:4px; }
.obg-booking-card { max-width:760px; margin:0 auto; padding:28px; }
.obg-booking-card h3 { color:var(--teal,#123d45); }
.obg-dishes { gap:14px; margin-top:14px; }
.obg-dishes .wp-block-column { background:var(--paper,#fffdfa); border:1px solid var(--line,#e9e2d8); border-radius:4px; overflow:hidden; padding-bottom:14px; }
.obg-dishes .wp-block-image { margin:0; }
.obg-dishes .wp-block-image img { width:100%; height:175px; object-fit:cover; }
.obg-dishes h3, .obg-dishes p { margin-left:14px; margin-right:14px; }
.obg-dishes h3 { color:var(--teal,#123d45); font-size:16px; line-height:1.25; margin-top:13px; }
.obg-dishes p { color:var(--muted,#716a62); font-size:12px; }
.obg-gallery { display:grid !important; grid-template-columns:1.35fr .8fr .8fr; grid-template-rows:190px 190px; gap:12px !important; }
.obg-gallery .wp-block-image { margin:0 !important; height:100%; }
.obg-gallery .wp-block-image:first-child { grid-row:span 2; }
.obg-gallery img { width:100%; height:100% !important; object-fit:cover; border-radius:4px; }
.obg-post-grid .wp-block-post-template { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.obg-post-grid .wp-block-post { background:#fffdfa; border:1px solid #e9e2d8; padding:14px; border-radius:4px; }
.obg-post-grid .wp-block-post-featured-image img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.obg-post-grid .wp-block-post-title { color:#123d45; }
.footer .footgrid { width:min(1160px,89%); margin:auto; }
.foot-logo { width:126px; height:auto; margin-bottom:12px; }
.copyright { text-align:center; border-top:1px solid #ffffff2b; padding:15px 5%; font-size:10px; }
.obg-post-card { margin-bottom:34px; }
.obg-post-card img { width:100%; height:auto; border-radius:4px; }
.obg-single { max-width:820px; }
.obg-featured-image img { width:100%; height:auto; border-radius:4px; }
.obg-entry-content { font-size:16px; line-height:1.8; }
@media (max-width:760px) {
  .head { padding:10px 5%; gap:10px; flex-wrap:wrap; }
  .navlinks { width:100%; justify-content:center; gap:12px; }
  .head-right { margin-left:auto; }
  .obg-hero { min-height:560px !important; }
  .obg-hero-title { font-size:42px; }
  .obg-section { padding-top:48px; padding-bottom:48px; }
  .obg-story, .obg-dishes, .loc-grid { display:block; }
  .obg-dishes .wp-block-column { margin-bottom:14px; }
  .obg-gallery { grid-template-columns:1fr 1fr; grid-template-rows:180px 180px; }
  .obg-gallery .wp-block-image:first-child { grid-row:auto; }
  .obg-post-grid .wp-block-post-template { grid-template-columns:1fr; }
}