/* Branding Styles */
html, body {
  height: 100%;
  margin: 0;
}


body {
  font-family: 'Roboto', 'Georgia', serif;
  display: flex;
  flex-direction: column;
  /*padding: 1em;*/
  background: #fff9f5;
  color: #321306;
  min-height: 100vh;
}

header,
footer {
  flex-shrink: 0;
}

footer a {
  color: #321306; /* Match the main menu text color */
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

footer a:visited {
  color: #321306;
}

footer a:hover {
  text-decoration: underline;
  color: #7a3e16;  /* Optional: a subtle hover color */
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px;
}
@media (orientation: portrait) {
.content-wrapper {
  padding-bottom: 160px; /* Give space to the footer */
}
}

body.home main,
#howitworks {
  /*flex: 1;*/
  /*overflow: hidden;*/ /* Optional: if content overflows */
}
@media (orientation: portrait) {
  body.home main {
    flex: 0 0 40%;
  }
  #howitworks {
    flex: 0 0 60%;
  }
}

#howitworks {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*gap: 0 0 2rem 0;*/
}

#howitworks h2 {
  text-align: center;
}

h1 {
  font-family: Georgia, serif;
  font-size: 3.0rem;
  font-weight: normal;
  line-height: 1.3;
}
@media (orientation: portrait) {
  h1 {
    font-size: 2rem;
  }
}

h2 {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
}

h3 {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.3;
}


p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
}
@media (orientation: portrait) {
  p {
    font-size: 1rem;
  }
}


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFF7EC;
  padding: 0.5rem 0 0.5rem 1.5rem; 
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);*/
}

.nav-content {

  max-width: 1600px;
  width: 100%;
  margin: 0 auto;


  display: flex;
  align-items: center;
  gap: 2rem;
}


.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
@media (orientation: portrait) {
.nav-menu {
  gap: 0;
}
.nav-content {
  gap: 1rem;
}
}


.nav-menu li a {
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  color: #321306;
  font-weight: 500;
}

.nav-menu li a:hover {
  color: #F4A261;
}

@media (orientation: portrait) {
.nav-menu li a {
  font-size: 0.9rem;
}
}


.nav-menu .button-link a {
  background-color: #d35e3d;
  color: #FFF7EC;
  padding: 0.4em 1em;
  border-radius: 2em;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
}

.nav-menu .button-link a:hover {
  background-color: #bb4e2d;
}

.get-started-bottom {
  text-align: center;
  margin: 2rem 0;
}

.get-started-bottom a {
  background-color: #d35e3d;
  color: #FFF7EC;
  padding: 0.4em 1em;
  border-radius: 2em;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
}

.get-started-bottom a:hover {
  background-color: #bb4e2d;
  color: #F4A261;
}

.logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
  font-family: 'Georgia', serif;
}
.logo img {
  width: 100px;
  height: auto;
}
@media (orientation: portrait) {
.logo img {
  width: 75px;
}
}

.logo svg {
  width: 50px;
  height: auto;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-size: 2rem;
  font-weight: 500;
  color: #321306; 
}
@media (orientation: portrait) {
.brand-name {
  font-size: 1.25rem;
}
}

.brand-domain {
  font-size: 1.4rem;
  color: #321306;
  /*opacity: 0.7;*/
  margin-top: 0.2rem;
  padding-left: 1.9rem;
}
@media (orientation: portrait) {
.brand-domain {
  font-size: 0.9rem;
}
}


/* Buttons */
button {
  background-color: #c57b2c;
  color: #fff;
  /*padding: 0.6em 1.2em;*/
  border: none;
  border-radius: 5px;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
  font-size: 1em;
}
button:hover {
  background-color: #a96624;
}

/* Main container */
main {
  /*max-width: 800px;*/
  /*margin: 2em auto;*/
  /*padding: 1em 2em;*/
  background: #FFF7EC;
  /*border-radius: 12px;*/
  /*box-shadow: 0 2px 8px rgba(0,0,0,0.05);*/
  flex: 0.8;
}

.split-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*padding: 2rem;*/
  overflow: hidden;
}

.split-layout-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*padding: 2rem;*/
  overflow: hidden;

  max-width: 1600px;
  margin: 0 auto;
  /*padding: 1rem 1rem;*/
  box-sizing: border-box;

}

.left-half {
  flex: 1;
  padding: 0 0 0.75rem 3rem;
}

.right-half {
  flex: 1;
  /*padding: 1rem;*/
}

/*.right-half img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}*/
.right-half img {
  height: auto;
  width: auto;
  max-width: 40%;
  max-height: 40%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
/*.right-half img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}*/

@media (max-width: 1599px) {
.right-half img {
  max-width: 50%;
  max-height: 50%;
}
}

@media (min-width: 2561px) {
.right-half img {
  max-width: 30%;
  max-height: 30%;
}
}

@media (orientation: portrait) {
.right-half img {
  /*height: 50%;*/
  /*width: 60%;*/
  max-width: 90%;
  max-height: 90%;
}
}


.steps-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem; /* optional horizontal padding */
  box-sizing: border-box;
}

.steps {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 0;
  align-items: stretch;
}

.step {
  display: flex;
  flex-direction: column;        /* default: image above text */
  align-items: center;
  justify-content: center;
  text-align: center;
  /*padding: 1rem;*/
}

.step .icon img {
  max-width: 150px;
  height: auto;
  margin-bottom: 0.5rem;
}

@media (orientation: portrait) {
.step .icon img {
  max-width: 100px;
  height: auto;
  margin-bottom: 0.5rem;
}
}


.step .label {
  font-size: 1rem;
  line-height: 1.4;
  color: #321306;               /* default text color */
}

.spacer {
  width: 5%;
  height: 100%;
  display: flex;
  align-items: center;        /* vertical alignment */
  justify-content: center;    /* horizontal alignment */
  height: auto;
  color: #321306;             /* match default text color */
}

.spacer::before {
  min-width: 24px;
  min-height: 24px;
  content: '';
  display: block;
  width: 60%;                 /* size of the arrow inside spacer */
  aspect-ratio: 1;            /* keep it square */
  color: #321306;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23321306' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'>\
        <path d='M12 4 L20 12 L12 20 M20 12 L4 12 '/>\
      </svg>");
}

/* Mobile layout: vertical stack */
@media (orientation: portrait), (max-width: 768px) {
  .steps {
    flex-direction: column;
    align-items: center;
  }

  .step {
    width: 90%;
    margin-bottom: 1rem;
    flex-direction: row;        /* side by side layout */
    text-align: left;
  }

  .step .icon {
    margin-right: 1rem;
  }

  .step .icon img {
    margin-bottom: 0;           /* reset vertical spacing */
  }

  .step .label {
    font-size: 1rem;
  }

  /*.spacer {
    display: none;
  }*/
.spacer::before {
  transform: rotate(90deg);
}


}
footer {
  font-size: 1.2rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  color: #321306;
  font-weight: 300;
  padding: 1rem 0 0.5rem 0; 
}
@media (orientation: portrait) {
footer {
  font-size: 0.9rem;
  line-height: 1.5;
}
}


/*footer:hover {
  color: #F4A261;
} */


body { font-family: sans-serif; margin: 0; /*padding: 1em;*/ background: #fffbf6; color: #321306; }
header nav { background: #fff7ec; /*padding: 1em;*/ }
header nav a { margin-right: 1em; text-decoration: none; color: #0066cc; }
/*main { max-width: 700px; margin: auto; }*/
textarea, input[type='file'] { width: 100%; margin-bottom: 1em; }
button { background-color: #0066cc; color: white; padding: 0.5em 1em; border: none; border-radius: 5px; }
button:hover { background-color: #005bb5; }
/*footer { margin-top: 2em; text-align: center; font-size: 0.9em; color: #666; }*/


/*
 BOOK
*/

main.bookmain {
  border-radius: 16px;
  overflow: hidden;
}

.bookcontainer {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;
  display: block;
  width: 100%;
}

.bookcontainer h2,
.bookcontainer form {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 2rem;
}

/*.bookcontainer h2   background: #fffbf6;
{
 margin-bottom: 1em;
}*/

.bookcontainer form input[type="text"],
.bookcontainer form input[type="email"],
.bookcontainer form input[type="file"],
.bookcontainer form input[type="number"],
.bookcontainer form select,
.bookcontainer form textarea {
  width: 100%;
  max-width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  box-sizing: border-box;
  border: 2px solid #321306; /* thicker, dark border */
  border-radius: 4px; /* rounded corners */
}

.bookcontainer textarea[name="extra"] {
  height: 8em;
}

.bookcontainer label {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #321306; /* matches your default text color */
  margin-bottom: 0.1em;
}

.bookcontainer h1,
.bookcontainer h2 {
  text-align: center;
}

.file-upload-wrapper {
  position: relative;
  display: inline-block;
}

.file-upload-button {
  background-color: #d35e3d;
  color: #FFF7EC;
  padding: 0.6em 1.4em;
  border: none;
  border-radius: 5px;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;

  cursor: pointer;
  display: inline-block;
}

.file-upload-button:hover {
  background-color: #bb4e2d;
  color: #F4A261;
}


.file-upload-wrapper input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-name-label {
  margin-left: 1rem;
  font-size: 1.2rem;
  color: #321306; /* Same as default site text color */
  font-family: 'Roboto', sans-serif;
}

.submit-btn {
  background-color: #d35e3d;
  color: #FFF7EC;
  padding: 0.4em 1em;
  border-radius: 2em;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
  /* Centering */
  display: block;
  margin: 0.25rem auto 0 auto; /* Top margin, auto sides */
}

.submit-btn:hover {
  background-color: #bb4e2d;
  color: #F4A261;
}

.field-error {
  color: #b00020;
  font-size: 0.95rem;
  margin-top: 0.35rem;   /* close to the input above */
  margin-bottom: 0.9rem; /* push away from the next label */
  line-height: 1.35;
}

.spinner {
  display:inline-block; width:1em; height:1em; margin-left:.5em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation: spin .6s linear infinite; vertical-align:-0.125em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/*
 FAQ and other text pages
*/

.textpage-content-wrapper {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (orientation: portrait) {
.textpage-content-wrapper {
  width: 90%;
  margin: 0 1rem; 0 1rem;
}
}

body.textpage-content h1 {
  text-align: center;
}

/*
  PREVIEW
*/

.email-gate {
  max-width: 520px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff7ec;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

body.preview-content h1 {
  text-align: center;
}

body.preview-content h2 {
  padding: 0 0 0 1rem;
  text-align: center;
}


body.preview-content p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.3;
  padding: 0 0 0 2rem;
}

.preview-segment-wrapper {
  max-width: 1900px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff7ec;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}


.image-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Optional: space between images */
  justify-content: flex-start; /* Align to the left */
  align-items: flex-start;
  padding: 0 0 0 2rem;
}
.image-flow img {
  /*max-width: 200px;*/
  height: auto;
  display: block;
}

.checkout-form-wrapper {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff7ec;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 600px;
  padding: 1.5rem;
  /*background-color: #fff3e8;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);*/
}

.form-grid label {
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0.25rem;
}

.form-grid input,
.form-grid select {
  border: 2px solid #321306;
  border-radius: 4px;
  padding: 0.4em;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 1rem;
}

.giftwrap-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.giftwrap-inline .action-button {
  background-color: #f2d096;
  color: #321306;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 1rem;
}

.giftwrap-inline .action-button:hover {
  background-color: #e5c082;
}

.price-display {
  grid-column: 1 / -1;
  margin-top: 1rem;
  font-weight: bold;
  color: #321306;
}

.checkout-form-wrapper .submit-btn {
  background-color: #d45d38;
  color: white;
  border: none;
  padding: 0.75em 2em;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 2em;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease-in-out;
  margin-top: 1rem;
  align-self: flex-start;
}

.checkout-form-wrapper .submit-btn:hover {
  background-color: #c24e2d;
}

/*
 Terms of Service and Privacy Policy
*/

.legal-content-wrapper {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (orientation: portrait) {
.legal-content-wrapper {
  width: 90%;
  margin: 0 1rem; 0 1rem;
}
}

body.legal-content h1 {
  text-align: center;
}

body.legal-content h2 {
  font-size: 1.3rem;
}

body.legal-content p {
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

body.legal-content ul {
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

body.legal-content li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}