/* New Grotto Massage – consolidated CSS for all pages (inline → CSS) */
:root{
  --ng-red:#b7222a;
  --ng-gold:#d7a86e;
  --ng-linen:#faf3e8;
  --ng-text:#1a1a1a;
  --ng-muted:#6b7280;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Serif SC", ui-serif, Georgia, "Times New Roman", serif;
  color:var(--ng-text);
  background:var(--ng-red);
  line-height:1.6;
}

/* Wrap the content area in a soft linen block */
.page-wrap{background:var(--ng-linen)}

/* Header */
.site-header{
  background:var(--ng-red);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1rem 1rem .75rem;
}
.brand{display:flex; align-items:center; gap:1rem}
.brand h1{margin:0; color:var(--ng-gold); font-size:clamp(1.25rem, 2vw + 1rem, 1.9rem)}
.site-nav{display:flex; gap:1rem; flex-wrap:wrap}
.site-nav a{color:#fff; text-decoration:none; padding:.25rem .5rem; border-radius:.375rem}
.site-nav a:hover{background:rgba(255,255,255,.12)}
.site-nav a[aria-current="page"]{background:rgba(255,255,255,.18)}

/* Footer */
.site-footer{background:var(--ng-red); color:#fff; text-align:center; padding:1rem 1rem}

/* Hero (shared) */
.hero{
  text-align:center;
  color:#fff;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
  background-color:#d7a86e;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  padding:1rem 1rem;
  margin:1rem;
}
.hero h2{font-size:2rem; margin:.25em 0 .5em}
.hero .lede{font-size:1.125rem}
/* Hands down, best massage in town */
.hero .tagline{font-style:italic; color: #fff; font-weight:bold}
/* Generic semantic text roles */
.tagline-text {
  font-size: 1.1em;   /* closer to normal body text size */
  margin-top: 15px;
  color: #fff;
}


.hero-accent {
  color: #fff;   /* still controls "Relief is at hand" */
  font-weight: bold;
}

.hero--services{
  background-image: image-set(
    url("assets/optimized/scroll.webp") type("image/webp"),
    url("assets/scroll.png")           type("image/png")
  );
}
.hero-about {
  background-image: image-set(
    url("assets/optimized/characters.webp") type("image/webp"),
    url("assets/characters.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;   /* instead of cover */
}
.about-hero-image {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 380px;
  height: auto;
  content: image-set(
    url("assets/optimized/building-the-new-you2.webp") type("image/webp"),
    url("assets/building-the-new-you2.png") type("image/png")
  );
}

.hero--contact{
  background-image: image-set(
    url("assets/optimized/corded_phone2.webp") type("image/webp"),
    url("assets/corded_phone2.png")            type("image/png")
  );
}
/* FAQ hero */
.hero--faq {
  background-image: image-set(
    url("assets/optimized/faq_background.webp") type("image/webp"),
    url("assets/faq_background.png")            type("image/png")
  );
}

/* If hands3_web_tiny.png is a background anywhere */
.bg-hands3 {
  background-image: image-set(
    url("assets/optimized/hands3_web_tiny.webp") type("image/webp"),
    url("assets/hands3_web_tiny.png")            type("image/png")
  );
}


/* Utilities */
.text-red{color:var(--ng-red)}
.text-gold{color:var(--ng-gold)}
.italic{font-style:italic}

/* Services grid */
.service-menu{padding:1rem 0}
.service-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  width:min(1200px, 96%);
  margin:1rem auto 0;
}
.service-card{
  background:var(--ng-red);
  color:#fff;
  border-radius:.75rem;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  padding:1rem 1.25rem;
  text-align:center;
}
.service-card h3{margin:.25rem 0 .5rem; color:#fff; border-bottom:2px solid var(--ng-gold); padding-bottom:.25rem}
.note{margin-top:1rem; color:#fff; text-align:center}
.service-note{color:#fff; text-align:center}

/* Callout */
.callout{
  background:var(--ng-linen);
  padding:1rem;
  border-left:4px solid var(--ng-red);
  margin:1.5rem 1rem 0;
}
.callout h3{margin:.25rem 0; color:var(--ng-gold)}

/* FAQ */
.faq{width:min(900px, 92%); margin:0 auto; text-align:left}
.faq h3{color:#fff; margin-bottom:.25rem}
.faq p{color:#fff; margin-top:0}

/* Contact map */
.map-embed{max-width:100%; height:350px; margin:0 1rem 1rem}
.map-embed iframe{width:100%; height:100%; border:0}
/* Relief is at hand */
.hero-accent {
  color: #fff;
  font-weight: bold;
}

.text-white {
  color: #fff;
}
/* Make the content band (between header and footer) linen again */
main {
  background: var(--ng-linen);
  padding-bottom: 140px; /* adjust this to get the exact “big gap” you like */
}
/* 🎨 Global Theme Palette */
:root {
  --color-primary: #a61d2d;   /* ng-red */
  --color-secondary: #d4a373; /* goldish accent */
  --color-accent: #d88c1e;    /* your new body bg (orange-gold) */
  --color-light: #f8f1e8;     /* linen */
  --color-dark: #2a2a2a;      /* deep text fallback */
  --color-text: #ffffff;      /* default light text */
}

/* 🌐 Site-Wide Base */
body.body {
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-family: 'Georgia', serif; /* or your preferred font */
}

/* 📝 Text Utility Classes */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-accent {
  color: var(--color-accent);
}

.text-light {
  color: var(--color-light);
}

.text-dark {
  color: var(--color-dark);
}

.text-inverse {
  color: var(--color-text);
}

/* 🎯 Reusable Accent Class */
.hero-accent {
  color: var(--color-light);
  font-weight: bold;
}
.text-light {
  color: var(--color-light);
}

.text-dark {
  color: var(--color-dark);
}

.text-accent {
  color: var(--color-accent);
}

/* --- About Page Styling --- */

/* Headings inside content areas */
.about-heading {
  font-size: 2rem;       /* larger, clear headings */
  color: #8b0000;        /* deep red to match theme */
  margin-bottom: 0.5em;
  text-align: center;    /* keep consistent with home */
}

/* Subheadings */
.about-subheading {
  font-size: 1.4rem;
  color: #333;           /* dark neutral */
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  text-align: center;
}

/* Body text */
.about-text {
  font-size: 1rem;
  color: #fff;           /* white text on dark bg */
  line-height: 1.6;      /* add breathing room */
  margin-bottom: 1em;
  text-align: justify;   /* optional: makes it look neater */
  max-width: 800px;      /* avoid super-wide text */
  margin-left: auto;
  margin-right: auto;
}
/* ===== Learn More panel on About page ===== */
.learn-box {
  background: var(--ng-linen);
  border-left: 4px solid var(--ng-red);
  padding: 16px 20px;
  margin: 24px 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.learnbox {
  background-color: rgba(255, 255, 255, 0.0); /* 0.0 = fully transparent, 1.0 = fully solid */
  border: 5px solid #d88a1d; /* optional: keep border for definition */
  padding: 15px;
  border-radius: 6px;        /* softer corners */
}


/* list/links cleanup */
.learn-links {
  list-style: none;           /* remove the stray white dots */
  margin: 8px 0 0;
  padding-left: 1rem;         /* slight indent to line up emojis/text */
}

.learn-links li { 
  margin: 6px 0; 
}

.learn-links a {
  color: var(--ng-red);
  font-weight: 600;
  text-decoration: underline;
}
.learn-links a:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
/* About: "Learn More..." mini-section (no wrapper needed) */
.about h3.learn-more {
  color: #b22222; /* or #fff if you prefer white text */
  margin-top: 1.5em;
  font-weight: 700;
}


.about ul.learn-links {
  list-style: none;         /* removes default dots */
  margin: .25rem 0 0;
  padding-left: 1rem;       /* slight indent for emoji + text */
}

.about ul.learn-links li {
  margin: .35rem 0;
}

.about ul.learn-links a {
  color: var(--ng-red);
  font-weight: 600;
  text-decoration: underline;
}

.about ul.learn-links a:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
.about-hero {
  background-image: url('assets/characters.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Pressure points page styling */
.hero-pressure {
  background-color: #f7efe0;
  padding: 1rem 1rem 2rem;
  color: #333;               /* dark readable body text */
  font-size: 1.1rem;         /* bump text size slightly */
  line-height: 1.6;          /* improve readability */
}

/* Pressure points intro text */
.hero-pressure p {
  font-size: 2.25rem;   /* ~20px */
  line-height: 1.7;     /* more breathing room */
  margin-bottom: 1em;
}

.hero-pressure h2 {
  font-size: 2.75rem;   /* ~28px */
  font-weight: 700;
}

.hero-pressure h3 {
  font-size: 2.4rem;    /* ~22px */
  font-weight: 700;
  color: #b22222;       /* brand red */
  margin-top: 1.5em;
}

.hero-pressure ul {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 0;
}

.hero-pressure ul li {
  font-size: 2.2rem;    /* ~19px */
  margin: 0.5em 0;
}

.hero-pressure ul li a {
  color: #333;
  text-decoration: underline;
}
/* ===== FAQ (page-scoped; affects faq.html only) ===== */

/* Adjust this single number to squeeze/loosen the column */
.page-faq { --faq-col-width: 480px; } /* try 460 or 500 if you want tighter/wider */

.page-faq .hero--faq{
  background-color:#d7a86e;
  background-image:image-set(
    url("assets/optimized/faq_background.webp") type("image/webp"),
    url("assets/faq_background.png")           type("image/png")
  );
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  text-align:center;
  padding:2em 1em;
  color:#fff;
  text-shadow:1px 1px 3px rgba(0,0,0,.7);
}

.page-faq .faq-intro{ margin:1rem 0; text-align:center; }

.page-faq .faq-col{
  max-width: var(--faq-col-width);
  margin: 0 auto;
  text-align: left;
}

.page-faq .question{
  color: var(--ng-red);   /* brand token; change here later if you choose */
  margin-bottom:.25rem;
  font-weight:700;
}

.page-faq .answer{
  color:#fff;
  margin-top:0;
}

/* ===== Contact (scoped to contact.html only) ===== */

/* Tweak these to taste */
.page-contact { --contact-hero-padding: 2em 1em; --contact-map-height: 350px; }

.page-contact .hero--contact{
  color:#fff;
  background-color:#d7a86e;
  background-image: image-set(
    url("assets/optimized/corded_phone2.webp") type("image/webp"),
    url("assets/corded_phone2.png")            type("image/png")
  );
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: var(--contact-hero-padding);
}

.page-contact .map-frame{
  max-width:100%;
  height: var(--contact-map-height);
}

.page-contact .map-frame iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* ===== Home (scoped to index.html only) ===== */

.page-home .hero--home {
  background-color: #d7a86e;
  background-image: image-set(
    url("assets/optimized/hands3_web_tiny.webp") type("image/webp"),
    url("assets/hands3_web_tiny.png") type("image/png")
  );
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 2em 1em;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

.page-home .home-intro {
  max-width: 340px;
  margin: 0 auto;
  text-align: left;
}

.page-home .phone-link {
  color: #fff;
  text-decoration: underline;
}
/* ===== Services (scoped to services.html only) ===== */

.page-services .hero--services {
  background-color: #d7a86e;
  background-image: image-set(
    url("assets/optimized/scroll.webp") type("image/webp"),
    url("assets/scroll.png") type("image/png")
  );
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 2em 1em;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/* ===== Etiquette (scoped to etiquette.html only) ===== */

/* Tweak these to taste */
.page-etiquette {
  --etiquette-hero-padding: 2em 1em;
  --etiquette-tagline-width: 600px;
  --etiquette-content-width: 900px;
}

/* Hero replaces previous inline styles */
.page-etiquette .hero--etiquette{
  background-color:#d7a86e;
  /* If you later want a background image, uncomment and set:
  background-image:image-set(
    url("assets/optimized/faq_background.webp") type("image/webp"),
    url("assets/faq_background.png")            type("image/png")
  );
  */
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  text-align:center;
  padding: var(--etiquette-hero-padding);
  color:#fff;
  text-shadow:1px 1px 3px rgba(0,0,0,.6);
}

/* Tagline width: was max-width:600px; margin:.5em auto; */
.page-etiquette .etiquette-tagline{
  max-width: var(--etiquette-tagline-width);
  margin: .5em auto;
}

/* "First visit?" spacer: was margin-top:1rem */
.page-etiquette .etiquette-lead{
  margin-top: 1rem;
}

/* Content container: was max-width:900px; margin:2rem auto; padding:0 1rem; */
.page-etiquette .etiquette-content{
  max-width: var(--etiquette-content-width);
  margin: 2rem auto;
  padding: 0 1rem;
}

/* CTA row: replaces <div style="margin-top:2rem;"><span style="margin:0 .5rem;"></span> */
.page-etiquette .etiquette-cta{
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;           /* replaces the spacer span */
  flex-wrap: wrap;
}
/* ===== Pressure Points: Back (scoped to pressure-points-back.html only) ===== */

.page-pp-back .pp-wrap {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.page-pp-back .pp-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 2rem;
  align-items: start;
}
.page-pp-back .pp-grid h2 { margin-top: 0; }

.page-pp-back .pp-list {
  margin: .5rem 0 1.5rem 1.1rem;
}
.page-pp-back .pp-list li { margin: .35rem 0; }

.page-pp-back .pp-figure picture,
.page-pp-back .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.page-pp-back .pp-figure figcaption {
  font-size: .95rem;
  color: #664;
  margin-top: .5rem;
}

@media (max-width: 980px) {
  .page-pp-back .pp-grid { grid-template-columns: 1fr; }
  .page-pp-back .pp-figure { order: -1; }
}

/* Back-link at bottom */
.page-pp-back .pp-backlink {
  margin: 2rem 0 0;
  text-align: center;
}
/* About Page Hero Image */
.about-hero-image {
  display: block;
  max-width: 400px;   /* keeps it from being huge */
  height: auto;       /* keeps proportions */
  margin: 0 auto 1rem auto; /* center horizontally with spacing below */
}
/* Global Header */
.site-header {
  background-color: var(--ng-red); /* use your brand token */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.site-header .brand {
  display: flex;
  align-items: center;
}

.site-header .brand img {
  height: 40px;
  width: auto;
}

.site-header .site-nav {
  display: flex;
  gap: 1rem;
}

.site-header .site-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.site-header .site-nav a:hover,
.site-header .site-nav a[aria-current="page"] {
  text-decoration: underline;
}
/* ===== Pressure Points: Hands & Feet (scoped to pressure-points-hands-feet.html only) ===== */

.page-pp-hf .pp-wrap {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.page-pp-hf .pp-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 2rem;
  align-items: start;
}
.page-pp-hf .pp-grid h2 { margin-top: 0; }

.page-pp-hf .pp-list {
  margin: .5rem 0 1.5rem 1.1rem;
}
.page-pp-hf .pp-list li { margin: .35rem 0; }

.page-pp-hf .pp-figure picture,
.page-pp-hf .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.page-pp-hf .pp-figure figcaption {
  font-size: .95rem;
  color: #664;
  margin-top: .5rem;
}

@media (max-width: 980px) {
  .page-pp-hf .pp-grid { grid-template-columns: 1fr; }
  .page-pp-hf .pp-figure { order: -1; }
}

/* Back-link at bottom (replaces inline margin/center) */
.page-pp-hf .pp-backlink {
  margin: 2rem 0 0;
  text-align: center;
}
/* ===== Pressure Points: Neck & Shoulders (scoped to pressure-points-neck.html only) ===== */

.page-pp-neck .pp-wrap {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.page-pp-neck .pp-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 2rem;
  align-items: start;
}
.page-pp-neck .pp-grid h2 { margin-top: 0; }

.page-pp-neck .pp-list {
  margin: .5rem 0 1.5rem 1.1rem;
}
.page-pp-neck .pp-list li { margin: .35rem 0; }

.page-pp-neck .pp-figure picture,
.page-pp-neck .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.page-pp-neck .pp-figure figcaption {
  font-size: .95rem;
  color: #664;
  margin-top: .5rem;
}

@media (max-width: 980px) {
  .page-pp-neck .pp-grid { grid-template-columns: 1fr; }
  .page-pp-neck .pp-figure { order: -1; }
}

/* Back-link at bottom (replaces inline margin/center) */
.page-pp-neck .pp-backlink {
  margin: 2rem 0 0;
  text-align: center;
}
/* ===== Pressure Points: Overview (scoped to pressure-points.html only) ===== */

.page-pp-overview .pp-wrap {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.page-pp-overview .pp-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 2rem;
  align-items: start;
}

.page-pp-overview .pp-hero h2 { margin: 0 0 .5rem; }
.page-pp-overview .pp-hero p  { margin: 0 0 1.25rem; }

.page-pp-overview .pp-figure picture,
.page-pp-overview .pp-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-pp-overview .pp-figure figcaption {
  font-size: .95rem;
  color: #664;
  margin-top: .5rem;
}

.page-pp-overview .pp-list { margin: 0 0 1.75rem 1.1rem; }
.page-pp-overview .pp-list li { margin: .35rem 0; }

@media (max-width: 980px){
  .page-pp-overview .pp-grid { grid-template-columns: 1fr; }
  .page-pp-overview .pp-figure { order: -1; }
}

/* Back-link (replaces inline margin/center) */
.page-pp-overview .pp-backlink {
  margin: 2rem 0 0;
  text-align: center;
}