/* Nic Gaetz Tattoos: main styles (ported from the static site) */

:root{
  --bg:#0a0a0a;
  --bg-alt:#0f0f0f;
  --bg-logo:#030303;
  --card:#151515;
  --line:#272727;
  --red:#b3272a;
  --red-bright:#d63a34;
  --text:#f4f2ee;
  --text-dim:#9a9691;
  --font-logo:'Metal Mania', cursive;
  --font-head:'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --font-body:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --admin-bar:0px;
}
.admin-bar{ --admin-bar:32px; }
@media(max-width:782px){ .admin-bar{ --admin-bar:46px; } }

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:150px;}
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding:88px 0; }
@media(max-width:640px){ section{ padding:60px 0; } }

.eyebrow{ display:block; font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--red-bright); font-weight:600; margin-bottom:8px; }
.section-title{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; font-size:clamp(2rem,5vw,2.8rem); color:var(--text); letter-spacing:0.01em; line-height:1.1; text-wrap:balance; }
.section-title--tight{ margin-bottom:16px; }
.text-link{ color:var(--red-bright); text-decoration:underline; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 30px; font-family:var(--font-body); font-weight:600; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:all .15s ease; }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-bright); }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--red); }
.btn-outline:hover{ background:var(--red); }
.btn-block{ width:100%; }
a:focus-visible, button:focus-visible, .lightbox-item:focus-visible, summary:focus-visible{ outline:2px solid var(--red-bright); outline-offset:3px; }

/* Header */
.site-header{ position:fixed; top:var(--admin-bar); left:0; right:0; z-index:100; border-bottom:1px solid var(--line); }
.header-bg{ position:absolute; inset:0; z-index:-1; background:var(--bg-logo); }

.topbar{ border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; max-width:1180px; margin:0 auto; padding:8px 24px; font-size:0.85rem; letter-spacing:0.03em; }
.topbar-address{ color:var(--text-dim); transition:color .2s; }
.topbar-address:hover{ color:var(--red-bright); }
.topbar-sep{ color:var(--line); }
.topbar-walkins{ display:inline-flex; align-items:center; gap:6px; color:var(--red-bright); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.topbar-dot{ width:5px; height:5px; border-radius:50%; background:var(--red-bright); flex-shrink:0; box-shadow:0 0 6px rgba(214,58,52,0.7); }
@media(max-width:640px){
  .topbar-inner{ padding:7px 20px; font-size:0.7rem; }
  .topbar-sep{ display:none; }
}

.site-header nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto; }
.logo-mark{ display:flex; align-items:center; gap:12px; }
.logo-mark img{ width:90px; height:90px; object-fit:contain; }
.logo-mark span{ font-family:var(--font-logo); font-size:1.3rem; letter-spacing:0.02em; }
.nav-right{ display:flex; align-items:center; gap:20px; }
.nav-book-btn{ padding:11px 22px; font-size:0.74rem; white-space:nowrap; }
.nav-links{ display:flex; align-items:center; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:500; }
.nav-links li{ display:flex; align-items:center; }
.nav-links a{ color:var(--text-dim); transition:color .2s; padding:10px 16px; }
.nav-links a:hover, .nav-links .current-menu-item > a{ color:var(--text); }
/* Red spike between menu items */
.nav-links li + li::before{
  content:''; width:0; height:0; margin:0 2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:11px solid var(--red); opacity:0.85;
}
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle span{ width:22px; height:2px; background:var(--text); }
@media(max-width:900px){
  .nav-links{ position:fixed; top:calc(155px + var(--admin-bar)); left:0; right:0; bottom:0; background:var(--bg); flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:40px 24px; gap:6px; font-size:1rem; transform:translateX(100%); transition:transform .3s ease; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links li + li::before{ display:none; }
  .menu-toggle{ display:flex; }
  .nav-book-btn{ display:none; } /* replaced by the sticky bottom Book Now bar */
}
@media(max-width:410px){
  .nav-links{ top:calc(180px + var(--admin-bar)); }
}

/* Hero (background image is added by functions.php from the Customizer) */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; padding:176px 0 90px; background-color:var(--bg); }
@media(max-width:760px){ .hero{ padding-top:176px; } }
@media(max-width:410px){ .hero{ padding-top:201px; } }
.hero-inner{ max-width:640px; }
.hero .eyebrow{ color:var(--text-dim); letter-spacing:0.14em; }
.hero h1{ font-family:var(--font-logo); font-weight:400; color:var(--red-bright); font-size:clamp(3rem,9vw,6rem); line-height:0.95; margin:8px 0 20px; text-shadow:0 4px 30px rgba(0,0,0,0.6); text-wrap:balance; }
.hero p{ color:#d8d5cf; max-width:480px; margin-bottom:32px; font-size:1.05rem; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.section-head{ margin-bottom:44px; }

/* Portfolio */
.port-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.port-grid figure{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--card); border:1px solid var(--line); cursor:pointer; }
.port-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.port-grid figure:hover img{ transform:scale(1.06); }
@media(max-width:900px){ .port-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .port-grid{ gap:8px; } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:40px; background:rgba(6,6,6,0.92); backdrop-filter:blur(6px); }
.lightbox.open{ display:flex; }
.lightbox-img{ max-width:min(900px,90vw); max-height:85vh; object-fit:contain; border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.lightbox-close{ position:absolute; top:calc(20px + var(--admin-bar)); right:24px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(20,20,20,0.8); color:var(--text); font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover{ color:var(--red-bright); border-color:var(--red-bright); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(20,20,20,0.8); color:var(--text); font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-nav:hover{ color:var(--red-bright); border-color:var(--red-bright); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media(max-width:600px){
  .lightbox{ padding:16px; }
  .lightbox-close{ top:calc(10px + var(--admin-bar)); right:10px; width:38px; height:38px; }
  .lightbox-nav{ width:38px; height:38px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

/* Flash */
.flash{ background:var(--bg-alt); }
.flash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.flash-grid figure{ background:var(--card); border:1px solid var(--line); overflow:hidden; cursor:pointer; }
.flash-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .5s ease; }
.flash-grid figure:hover img{ transform:scale(1.06); }
.flash-note{ margin-top:24px; color:var(--text-dim); font-size:0.9rem; }
@media(max-width:760px){ .flash-grid{ grid-template-columns:1fr 1fr; } }

/* About */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; }
.about-photo{ aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-copy p{ color:var(--text-dim); margin-bottom:16px; max-width:520px; }
.about-stats{ display:flex; gap:36px; margin:24px 0; }
.about-stats strong{ font-family:var(--font-head); font-size:2rem; color:var(--red-bright); display:block; }
.about-stats span{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); }
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }

/* Booking */
.booking{ background:var(--bg-alt); }
.booking-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:flex-start; }
.booking-info p{ color:var(--text-dim); margin-bottom:20px; max-width:420px; }
.booking-info li{ padding:12px 0; border-bottom:1px solid var(--line); color:var(--text-dim); font-size:0.9rem; }
.booking-info li strong{ color:var(--text); display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }

.booking-form{ background:var(--card); border:1px solid var(--line); padding:36px; min-width:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); margin-bottom:8px; }
.field .req{ color:var(--red-bright); }
.field input, .field select, .field textarea{ width:100%; background:#fff; color:#111; border:1px solid var(--line); padding:13px 14px; font-family:var(--font-body); font-size:0.92rem; border-radius:2px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--red); }
.field textarea{ resize:vertical; min-height:110px; }
.file-drop{ border:1px dashed #555; background:#fff; color:#555; text-align:center; padding:30px 16px; font-size:0.85rem; }
.file-drop input[type=file]{ margin-top:10px; width:auto; max-width:100%; border:0; padding:0; }
.checks{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:24px; font-size:0.88rem; color:var(--text-dim); border:0; }
.checks legend{ width:100%; margin-bottom:10px; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.08em; }
.checks label{ display:flex; align-items:center; gap:8px; }
.form-note{ font-size:0.76rem; color:var(--text-dim); margin-top:14px; }
.form-admin-notice{ background:#3a1213; border:1px solid var(--red); color:var(--text); padding:12px 14px; font-size:0.85rem; margin-bottom:20px; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
@media(max-width:900px){ .booking-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }
@media(max-width:520px){ .booking-form{ padding:24px 18px; } }

/* Gravity Forms inside the booking panel: matches the built-in form.
   Works with GF's "Orbital" theme (2.7+) and the classic markup. */
.booking-form--embed .gform_wrapper{ margin:0; }
.booking-form--embed .gform_fields{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px 16px; }
.booking-form--embed .gfield{ grid-column:1 / -1; min-width:0; border:0; padding:0; margin:0; }
.booking-form--embed .gfield--width-half{ grid-column:span 6; }
@media(max-width:640px){ .booking-form--embed .gfield--width-half{ grid-column:1 / -1; } }
.booking-form--embed .gfield_required{ margin-left:6px; }
.booking-form--embed .gchoice{ display:flex; align-items:center; gap:8px; }
.booking-form--embed .gform_wrapper.gravity-theme,
.booking-form--embed .gform_wrapper.gform-theme{
  --gf-color-primary:var(--red);
  --gf-color-primary-rgb:179,39,42;
  --gf-color-primary-contrast:#fff;
  --gf-color-primary-darker:var(--red-bright);
  --gf-ctrl-border-color:var(--line);
  --gf-ctrl-label-color-primary:var(--text-dim);
  --gf-ctrl-label-color-secondary:var(--text-dim);
  --gf-ctrl-desc-color:var(--text-dim);
  --gf-radius:2px;
  --gf-font-family-base:var(--font-body);
}
.booking-form--embed .gfield_label,
.booking-form--embed .gform-field-label,
.booking-form--embed legend.gfield_label{
  display:block; font-size:0.72rem !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim) !important; margin-bottom:8px;
}
.booking-form--embed .gfield_required{ color:var(--red-bright) !important; font-weight:400; }
.booking-form--embed .gfield_description,
.booking-form--embed .gform_fileupload_rules,
.booking-form--embed .ginput_complex label{ color:var(--text-dim) !important; font-size:0.76rem; }
.booking-form--embed input[type=text],
.booking-form--embed input[type=email],
.booking-form--embed input[type=tel],
.booking-form--embed input[type=number],
.booking-form--embed input[type=url],
.booking-form--embed input[type=date],
.booking-form--embed select,
.booking-form--embed textarea{
  width:100%; background:#fff !important; color:#111 !important; border:1px solid var(--line) !important; padding:13px 14px !important; font-family:var(--font-body) !important; font-size:0.92rem !important; border-radius:2px !important; min-height:0; box-shadow:none !important;
}
.booking-form--embed input:focus,
.booking-form--embed select:focus,
.booking-form--embed textarea:focus{ outline:2px solid var(--red) !important; outline-offset:0; }
.booking-form--embed textarea{ min-height:110px; }
.booking-form--embed .gfield--type-fileupload .ginput_container,
.booking-form--embed .gform_drop_area{ background:#fff; border:1px dashed #555 !important; color:#555; padding:24px 16px; text-align:center; border-radius:2px; }
.booking-form--embed .gfield_checkbox label,
.booking-form--embed .gfield_radio label,
.booking-form--embed .gchoice label{ color:var(--text-dim) !important; font-size:0.88rem !important; text-transform:none; letter-spacing:0; }
.booking-form--embed .gfield_checkbox,
.booking-form--embed .gfield_radio{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.booking-form--embed .gform_footer,
.booking-form--embed .gform_page_footer{ margin:8px 0 0 !important; padding:0 !important; }
.booking-form--embed .gform_button,
.booking-form--embed .gform_footer input[type=submit],
.booking-form--embed .gform_footer button{
  width:100% !important; background:var(--red) !important; color:#fff !important; border:1px solid transparent !important; border-radius:2px !important; padding:14px 30px !important; font-family:var(--font-body) !important; font-weight:600 !important; font-size:0.8rem !important; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; box-shadow:none !important; transition:background .15s ease;
}
.booking-form--embed .gform_button:hover,
.booking-form--embed .gform_footer input[type=submit]:hover{ background:var(--red-bright) !important; }
.booking-form--embed .gform_validation_errors,
.booking-form--embed .validation_error{ background:#3a1213 !important; border:1px solid var(--red) !important; color:var(--text) !important; border-radius:2px; box-shadow:none !important; }
.booking-form--embed .gform_validation_errors h2{ color:var(--text) !important; font-size:0.9rem !important; }
.booking-form--embed .gfield_validation_message,
.booking-form--embed .validation_message{ background:none !important; border:0 !important; color:var(--red-bright) !important; padding:6px 0 0 !important; font-size:0.8rem; }
.booking-form--embed .gform_confirmation_message{ color:var(--text); font-size:1.02rem; }

/* Instagram */
.ig-simple{ text-align:center; max-width:640px; }
.ig-simple p{ color:var(--text-dim); margin-top:14px; }
.ig-cta{ margin-top:24px; }

/* FAQ */
.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; font-size:1.02rem; text-transform:uppercase; letter-spacing:0.03em; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] summary{ color:var(--red-bright); }
.faq-item summary::after{ content:'+'; font-size:1.4rem; color:var(--red-bright); flex-shrink:0; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-answer{ color:var(--text-dim); margin-top:14px; max-width:760px; font-size:0.94rem; }
.faq-answer p + p{ margin-top:10px; }
.faq-answer a{ color:var(--red-bright); text-decoration:underline; }

/* Sticky Book Now bar (mobile) */
.sticky-book{ display:none; }
@media(max-width:900px){
  .sticky-book{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:90; padding:14px 20px; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); background:var(--bg); border-top:1px solid var(--line); text-align:center; }
  .sticky-book .btn{ width:100%; }
  body:not(.thanks-page){ padding-bottom:64px; }
}

/* Footer */
.site-footer{ padding:60px 0 32px; border-top:1px solid var(--line); background:var(--bg-logo); }
.footer-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:24px; }
.footer-logo{ display:flex; align-items:center; gap:16px; }
.footer-logo img{ width:92px; height:92px; border-radius:50%; object-fit:contain; }
.footer-logo span{ font-family:var(--font-logo); font-size:1.9rem; color:var(--text); }
.footer-socials{ display:flex; gap:18px; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); }
.footer-socials a:hover{ color:var(--text); }
.footer-tagline{ color:var(--text-dim); font-size:0.85rem; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Regular pages and posts */
.page-shell{ padding:200px 0 88px; min-height:70vh; }
.entry + .entry{ margin-top:56px; }
.entry-content{ color:var(--text-dim); max-width:720px; margin-top:20px; }
.entry-content > * + *{ margin-top:16px; }
.entry-content a{ color:var(--red-bright); text-decoration:underline; }
.entry-content h2, .entry-content h3{ color:var(--text); font-family:var(--font-head); text-transform:uppercase; }
.entry-content ul{ list-style:disc; padding-left:1.4em; }
.entry-content ol{ padding-left:1.4em; }

/* Thank-you page */
.thanks-page{ background:var(--bg-logo); }
.thanks{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; }
.thanks-logo{ width:110px; height:110px; margin-bottom:28px; object-fit:contain; }
.thanks .eyebrow{ margin-bottom:14px; }
.thanks h1{ font-family:var(--font-logo); font-weight:400; color:var(--red-bright); font-size:clamp(2.4rem,7vw,4rem); line-height:1; margin-bottom:20px; }
.thanks p{ color:var(--text-dim); max-width:480px; margin:0 auto 14px; font-size:1.05rem; }
.thanks-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px; }

::selection{ background:var(--red); color:#fff; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; }
}