/* ========== Base ========== */
:root{
  --brand-black:#0b0b0b;
  --text:#111;
  --muted:#a7a7a7;
  --accent:#79C34E;        /* brand green used for highlights */
  --btn:#5da93a;           /* primary action green (matches landing CTAs) */
  --btn-hover:#3f7d28;     /* darker green for hover */
  --btn-text:#fff;
  --border:#cfcfcf;
}

html,body{
  height:100%;
}

body.body-4{
  margin:0;
  font-family:"Montserrat","DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

/* ========== Top Navigation ========== */
.navigation{
  background:var(--brand-black);
  width:100%;
}

.navigation .navigation-items{
  max-width:1400px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.navigation img{
  height:36px;
  width:auto;
  display:block;
}

.navigation-wrap{
  margin-left:auto;
}

.w-nav-menu{
  display:flex;
  align-items:center;
  gap:28px;
}

.navigation-item{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.1px;
  font-size:14px;
  line-height:1;
  padding:8px 0;
  transition:opacity .15s ease, color .15s ease, border-color .15s ease;
  border-bottom:2px solid transparent;
}

/* Hover and focus */
.navigation-item:hover,
.navigation-item:focus{
  opacity:.9;
}

/* If you want one link highlighted like “Use Access Code” in green,
   add class="navigation-item w-nav-link is-accent" to that <a> */
.navigation-item.is-accent{
  color:var(--accent);
  border-color:var(--accent);
}

/* ========== Main Section ========== */
.section.cc-store-home-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(10vh); /* viewport minus approx navbar height */
  padding:40px 16px;
}

.intro-header{
  width:100%;
}

.intro-content{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.heading-jumbo{
  font-weight:700;
  font-size:44px;
  line-height:1.15;
  margin:40px 0 28px;
}

/* ========== Form ========== */
.w-form .form-4{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:8px;
}

.text-field-4{
  width:min(560px, 90vw);
  height:46px;
  border:2px solid var(--border);
  border-radius:4px;
  outline:none;
  padding:0 14px;
  font-size:18px;
  letter-spacing:.5px;
  background:#fff;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}

.text-field-4:focus{
  border-color:#9d9d9d;
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

.submit-button{
  display:inline-block;
  border:0;
  border-radius:6px;
  padding:10px 16px;
  background:var(--btn);
  color:var(--btn-text);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:opacity .15s ease, transform .02s ease;
}

.submit-button:hover{ opacity:.92; }
.submit-button:active{ transform:translateY(1px); }

/* ========== Error Message ========== */
.error-message.w-form-fail{
  max-width:min(560px, 90vw);
  margin:8px auto 0;
  background:#fff3f3;
  border:1px solid #f0bcbc;
  color:#a50000;
  border-radius:6px;
  padding:10px 14px;
  font-size:14px;
  text-align:center;
}

/* ========== Small screens ========== */
@media (max-width: 600px){
  .heading-jumbo{ font-size:34px; }
  .w-nav-menu{ gap:18px; }
  .navigation img{ height:32px; }
}

/* ========== Utility (optional) ========== */
/* Turn the last two links into “Log In” and “Sign Up” spacing similar to the mock */
.w-nav-menu .navigation-item:last-child{
  margin-left:6px;
}

/* ========== Logo Group ========== */
.logo-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-text {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.3px;
}

/* ========== Top Navigation Tweaks ========== */
.navigation {
  background-color: #000;
  border-bottom: 1px solid #222;
}

.navigation .navigation-items {
  padding: 10px 24px;
}

.navigation-item {
  color: #fff;
  font-weight: 500;
}

.navigation-item.is-accent {
  color: #79C34E;
  border-color: transparent;
}

.navigation-item:hover {
  opacity: 0.9;
  border-color: transparent;
}

/* ===== Additions for login.html to match index.html ===== */

/* Treat login body like index without changing existing rules */
body.body-7{
  margin:0;
  font-family:"Montserrat","DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

/* Center login section like index */
body.body-7 .section{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 68px);
  padding:40px 16px;
}

/* Constrain inner content */
body.body-7 .container-7{
  width:100%;
  max-width:760px;
  margin:0 auto;
}

/* Headings to mirror .heading-jumbo */
body.body-7 .cc-heading-wrap{
  text-align:center;
  margin-bottom:16px;
}
body.body-7 .cc-heading-wrap h1{
  font-weight:700;
  font-size:44px;
  line-height:1.15;
  margin:40px 0 8px;
}
body.body-7 .paragraph-bigger.cc-bigger-light{
  color:#333;
  font-size:16px;
  margin-bottom:8px;
  text-align:center;
}

/* Form layout and spacing */
body.body-7 .get-in-touch-form-wrap{
  display:flex;
  justify-content:center;
}
body.body-7 .get-in-touch-form{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
body.body-7 .credentials-inputs-wrap{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  align-items:center;
}
body.body-7 .contact-name-field-wrap,
body.body-7 .email-name-field-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  align-items:center;
}

/* Make login inputs look like index inputs */
.text-field.cc-contact-field{
  width:min(560px, 90vw);
  height:46px;
  border:2px solid var(--border);
  border-radius:4px;
  outline:none;
  padding:0 14px;
  font-size:18px;
  letter-spacing:.5px;
  background:#fff;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}
.text-field.cc-contact-field:focus{
  border-color:#9d9d9d;
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

/* Make login submit button match index button */
.primary-button{
  display:inline-block;
  border:0;
  border-radius:6px;
  padding:10px 16px;
  background:var(--btn);
  color:var(--btn-text);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:opacity .15s ease, transform .02s ease;
}
.primary-button:hover{ opacity:.92; }
.primary-button:active{ transform:translateY(1px); }

/* Small screens */
@media (max-width: 600px){
  body.body-7 .cc-heading-wrap h1{ font-size:34px; }
}

/* ===== Align login heading above inputs ===== */
body.body-7 .section {
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 80px;
}

body.body-7 .cc-heading-wrap {
  text-align: center;
  margin-bottom: 32px;
}

body.body-7 .get-in-touch-form-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.body-7 .get-in-touch-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Ensure form fields stay centered */
body.body-7 .credentials-inputs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Slightly reduce label prominence for better balance */
body.body-7 label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  color: #555;
}

/* ===== Align Login header position with other pages ===== */
body.body-7 .section {
  padding-top: 40px; /* lowered from ~80px to match other pages */
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.welcome-page-wrap{
  min-height:calc(100vh - 68px);
}

.welcome-heading{
  margin-bottom:16px;
}

.welcome-copy{
  max-width:760px;
  margin:0 auto;
  font-size:18px;
  line-height:1.7;
  color:#333;
}

.welcome-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:32px;
  flex-wrap:wrap;
}

.welcome-button{
  min-width:160px;
  text-align:center;
  text-decoration:none;
}

@media (max-width: 600px){
  .welcome-copy{
    font-size:16px;
  }

  .welcome-actions{
    flex-direction:column;
    align-items:center;
  }

  .welcome-button{
    width:min(280px, 90vw);
  }
}