/* ================================
Developed by ForVera Media LLC. All rights reserved.
Developed by Christian Connett
Last Updated: Mar 22, 2025
https://forveramedia.com
================================== */

/* ================================
  GLOBAL RESET & BASE STYLES
================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f5f8fc;
  color: #333;
  padding: 40px;
}

/* ================================
  CONTAINER & PAGE WRAPPER
================================== */
.container {
  max-width: 900px;
  margin: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.5);
  overflow: hidden;
  border: 2px solid #ddd; /* Light gray border */
  border-radius: 10px;     /* Optional: rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Optional: subtle depth */
  background-color: #fff; /* Optional: background inside border */
  box-sizing: border-box;
}

/* ================================
  HEADER & LOGO SECTION
================================== */
.header {
  background-color: #968063; /* Base background color */
  background-image: url('https://forveramedia.com/cc/img/texture.png'); /* Your small PNG */
  background-repeat: repeat; /* Repeat texture across the entire element */
  background-size: auto; /* Or specify size if needed */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); /* Optional: subtle depth */
  padding: 30px;
  text-align: center;
  color: #fff;
}

.logo {
  height: 100px;
  display: block;
  margin: 0 auto 20px auto;
}

.header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.header .subtitle {
  font-size: 1.2rem;
  margin-top: 10px;
}

/* ================================
  MAIN CONTENT LAYOUT
================================== */
.content {
  padding: 30px;
}

.top-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.cover-img {
  width: 300px;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px; /* Optional: rounds corners for a polished look */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.cover-img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.intro {
  flex: 1;
  min-width: 250px;
}

.bottom-content {
  margin-top: 0; /* Adjust if needed */
}

.top-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.author-img {
  width: 250px; /* Adjust width as needed */
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px; /* space between author image and cover */
}

.cover-img {
  width: 250px; /* matching width to author image */
  height: auto;
  border-radius: 5px;
}




/* ================================
  TEXT STYLES
================================== */
h2 {
  margin-bottom: 15px;
  color: #827b71;
  font-size: 1.5rem;
  text-align: center;
}

p {
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 1rem;
}

.benefits {
  margin-bottom: 25px;
  list-style-type: disc;
  padding-left: 20px;
}

.benefits li {
  margin-bottom: 10px;
}

.highlight {
  margin-bottom: 1.5rem;
}


/* ================================
  FORM STYLES
================================== */
	input[type="text"],
	input[type="email"],
	textarea {
	width: 100%;
	padding: 0.75rem;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	margin-bottom: 1rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Label Styles */
label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 1rem;
}

/* Hover and Focus Effect */
	input[type="text"]:hover,
	input[type="email"]:hover,
	textarea:hover,
	input[type="text"]:focus,
	input[type="email"]:focus,
	textarea:focus {
	transform: scale(1.02);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border-color: #a88581; /* Optional: gives a subtle focus cue */
	outline: none; /* Removes default outline for cleaner look */
}


/* FALLBACK MESSAGE =========*/
.fallback-message {
  margin-top: 1rem;
  color: #a4784d;
  font-weight: bold;
  text-align: center;
}
.fallback-message a {
  color: #5394e4;
  text-decoration: underline;
}
.fallback-message a:hover {
  color: #41a64f;
}


/* ================================
  BUTTONS
================================== */
.cta-btn {
  padding: 0.75rem 1.5rem;
  background-color: #41a64f;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }

.cta-btn:hover {
  background-color: #a4784d;
  transition: background-color 0.3s ease;
  transform: scale(1.02);
  font-weight: bold;
}

/* Link Buttons */
.link-btn {
  display: inline-block;
  margin: 10px 10px 0 0;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.amazon-btn {
  padding: 0.75rem 1.5rem;
  background-color: #FF9900;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.amazon-btn:hover {
	color: #fff;
	background-color: #a4784d;
	transition: background-color 0.3s ease;
	transform: scale(1.02);
}

.website-btn {
  padding: 0.75rem 1.5rem;
  font-weight: normal;
  color: #fff;
  background-color: #5394e4;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.website-btn:hover {
  color: #fff;
  background-color: #a4784d;
  transition: background-color 0.3s ease;
  transform: scale(1.02);
}



/* ================================
  FORM FEEDBACK
================================== */
.success-message {
  display: none;
  margin-top: 1rem;
  color: green;
  font-weight: bold;
}

/* ================================
  AUTHOR SECTION
================================== */
.author-section {
  width: 100%;
  padding: 2rem;
  background-color: #f9f9f9;
  border-top: 1px solid #ccc;
  margin-top: 2rem;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
}

.author-section h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #827b71;
  text-align: center;
}

.author-section p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: justify;
}

/* ================================
  FOOTER
================================== */
.footer {
  text-align: center;
  padding: 1rem;
  background-color: #f8f8f8;
  font-size: 0.875rem; /* Adjust as needed */
  color: #555;
  border-top: 1px solid #ddd;
}
.footer a {
  color: #555;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* ================================
  STATUS MESSAGE
================================== */
.success-message {
  display: none;
  color: green;
  margin-top: 1rem;
  font-weight: bold;
}

/* ================================
  LINKS + EXTERNAL ICONS
================================== */
a {
  text-decoration: none;
  color: #0077cc;
  position: relative;
  transition: color 0.3s ease;
}

a:hover {
  color: #005fa3;
}

a:hover::after {
  transform: translateY(-2px);
}

/* =====================================
   BUTTON SIZE CONSISTENCY (NEW ADDITION)
======================================== */

.cta-btn, .link-btn {
  display: inline-block;
  text-align: center;
  min-width: 250px; /* Adjust width as needed */
  padding: 0.75rem 1.5rem; /* Matches existing button styles */
  font-size: 1rem; /* Matches existing button font size */
  font-weight: bold; /* Ensures consistent boldness */
  border-radius: 5px; /* Matching rounded corners */
  box-sizing: border-box; /* Ensures consistent sizing */
  margin: 10px 0; /* Adds spacing between buttons */
}

/* Ensures link buttons match the CTA button exactly */
.amazon-btn {
  background-color: #FF9900;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.amazon-btn:hover {
  background-color: #a4784d;
  color: #fff;
  transition: background-color 0.3s ease;
  transform: scale(1.02);
}

.website-btn {
  background-color: #5394e4;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.website-btn:hover {
  background-color: #a4784d;
  color: #fff;
  transition: background-color 0.3s ease;
  transform: scale(1.02);
}



/* ================================
  RESPONSIVE (Mobile Layout)
================================== */
@media screen and (max-width: 768px) {
  .top-content {
    flex-direction: column;
    align-items: center;
  }

  .cover-img {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
  }

  .intro {
    text-align: center;
  }

  .link-btn {
    width: 100%;
    margin: 10px 0;
    text-align: center;
  }
}