/* (C) 2025 STIL Salon (Niamh Shaw) -- stilsalonYYYYMMDD.css (2025-08-07) ******** */

/* ####################### custom properties ####################### */

:root {
  --page-color: RGB(86,80,81);
  --page-darker-color: RGB(238,204,209);
  --page-darker-still-color: RGB(182,156,160);
  --hdr-color: RGB(64,64,64);
  --hdr-back-color: RGB(255,250,205);
  --heading-font: "Noto Serif Display", serif;
  --heading-color: DarkSlateBlue;
  --body-font: Forum, "Times New Roman", serif;
  --body-text-color: white; /*RGB(82,50,54);*/
  --link-color: DarkSlateBlue;
  --home-color: DarkGrey;
  --btn-text-color: White;
  --btn-back-color: RGB(225,163,170);
  --btn-font-size: 1rem;
  --input-border-color: #8b8a8b;
  --input-focus-color: DarkSlateBlue;
  --input-font-size: 1rem;
  --navbtn-color: DarkSlateBlue;
  --pulsating-color: RGB(255,214,0);
  --pulsating-size: 6.0rem;
  --pulsating-font-size: 3vw;
  --pulsating-delay: 0.5s;
  --slideshow-delay: 1.0s;
  --footer-color: DarkGrey;
  --footer-font-size: 0.7rem;
  --input-box-color: white;
  --input-text-color: RGB(82,50,54);
  --frame-color: RGB(229,231,235);
  --splash-font-size: 5.0rem;
  --splash-sub-font-size: 2.0rem;
  --splash-font-color: white;
  --dur-color: RGB(182,182,182);
  --tbl-border-color: RGB(255,255,255);
  --booknow-color: RGB(0,192,0);
  --svc-back-color: RGB(86,80,81);
  --svc-color: RGB(255,236,212);
  --flagred-color: RGB(210,38,48);
  --flagyellow-color: RGB(253,200,47);
}

/* ####################### HTML elements ####################### */

html {
  font-size: calc(15px + 0.390625vw);
  background-color: var(--page-color);
}

body {
  background-color: var(--page-color);
  text-align: left; /* center; */
  font-family: var(--body-font);
}

footer {
  background-color: var(--footer-color);
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--footer-font-size);
}

.footerref {
  background-color: var(--footer-color);
  color: RGB(64,64,64);
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--footer-font-size);
  text-decoration-line: underline;
}
  
p {
  font-family: var(--body-font);
  color: var(--body-text-color); 
}

p + p {
  margin-top: 0;
}

#clause {
  text-align: center;
  /* background-color: var(--btn-back-color);*/
  background-color: white;
  font-size: 18px;
  font-weight: 900;
  color: black;
}

#pin {
  display: inline;
}

div {
  text-align: center;
}

h1 {
  text-align: center;
  font-family: var(--heading-font);
  font-size: 1.8rem;
  color: var(--heading-color);
}

h2 {
  text-align: center;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  color: var(--heading-color);
  margin-bottom: 0;
}

a {
  color: RGB(127,211,113); /*var(--book-now-color);*/
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  border: 1.0px solid RGB(96,96,96);
}

details[open] summary {
  color: white;
}

/* ----------------------- images ----------------------- */

img.hover {
  color: Red;
  font-family: var(--body-font);
  font-size: 12px;
  background-color: yellow;
}

/* ----------------------- tables ----------------------- */

table {
  width: 100%;
  color: var(--body-text-color);
  font-size: 1.0rem;
  font-family: var(--body-font);
  border: 1px solid black;
  border: 1px var(--tbl-border-color);
}

td { 
  padding: 1px 1px;
  text-align: left;
  vertical-align: top;
  /* border: 1px dotted White; */
  color: white;
  font-size: 0.9rem;
} 

.myitem {
  text-align: left;
  vertical-align: top;
  padding: 1px 1px;
  color: white;
  font-size: 1.2rem;
}

.mysubitem {
  text-align: left;
  vertical-align: top;
  padding-left: 1px;
  color: white;
  font-size: 0.9rem;
}

td:nth-child(2) {
  text-align: right;
}


td:nth-child(3) {
  text-align: right;
}

.tab {
  padding-left: 10px;
  font-size: 1.0rem;
}

/* ----------------------- navigation bar  ----------------------- */

nav {
  width: 100%;
  float: left;
  margin-top: 0px;
}

.menu {
  margin: 0;
  padding: 8px;
  height: 100%;
  background-color: black;
  text-align: center;
}

.menuitem {
  font-style: normal;
  color: white;
  font-size: 3.0vw;
  text-align: center;
  padding: 3px 8px 3px 8px;
  border: 1px solid gray;
}  
  
/* ----------------------- other elements ----------------------- */

/* other elements: hr, lists (ul, ol, and li), and span */

#tr-btn {
  position: absolute;
  top: 2vw;
  right: 2vw;
  margin: 0;
  font-size: 4vw;
  font-weight: 700;
  border: none;
  background-color: transparent;
}

details {
  cursor: pointer;
}

/* ####################### class selectors ####################### */

.Country {
  font-size: 0.9rem;
  color: var(--flagyellow-color);
  text-align: center;
  font-style: italic;
}
  
.myheader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 1.4em;
  font-size: 1.6rem;
  margin: 0;
  background-color: var(--hdr-back-color);
  border: none;
}

.myheader div {
  display: inline-block;
  position: absolute;
}

.headlogo {
  left: 12px;
}

.headpagetitle {
  left: 0%;
  right: 0%;
  text-align: center;
}

.headclosebox {
  right: 12px;
}

.stillogo {
  font-size: 1.5rem;
  color: black; /* var(--hdr-color); */
  margin: 0;
}

.pagetitle {
  font-size: 1.5rem;
  color: var(--hdr-color);
  margin: 0;
}

.closebox {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--hdr-color);
  background-color: white;
  border: 1px solid RGB(192,192,192);
  margin: 0;
  margin-top: 4px;
}

.svcaccordion {
  width: 100%;
  background-color: var(--svc-back-color);
  max-width: fit-content;
  margin-top: 3.3em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.svccat {
  text-align: left;
  color: RGB(192,192,192); /* var(--heading-color); */
  font-size: 1.8rem;
  font-family: var(--heading-font);
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.svcexplain {
  text-align: justify;
  width: 100%;
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--svc-color);
  background-color: var(--svc-back-color);
}

.svcfeatures {
  width: 80%;
  margin: 0 auto;
  text-align: centre;
  border: none;
  border-collapse: separate; 
  border-spacing: 0 0px;
  color: var(--svc-color);
  background-color: var(--svc-back-color);
}

.svcinclude {
  text-align: center;
  color: var(--svc-color);
  padding-bottom: 8px;
  padding-top: 0;
}

.svcitem {
  width: 100%;
  margin: 0 auto;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 16px;
  border: none;
  color: var(--svc-color);
  background-color: var(--svc-back-color);
}

.svcdur {
  color:var(--dur-color);
}

.svcbooknow {
  background-color: var(--pulsating-color);
  border: none;
  color: black;
  padding: 1.8vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0rem;
  margin: 1.5rem 0px;
  cursor: pointer;
  border-radius: 50%;
}

.flex-container {
  display: flex;
  background-color:var(--page-color);
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.imgfull {
  max-width: 100%;
}

.cent-text {
  text-align: center;
  font-size: 2.0vw;
}

.frame {
  width: 88%;
  border: 1px solid black;
  box-shadow: 0px 0px 20px white;
  background: #eee;
  margin: auto;
  padding: 0;
  text-align: center;
}

.menubar {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

.salon-info {
  position: absolute;
  width: 100%;
  bottom: 0px;
  height: 18vw;
  padding: 10px;
  background-color: rgba(0,0,0,0.2);
}

.salon-name {
  position: absolute;
  left: 5%;
  bottom: 50%;
  font-size: 6vw;
  text-align:left;
}

.salon-location {
  position: absolute;
  left: 5%;
  bottom: 20%;
  font-size: 3.5vw;
  text-align:left;
  font-style: italic;
}

.salon-hours {
  position: absolute;
  right: 5%;
  bottom: 30%;
  font-size: 3.5vw;
  font-style: italic;
}

.booknow {
  color: var(--booknow-color);
  font-size: 18px;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 2.0px;
}

.button {
  background-color: var(--btn-back-color);
  border: none;
  color: var(--btn-text-color);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: var(--btn-font-size);
  margin: 4px 2px;
  cursor: pointer;
}

.button-s {
  background-color: var(--btn-back-color);
  border: none;
  border-radius: 15px;
  color: var(--btn-text-color);
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: var(--btn-font-size);
  margin: 4px 2px;
  cursor: pointer;
}

.invis {
  visibility: hidden;
}

/* ----------------------- input form ----------------------- */

fieldset {
  width: 25em;
  font-family:var(--body-font);
  font-size: var(--btn-font-size);
}

legend {
  font-family:var(--body-font);
  font-size: var(--btn-font-size);
}

.input {
  font-size: var(--input-font-size);
  font-family: inherit;
  padding: 0.25em 0.5em;
  background-color: White;
  border: 2px solid var(--input-border-color);
  border-radius: 4px;
  margin-bottom: 16px;
}

.input:focus {
  border-color: var(--input-focus-color));
}

/* also label */

input[type=button], input[type=submit] {
  background-color: var(--btn-back-color);
  font-size: var(--btn-font-size);
  border: none;
  color: var(--btn-text-color);
  padding: 15px 30px;
  text-decoration: none;
  margin: 24px 2px;
  cursor: pointer;
}

input[type=text] {
  display:block;
  height: 2em;
  margin-bottom: 6px;
  font-size: 18px;
}

input[type=textarea] {
  display:block;
  margin-bottom: 6px;
  font-size: 18px;
  height: 3em;
  width: 24em;
}

input[type=checkbox] {
  margin-right: 6px;
}