/*
Theme Name: Hi Surf Beachfront
Theme URI: https://example.com/
Author: Sandi
Description: Beach-themed holiday rental theme for the Hi Surf beachfront apartment, Surfers Paradise. Home page, Photo Gallery page, booking plugin areas, light and dark colours.
Version: 1.8.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hi-surf
*/

:root{--sand:#f6eddc;--sand-2:#eadfc8;--ink:#12323f;--ink-2:#41616e;--sea:#0b5c7d;--sea-deep:#083f57;--foam:#8fd3c8;--sun:#f5b942;--coral:#c8482a;--line:#d9ccb0;--on-sea:#ffffff;--card:#fffaf0;
--display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;--body:"DM Sans",system-ui,-apple-system,sans-serif;--r:24px;--r-sm:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sand:#0f2530;--sand-2:#15333f;--ink:#f2ead9;--ink-2:#b7c8cc;--sea:#5cc0dc;--sea-deep:#0a1c25;--foam:#3f9c94;--sun:#f5b942;--coral:#ef7b5c;--line:#2a4855;--on-sea:#0a1c25;--card:#143240}}
:root[data-theme="dark"]{--sand:#0f2530;--sand-2:#15333f;--ink:#f2ead9;--ink-2:#b7c8cc;--sea:#5cc0dc;--sea-deep:#0a1c25;--foam:#3f9c94;--sun:#f5b942;--coral:#ef7b5c;--line:#2a4855;--on-sea:#0a1c25;--card:#143240}
*{box-sizing:border-box}
body{background:var(--sand);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;padding-inline:16px;padding-block:0}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,5vw,44px);font-weight:700}
h3{font-size:22px;font-weight:700}
p{margin:0}
a{color:var(--sea)}
.btn{display:inline-block;background:var(--coral);color:#fff;font-weight:700;text-decoration:none;padding:14px 26px;border-radius:999px;font-size:16px}
:root[data-theme="dark"] .btn{color:#0a1c25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#0a1c25}}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
/* hero */
.hero{position:relative;background:var(--sea);color:var(--on-sea);border-radius:0 0 var(--r) var(--r);margin-inline:-16px;padding:48px 16px 0;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-bottom:150px}
.hero .eyebrow{color:var(--foam)}
.hero h1{font-size:clamp(44px,9vw,96px);font-weight:700;letter-spacing:-.02em;margin:12px 0 16px;max-width:16ch}
.hero p.lead{font-size:20px;max-width:34ch;opacity:.95}
.hero .row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
.hero .rate{font-weight:700}
.sun{position:absolute;right:8%;top:40px;width:clamp(90px,16vw,180px);aspect-ratio:1;border-radius:50%;background:var(--sun);z-index:1}
.waves{position:absolute;left:0;right:0;bottom:-1px;height:130px;width:100%;z-index:1}
.w1{fill:var(--foam);opacity:.55}.w2{fill:var(--sand-2)}.w3{fill:var(--sand)}
/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:-8px;padding-block:24px 8px}
.fact{padding:16px 0;border-bottom:2px solid var(--line)}
.fact b{display:block;font-family:var(--display);font-size:30px;line-height:1.1}
.fact span{font-size:14px;color:var(--ink-2)}
section{padding-block:56px}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.copy p+p{margin-top:16px}
.copy h2{margin-bottom:20px}
.photo{border-radius:var(--r);background:linear-gradient(180deg,var(--foam),var(--sea));min-height:280px;display:flex;align-items:flex-end;padding:16px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;position:relative;overflow:hidden}
.photo.tall{min-height:420px}.photo.sand{background:linear-gradient(180deg,var(--sun),var(--sand-2));color:var(--ink)}
.photo span{background:rgba(8,63,87,.75);padding:6px 12px;border-radius:999px}
.photo.sand span{background:rgba(255,250,240,.85);color:#12323f}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:700px){.photos{grid-template-columns:1fr}}
.beds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px}
.bed{background:var(--card);border-radius:var(--r);padding:20px}
.bed p{color:var(--ink-2);font-size:15px}
/* amenities */
.band{background:var(--sand-2);margin-inline:-16px;padding-inline:16px;border-radius:var(--r)}
.amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 32px;list-style:none;padding:0;margin:28px 0 0}
.amen li{padding:12px 0;border-bottom:1px solid var(--line)}
.amen b{display:block}
.amen span{font-size:15px;color:var(--ink-2)}
/* reviews */
.rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.quote{background:var(--card);padding:24px;border-radius:var(--r)}
.quote p{font-size:16px}
.quote cite{display:block;margin-top:16px;font-style:normal;font-weight:700}
.stars{color:var(--sun);letter-spacing:2px;font-size:18px}
/* calendar */
.cal{background:var(--card);border-radius:var(--r);padding:24px;max-width:420px}
.cal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--display);font-weight:700;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:14px}
.grid .dow{font-size:12px;color:var(--ink-2);font-weight:700}
.grid .d{padding:8px 0;border-radius:var(--r-sm);background:color-mix(in srgb,var(--foam) 45%,transparent)}
.grid .d.x{background:none;color:var(--ink-2);text-decoration:line-through;opacity:.7}
.legend{display:flex;gap:16px;margin-top:16px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--foam);margin-right:6px;vertical-align:-1px}
.note{font-size:14px;color:var(--ink-2);margin-top:16px}
.rules{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.rules li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.rules b{font-family:var(--display)}
footer{padding-block:40px;color:var(--ink-2);font-size:14px;text-align:center}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.bed img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);margin-bottom:12px}
.book{margin-top:32px;background:var(--sea);color:var(--on-sea);border-radius:var(--r);padding:28px;display:grid;gap:12px}
.book h3{color:var(--on-sea)}.book p{opacity:.95;max-width:60ch}
#booking-widget{background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:20px;margin-top:8px;font-size:15px}
#booking-widget .ph{color:var(--ink-2);border:2px dashed var(--line);border-radius:var(--r-sm);padding:24px;text-align:center}
#booking-widget button,#booking-widget input[type=submit],#booking-widget .button{background:var(--coral);color:#fff;border:0;border-radius:999px;padding:12px 24px;font-weight:700;font-family:inherit;cursor:pointer}
#booking-widget input,#booking-widget select{font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}

/* ---- theme additions ---- */
.site-nav{background:var(--sea);color:var(--on-sea);margin-inline:-16px;padding:14px 16px}
.site-nav .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.site-nav a{color:var(--on-sea);text-decoration:none;font-weight:700}
.site-nav .brand{font-family:var(--display);font-size:22px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.site-nav a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.hero{padding-top:32px}
.top{background:var(--sea);color:var(--on-sea);margin-inline:-16px;padding:32px 16px 72px;border-radius:0 0 var(--r) var(--r);position:relative;overflow:hidden}
.top h1{font-family:var(--display);font-size:clamp(40px,7vw,72px);line-height:1;margin:8px 0 12px;font-weight:700;text-wrap:balance}
.top .eyebrow{color:var(--foam)}.top p{max-width:52ch;opacity:.95}
.top .waves{position:absolute;left:0;right:0;bottom:-1px;height:56px;width:100%}.top .waves path{fill:var(--sand)}
.page-body{padding-block:40px 56px}
.page-body>*+*{margin-top:1em}
.gallery{column-count:3;column-gap:16px;padding-block:8px 24px}
@media(max-width:900px){.gallery{column-count:2}}
@media(max-width:520px){.gallery{column-count:1}}
.gallery figure{margin:0 0 16px;break-inside:avoid;position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand-2)}
.gallery img{display:block;width:100%;height:auto;cursor:zoom-in}
.gallery figcaption{position:absolute;left:12px;bottom:12px;background:rgba(8,63,87,.8);color:#fff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;pointer-events:none}
.wp-block-gallery{gap:16px}.wp-block-gallery img{border-radius:var(--r);cursor:zoom-in}
.photo.link{text-decoration:none;color:#fff}
.lb{position:fixed;inset:0;background:rgba(8,28,37,.94);display:none;align-items:center;justify-content:center;z-index:99999;padding:24px}
.lb.on{display:flex}.lb img{max-width:100%;max-height:88vh;border-radius:var(--r-sm)}
.lb button{position:absolute;background:var(--card);color:var(--ink);border:0;border-radius:999px;width:48px;height:48px;font-size:22px;cursor:pointer}
.lb button:focus-visible{outline:3px solid var(--sun)}
.lb .x{top:16px;right:16px}.lb .p{left:16px}.lb .n{right:16px}
.lb p{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:14px;margin:0}
.dates-box{background:var(--card);border-radius:var(--r);padding:24px}
.dates-box .ph{color:var(--ink-2);border:2px dashed var(--line);border-radius:var(--r-sm);padding:24px;text-align:center;font-size:15px}

/* MotoPress Hotel Booking: match plugin forms to the theme */
.dates-box,#booking-widget{font-size:15px;color:var(--ink)}
.dates-box input[type=text],.dates-box input[type=email],.dates-box input[type=tel],.dates-box select,.dates-box textarea,
#booking-widget input[type=text],#booking-widget input[type=email],#booking-widget input[type=tel],#booking-widget select,#booking-widget textarea{
 font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);max-width:100%}
.dates-box input[type=submit],.dates-box button,.dates-box .button,#booking-widget input[type=submit],#booking-widget button,#booking-widget .button{
 background:var(--coral);color:#fff;border:0;border-radius:999px;padding:12px 24px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none}
:root[data-theme="dark"] .dates-box input[type=submit],:root[data-theme="dark"] #booking-widget input[type=submit]{color:#0a1c25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dates-box input[type=submit],:root:not([data-theme="light"]) #booking-widget input[type=submit]{color:#0a1c25}}
.dates-box table,#booking-widget table{max-width:100%;border-collapse:collapse}
.dates-box a,#booking-widget a{color:var(--sea)}
.dates-box [class*="mphb"] a.button,#booking-widget [class*="mphb"] a.button{color:#fff}

.faq{display:grid;gap:8px;margin-top:20px;max-width:760px}
.faq details{background:var(--card);border-radius:var(--r-sm);padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--display);font-size:18px}
.faq summary:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.faq p{margin-top:10px;color:var(--ink-2);font-size:16px}

.page-extra{margin-top:32px}