/* =====================================================
   THE SAVAGE SAINTS
   CONTACT PAGE
===================================================== */


/* =====================================================
   PAGE RESET
===================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
}

html{
  scroll-behavior:smooth;
}

body.contact-page{
  --forest-deep:#071f15;
  --forest:#0f3d2a;
  --forest-light:#246b49;
  --cream:#fffaf0;
  --cream-deep:#f3e8ce;
  --gold:#d9b45f;
  --gold-dark:#9a6819;
  --ink:#183224;
  --muted:#64736a;
  --danger:#a33a32;

  color:var(--ink);
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:
    linear-gradient(
      135deg,
      rgba(5,28,18,.82),
      rgba(8,48,31,.65) 48%,
      rgba(4,25,16,.9)
    ),
    url("/media/blueridgeministry.webp") center / cover fixed;
}

body.contact-page::before{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  content:"";
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(217,180,95,.17),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(58,133,91,.18),
      transparent 34%
    );
}

[hidden]{
  display:none !important;
}

button,
input,
select,
textarea{
  font:inherit;
}


/* =====================================================
   CONTACT PAGE SHELL
===================================================== */

.contact-main{
  display:flex;
  justify-content:center;
  width:100%;
  min-height:calc(100vh - 100px);
  padding:clamp(42px,7vw,92px) 20px;
}

.contact-shell{
  position:relative;
  width:min(100%,1120px);
  overflow:hidden;
  border:1px solid rgba(244,213,139,.6);
  background:
    linear-gradient(
      145deg,
      rgba(255,252,244,.98),
      rgba(248,238,215,.97)
    );
  box-shadow:
    0 42px 100px rgba(0,14,8,.48),
    0 0 0 8px rgba(255,255,255,.035),
    inset 0 1px rgba(255,255,255,.95);
}

.contact-shell::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:2;
  height:7px;
  content:"";
  background:
    linear-gradient(
      90deg,
      #765018,
      #e7ca7a 30%,
      #fff0ad 50%,
      #d1a848 72%,
      #765018
    );
}

.contact-shell::after{
  position:absolute;
  top:0;
  right:0;
  width:340px;
  height:340px;
  pointer-events:none;
  content:"";
  opacity:.5;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(217,180,95,.23),
      transparent 66%
    );
}


/* =====================================================
   CONTACT HEADING
===================================================== */

.contact-heading{
  position:relative;
  isolation:isolate;
  padding:
    clamp(52px,7vw,88px)
    clamp(24px,8vw,92px)
    clamp(42px,6vw,65px);
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(
      135deg,
      rgba(7,38,25,.98),
      rgba(17,74,49,.94)
    );
}

.contact-heading::before{
  position:absolute;
  inset:0;
  z-index:-2;
  content:"";
  opacity:.2;
  background:
    url("/media/blueridgeministry.webp") center 45% / cover;
}

.contact-heading::after{
  position:absolute;
  inset:0;
  z-index:-1;
  content:"";
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(239,207,124,.22),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(4,24,15,.18),
      rgba(4,24,15,.72)
    );
}

.contact-kicker{
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin:0 0 17px;
  color:#efd998;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.contact-kicker::before,
.contact-kicker::after{
  width:38px;
  height:1px;
  content:"";
  background:
    linear-gradient(
      90deg,
      transparent,
      #d9b45f
    );
}

.contact-kicker::after{
  transform:rotate(180deg);
}

.contact-heading h1{
  margin:0;
  color:#fffaf0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.8rem,7vw,5.3rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.035em;
  text-shadow:0 5px 24px rgba(0,0,0,.32);
}

.contact-heading > p:last-child{
  max-width:720px;
  margin:23px auto 0;
  color:rgba(255,250,240,.82);
  font-size:clamp(.98rem,2vw,1.1rem);
  line-height:1.8;
}


/* =====================================================
   CONTACT FORM
===================================================== */

.contact-form{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  padding:
    clamp(36px,6vw,68px)
    clamp(24px,8vw,92px)
    clamp(48px,8vw,84px);
}

.contact-field-full{
  grid-column:1 / -1;
}


/* =====================================================
   CONTACT FORM SECTIONS
===================================================== */

.contact-section{
  position:relative;
  min-width:0;
  margin:0;
  padding:clamp(27px,4vw,40px);
  border:1px solid rgba(23,71,48,.18);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(255,250,240,.76)
    );
  box-shadow:
    0 16px 35px rgba(14,51,34,.075),
    inset 0 1px rgba(255,255,255,1);
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.contact-section::before{
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:0;
  content:"";
  background:
    linear-gradient(
      180deg,
      #f0d88e,
      #a87622
    );
  transition:height .35s ease;
}

.contact-section:focus-within{
  border-color:rgba(169,120,32,.46);
  box-shadow:
    0 22px 48px rgba(14,51,34,.12),
    0 0 0 1px rgba(217,180,95,.14),
    inset 0 1px rgba(255,255,255,1);
  transform:translateY(-2px);
}

.contact-section:focus-within::before{
  height:100%;
}

.contact-section legend{
  max-width:calc(100% - 26px);
  padding:0 14px;
  color:var(--forest);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.3rem,3vw,1.72rem);
  font-weight:700;
  line-height:1.2;
}

.contact-section-description{
  max-width:690px;
  margin:0 0 25px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}

.contact-section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 22px;
}


/* =====================================================
   CONTACT FIELDS
===================================================== */

.contact-field{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.contact-field label{
  margin-bottom:9px;
  color:#214632;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.075em;
  line-height:1.4;
  text-transform:uppercase;
}

.contact-field label span{
  margin-left:5px;
  color:#7e8982;
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.04em;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;
  border:1px solid rgba(15,61,42,.24);
  border-radius:0;
  color:var(--ink);
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fffdf8
    );
  outline:none;
  box-shadow:
    inset 0 1px 2px rgba(10,42,27,.035),
    0 1px rgba(255,255,255,.8);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    transform .22s ease;
}

.contact-field input,
.contact-field select{
  min-height:58px;
  padding:0 17px;
}

.contact-field select{
  padding-right:48px;
  appearance:none;
  cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,#3f684f 50%),
    linear-gradient(135deg,#3f684f 50%,transparent 50%),
    linear-gradient(180deg,#ffffff,#fffdf8);
  background-position:
    calc(100% - 22px) 26px,
    calc(100% - 16px) 26px,
    center;
  background-repeat:no-repeat;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
}

.contact-field textarea{
  min-height:230px;
  padding:17px;
  line-height:1.65;
  resize:vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:#929d96;
  opacity:1;
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover{
  border-color:rgba(169,120,32,.55);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-color:#ad7b22;
  background-color:#ffffff;
  box-shadow:
    0 0 0 4px rgba(217,180,95,.18),
    0 10px 25px rgba(15,61,42,.08);
  transform:translateY(-1px);
}

.contact-field.is-invalid input,
.contact-field.is-invalid select,
.contact-field.is-invalid textarea{
  border-color:var(--danger);
  background:#fffafa;
  box-shadow:0 0 0 4px rgba(163,58,50,.1);
}

.contact-error{
  display:block;
  min-height:18px;
  margin-top:7px;
  color:var(--danger);
  font-size:.77rem;
  font-weight:800;
  line-height:1.35;
}

.contact-field-footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
}

#contactMessageCount{
  flex:none;
  margin-top:7px;
  color:#76847b;
  font-size:.75rem;
  font-variant-numeric:tabular-nums;
}


/* =====================================================
   CONTACT CHOICES
===================================================== */

.contact-choice-group{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}

.contact-choice{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-height:126px;
  margin:0;
  padding:21px 18px;
  overflow:hidden;
  border:1px solid rgba(15,61,42,.2);
  color:#586b60;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fffaf0
    );
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,61,42,.045);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    color .22s ease;
}

.contact-choice::before{
  position:absolute;
  inset:auto 0 0;
  z-index:-1;
  height:4px;
  content:"";
  background:
    linear-gradient(
      90deg,
      #9c6b1b,
      #efd686,
      #9c6b1b
    );
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}

.contact-choice:hover{
  border-color:rgba(185,140,53,.7);
  box-shadow:0 15px 30px rgba(15,61,42,.1);
  transform:translateY(-3px);
}

.contact-choice:hover::before,
.contact-choice:has(input:checked)::before{
  transform:scaleX(1);
}

.contact-choice:has(input:checked){
  border-color:#bd903a;
  color:#3e5849;
  background:
    linear-gradient(
      145deg,
      #fffdf7,
      #fff4d9
    );
  box-shadow:
    0 0 0 3px rgba(217,180,95,.15),
    0 15px 30px rgba(15,61,42,.1);
  transform:translateY(-3px);
}

.contact-choice input{
  flex:none;
  width:19px;
  height:19px;
  margin:2px 0 0;
  accent-color:#17603f;
}

.contact-choice span{
  display:block;
  color:inherit;
  font-size:.83rem;
  line-height:1.55;
  text-transform:none;
}

.contact-choice strong{
  display:block;
  margin-bottom:6px;
  color:#173f2b;
  font-size:.88rem;
  font-weight:900;
  letter-spacing:.02em;
}


/* =====================================================
   CONDITIONAL SECTIONS
===================================================== */

#contactTimeField:not([hidden]),
#prayerPrivacySection:not([hidden]){
  animation:contactReveal .38s ease both;
}

@keyframes contactReveal{

  from{
    opacity:0;
    transform:translateY(-10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


/* =====================================================
   CONTACT NOTICE
===================================================== */

.contact-notice{
  position:relative;
  overflow:hidden;
  padding:27px 30px 27px 34px;
  border:1px solid rgba(169,120,32,.24);
  border-left:5px solid var(--gold);
  color:#53675b;
  background:
    linear-gradient(
      105deg,
      rgba(237,212,145,.23),
      rgba(255,255,255,.7)
    );
  box-shadow:0 12px 28px rgba(15,61,42,.055);
}

.contact-notice::after{
  position:absolute;
  top:-45px;
  right:-35px;
  width:150px;
  height:150px;
  border:1px solid rgba(169,120,32,.12);
  content:"";
  transform:rotate(45deg);
}

.contact-notice h2{
  margin:0 0 11px;
  color:var(--forest);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.28rem;
}

.contact-notice p{
  position:relative;
  z-index:1;
  margin:7px 0 0;
  font-size:.84rem;
  line-height:1.65;
}


/* =====================================================
   CONTACT ACTIONS
===================================================== */

.contact-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:10px;
}

.contact-submit{
  position:relative;
  isolation:isolate;
  min-width:min(100%,310px);
  min-height:62px;
  padding:0 34px;
  overflow:hidden;
  border:1px solid #f1d180;
  border-radius:0;
  color:#ffffff;
  font-size:.9rem;
  font-weight:950;
  letter-spacing:.085em;
  text-transform:uppercase;
  background:
    linear-gradient(
      180deg,
      #287650 0%,
      #0e432d 58%,
      #092f20 100%
    );
  box-shadow:
    0 17px 34px rgba(15,61,42,.28),
    inset 0 1px rgba(255,255,255,.23),
    inset 0 -2px rgba(0,0,0,.14);
  cursor:pointer;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;
}

.contact-submit::before{
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-70%;
  z-index:-1;
  width:42%;
  content:"";
  opacity:.65;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );
  transform:skewX(-22deg);
  transition:left .55s ease;
}

.contact-submit:hover::before,
.contact-submit:focus-visible::before{
  left:130%;
}

.contact-submit:hover,
.contact-submit:focus-visible{
  transform:translateY(-3px);
  box-shadow:
    0 22px 42px rgba(15,61,42,.38),
    0 0 0 4px rgba(217,180,95,.16),
    inset 0 1px rgba(255,255,255,.24);
  outline:none;
}

.contact-submit:active{
  transform:translateY(-1px);
}

.contact-submit:disabled{
  opacity:.65;
  cursor:wait;
  transform:none;
}

.contact-actions p{
  max-width:650px;
  margin:19px 0 0;
  color:#69786e;
  font-size:.8rem;
  line-height:1.6;
  text-align:center;
}

.contact-actions a{
  color:var(--forest);
  font-weight:850;
  text-decoration-color:#c49b48;
  text-underline-offset:4px;
}


/* =====================================================
   CONTACT STATUS
===================================================== */

.contact-status{
  position:relative;
  padding:19px 22px;
  border:1px solid rgba(15,61,42,.25);
  color:#17482f;
  font-weight:800;
  line-height:1.55;
  text-align:center;
  background:
    linear-gradient(
      135deg,
      #edf8f0,
      #f7fcf8
    );
  box-shadow:0 12px 28px rgba(15,61,42,.08);
  animation:contactReveal .35s ease both;
}

.contact-status.is-error{
  border-color:rgba(157,41,36,.32);
  color:#8d2521;
  background:
    linear-gradient(
      135deg,
      #fff0ed,
      #fff8f6
    );
}

.contact-honeypot{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* =====================================================
   CONTACT PAGE TABLET
===================================================== */

@media(max-width:860px){

  .contact-choice-group{
    grid-template-columns:1fr;
  }

  .contact-choice{
    min-height:auto;
  }

}


/* =====================================================
   CONTACT PAGE MOBILE
===================================================== */

@media(max-width:680px){

  body.contact-page{
    background-attachment:scroll;
  }

  .contact-main{
    padding:24px 11px 44px;
  }

  .contact-shell{
    border-right:0;
    border-left:0;
  }

  .contact-heading{
    padding:
      48px
      20px
      40px;
  }

  .contact-kicker{
    gap:8px;
    letter-spacing:.14em;
  }

  .contact-kicker::before,
  .contact-kicker::after{
    width:20px;
  }

  .contact-form{
    gap:22px;
    padding:
      28px
      15px
      48px;
  }

  .contact-section{
    padding:24px 16px;
  }

  .contact-section legend{
    padding:0 8px;
  }

  .contact-section-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .contact-field-full{
    grid-column:auto;
  }

  .contact-field input,
  .contact-field select{
    min-height:56px;
  }

  .contact-field textarea{
    min-height:200px;
  }

  .contact-choice{
    padding:18px 16px;
  }

  .contact-notice{
    padding:23px 18px 23px 22px;
  }

  .contact-submit{
    width:100%;
    min-width:0;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }

}


/* =====================================================
   COMPACT CONTACT FORM SIZING
   ADD TO THE BOTTOM OF THE CONTACT CSS
===================================================== */

.contact-main{
  padding:clamp(28px,4vw,52px) 20px;
}

.contact-shell{
  width:min(100%,900px);
}

.contact-heading{
  padding:
    clamp(34px,4vw,50px)
    clamp(24px,6vw,62px)
    clamp(30px,4vw,42px);
}

.contact-heading h1{
  font-size:clamp(2.45rem,5vw,4rem);
}

.contact-heading > p:last-child{
  max-width:630px;
  margin-top:17px;
  font-size:1rem;
  line-height:1.65;
}

.contact-form{
  gap:22px;
  padding:
    clamp(28px,4vw,44px)
    clamp(24px,6vw,62px)
    clamp(38px,5vw,56px);
}

.contact-section{
  padding:clamp(20px,3vw,29px);
}

.contact-section legend{
  font-size:clamp(1.2rem,2.4vw,1.48rem);
}

.contact-section-description{
  margin-bottom:18px;
}

.contact-section-grid{
  gap:18px;
}

.contact-field input,
.contact-field select{
  min-height:50px;
  padding-right:14px;
  padding-left:14px;
}

.contact-field select{
  padding-right:42px;
  background-position:
    calc(100% - 20px) 22px,
    calc(100% - 14px) 22px,
    center;
}

.contact-field textarea{
  min-height:165px;
  padding:14px;
}

.contact-choice{
  min-height:102px;
  padding:16px 14px;
}

.contact-notice{
  padding:21px 24px 21px 28px;
}

.contact-submit{
  min-width:min(100%,260px);
  min-height:54px;
}

@media(max-width:680px){

  .contact-main{
    padding:20px 10px 38px;
  }

  .contact-heading{
    padding:38px 18px 32px;
  }

  .contact-heading h1{
    font-size:clamp(2.25rem,12vw,3.2rem);
  }

  .contact-form{
    gap:18px;
    padding:24px 14px 40px;
  }

  .contact-section{
    padding:20px 14px;
  }

  .contact-field input,
  .contact-field select{
    min-height:50px;
  }

  .contact-field textarea{
    min-height:170px;
  }

}