/* ==========================
  Contact Section Variables
============================= */
:root {
  /* Section Spacing */
  --contact-mt: var(--nav-height);  /* size of navbar at top */
  --contact-gap-x: 0rem;            /* gap between left-side and right-side */

  /* Left-Side Spacing */
  --contact-left-gap-y: 2rem;     /* gap between header and form */
  --contact-pad-top-y: 3rem;      /* left-side top padding */
  --contact-pad-x: 3rem;          /* left-side side padding */
  --contact-pad-bottom-y: 5rem;   /* left-side bottom padding */
  --contact-head-gap-y: 1rem;     /* gap between title and sub-title */

  /* Left-Side Header Typography */
  --contact-title-size: 48px;       /* size of title */
  --contact-title-weight: 800;      /* weight of title */
  --contact-title-color: #000;    /* color of title */
  --contact-sub-size: 20px;         /* size of sub-title */
  --contact-sub-line: 1.75;         /* line size of sub-title */
  --contact-sub-weight: 600;        /* weight of sub-title */
  --contact-sub-color: #000;      /* color of sub-title */

  /* Title underline bar */
  --contact-title-underline-w: 300px;                     /* width of underline bar */
  --contact-title-underline-h: 5px;                       /* height of underline bar */
  --contact-title-underline-mt: 0rem;                     /* margin between underline bar and letter */
  --contact-title-underline-color: rgba(193,164,81,1);  /* underline color */
  --contact-title-underline-radius: 9999px;               /* underline radius */

  /* Left-Side Form Spacing */
  --contact-form-gap-y: 1.5rem;             /* gap between input fields */
  --contact-form-field-gap-y: 0.25rem;    /* gap between input field and label */

  /* Left-Side Form Label */
  --label-size: 18px;     /* size of label font */
  --label-fg: #000;     /* color of font */
  --help-size: 12px;      /* size of help msg */
  --help-fg: #2a2a2a;   /*  color of help msg */
  
  /* Left-Side Input Fields */
  --field-w: 100%;                /* width of input & textarea */
  --field-border-radius: 5px;     /* radius of input & textarea */
  --field-border: #2a2a2a;      /* border color */
  --field-bg: #fff;             /* background color */
  --field-fg: #000;             /* font color */
  --field-pad-x: 0.75rem;         /* inner side padding */
  --field-pad-y: 1rem;            /* inner top and bottom padding */
  --field-focus-bg: #e8f1fe;    /* focused background color */
  
  /* Left-Side Checkbox */
  --check-gap-x: 0.25rem;                   /* gap between checkbox and label */
  --check-font-size: 12px;                  /* size of checkbox label */
  --check-color: #000;                    /* color of label */
  --check-line: 1.25;                       /* line size of lavel */
  --check-size: 20px;                       /* size of checkbox */
  --checked-color: rgba(193,164,81,1);    /* checked color */
  --check-link-color: #000;               /* link color */

  /* Left-Side Send Button */
  --send-w: 12rem;                          /* width of button */
  --send-pad-y: 0.75rem;                    /* vertical inner padding */
  --send-size: 18px;                        /* font size */
  --send-weight: 900;                       /* font weight */
  --btn-bg: #000;                         /* btn background */
  --btn-fg: #fff;                         /* btn font color */
  --btn-bg-hover: rgba(193,164,81,1);     /* btn-hover-background */
  --btn-fg-hover: #fff;                   /* btn-hover font color */

  /* Right-Side Spacing */
  --tile-m: 3rem;                                     /* margin around image tile */
  --tile-radius: 20px;                                /* image corner radius */
  --tile-bg: url("/assets/img/photos/contact_form_tile.jpg");   /* image background */
  --tile-bg-cover: rgba(0,0,0,0.4);                 /* image background cover */

  /* Right-Side Info Spacing */
  --info-blur: blur(6px);     /* amount of blur */
  --info-radius: 20px;        /* blur corner radius */
  --info-pad-y: 2rem;         /* blurred vertical padding around info */
  --info-pad-x: 2rem;         /* blurred horizontal padding around info */
  --info-list-gap: 0.5rem;    /* gap between list elements */

  /* Right-Side Info Typography */
  --info-list-size: 16px;                     /* font size */
  --info-list-muted: #b7b7b7;               /* muted font color */
  --info-list-color: #fff;                  /* font color */
  --info-list-hover: rgba(193,164,81,1);    /* font hover color */
}

/* ================
  Contact Section
=================== */
.contact {
  margin: var(--nav-height) 0 0;
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--contact-gap-x);
}

.hidden { position: absolute !important; left: -9999px; }

/* ========================
  Left-Side: Contact Form
=========================== */
.contact-left {
  display: grid;
  gap: var(--contact-left-gap-y);
  min-width: 0;
  padding: var(--contact-pad-top-y) 0 var(--contact-pad-bottom-y) var(--contact-pad-x);
}

/* ==================
  Left-Side: Header
===================== */
.contact-header {
  display: grid;
  gap: var(--contact-head-gap-y);
}

.contact-header h1 {
  font-size: var(--contact-title-size);
  font-weight: var(--contact-title-weight);
  color: var(--contact-title-color);
  margin: 0;
}

.contact-header h1::after {
    content: "";
    display:block;
    width: var(--contact-title-underline-w);
    height: var(--contact-title-underline-h);
    margin-top: var(--contact-title-underline-mt);
    background: var(--contact-title-underline-color);
    border-radius: var(--contact-title-underline-radius);
}

.contact-header p {
  font-size: var(--contact-sub-size);
  line-height: var(--contact-sub-line);
  font-weight: var(--contact-sub-weight);
  color: var(--contact-sub-color);
  margin: 0;
}

/* ================
  Left-Side: Form
=================== */
.contact-form {
  display: grid;
  gap: var(--contact-form-gap-y);
}

.form-field {
  display: grid;
  gap: var(--contact-form-field-gap-y);
}

.form-field label {
  font-size: var(--label-size);
  color: var(--label-fg);
}

.form-field input,
.form-field textarea {
  width: min(100%, var(--field-w, 100%));
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--field-border-radius);
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-fg);
  padding: var(--field-pad-y) var(--field-pad-x);
  outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.form-field textarea {
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #2a2a2a;
}

.form-field input:focus,
.form-field textarea:focus {
  background: var(--field-focus-bg);
}

.help-text {
  font-size: var(--help-size);
  color: var(--help-fg);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--check-gap-x);
  font-size: var(--check-font-size);
  color: var(--check-color);
  line-height: var(--check-line);
}

.form-check input[type="checkbox"] {
  width: var(--check-size); height: var(--check-size);
  accent-color: var(--checked-color);
}

.form-check a {
  color: var(--check-link-color);
  text-decoration: underline;
}

.btn-send {
  width: var(--send-w);
  display: inline-block;
  border: transparent;
  border-radius: 999px;
  padding: var(--send-pad-y) 0;
  font-size: var(--send-size);
  font-weight: var(--send-weight);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background-color .2s ease;
}

.btn-send:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

/* =======================
  Right-Side: Image Tile
========================== */
.contact-right {
  min-width: 0;
}

.contact-img-tile {
  display: grid;
  position:relative;
  overflow: hidden;
  justify-self: center;
  align-self: center;
  place-items: center;
  overflow: hidden;
  width: calc(100% - (var(--tile-m) * 2));
  height: calc(100% - (var(--tile-m) * 2));
  margin: var(--tile-m);
  background: var(--tile-bg) center / cover no-repeat;
  border-radius: var(--tile-radius);
}

.contact-img-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tile-bg-cover);
  z-index: 1;
  pointer-events: none;
}

/* =========================
  Right-Side: Info Section
============================ */
.contact-info {
  position: relative;
  z-index: 1;
  backdrop-filter: var(--info-blur);
  -webkit-backdrop-filter: var(--info-blur);
  border-radius: var(--info-radius);
  padding: var(--info-pad-y) var(--info-pad-x);
  text-align: center;
}

.contact-info ul {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--info-list-gap);
  font-size: var(--info-list-size);
}

.contact-info li {
  color: var(--info-list-muted);
}

.contact-info a {
  color: var(--info-list-color);
  text-decoration: none;
}

.contact-info a:hover {
  color: var(--info-list-hover)
}