/**
 * @file basic-page.css
 * General page styles: webforms, basic content pages, utility classes.
 */

/* ══════════════════════════════════════════════════════════════════
   PROSE / NODE BODY CONTENT
   Scoped styles for h2, h3, ul, ol, li, p inside article body.
   Restores typographic rhythm stripped by the * { margin:0; padding:0 } reset.
   ══════════════════════════════════════════════════════════════════ */

/* Content width constraint for readability */
.page-content {
  /* max-width: 860px; */
  padding: 0 3% 3rem;
}

article .layout__region--content p {
  color: var(--gmu-dark-gray);
  line-height: 1.75;
  margin-bottom: 1rem;
  font-size: var(--font-size-16);
}

article .layout__region--content h2,
article .layout__region--content h2.title {
  font-family: var(--font-heading);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  display: block;
  width: fit-content;
  border-bottom: 2px solid var(--gmu-accent-yellow);
  padding-bottom: 0.35rem;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}

article .layout__region--content h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-dark-gray);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

article .layout__region--content h4 {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-dark-gray);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

article .layout__region--content ul,
article .layout__region--content ol {
  padding-left: 1.75rem;
  margin-bottom: 1rem;
}

article .layout__region--content ul {
  list-style: disc;
}

article .layout__region--content ol {
  list-style: decimal;
}

article .layout__region--content li {
  margin-bottom: 0.4rem;
  line-height: 1.65;
  color: var(--gmu-dark-gray);
  font-size: var(--font-size-16);
}

article .layout__region--content a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
  text-decoration-color: var(--gmu-accent-yellow);
  text-underline-offset: 2px;
}

article .layout__region--content a:hover {
  color: var(--gmu-dark-gray);
}

article .layout__region--content strong {
  font-weight: var(--font-weight-bold);
  color: var(--gmu-black);
}

article .layout__region--content em {
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE TITLE
   ══════════════════════════════════════════════════════════════════ */
.page-title,
h1.page-header {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-32);
  color: var(--gmu-primary-green);
  margin: 1.5rem 0 1rem;
  border-bottom: 3px solid var(--gmu-accent-yellow);
  padding-bottom: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   WEBFORM STYLES
   ══════════════════════════════════════════════════════════════════ */

/* Outer container */
.webform-submission-form {
  /* max-width: 720px; */
  margin: 0 auto;
  padding: 0 0 2rem;
}

/* Intro text / processed-text element */
.webform-submission-form .js-form-type-processed-text p {
  color: var(--gmu-dark-gray);
  font-size: var(--font-size-16);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* Each field row */
.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
  margin-bottom: 1.25rem;
}

/* Labels */
.webform-submission-form label,
.webform-submission-form .control-label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-16);
  color: var(--gmu-primary-green);
  margin-bottom: 0.35rem;
}

/* Required asterisk */
.webform-submission-form label .form-required,
.webform-submission-form .form-required::after {
  color: #c0392b;
  margin-left: 2px;
}

/* Field descriptions */
.webform-submission-form .description,
.webform-submission-form .form-item--description {
  font-size: var(--font-size-14);
  color: #666;
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* Text inputs, textareas, selects */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="url"],
.webform-submission-form textarea,
.webform-submission-form select,
.webform-submission-form .form-control {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  color: var(--gmu-black);
  background: #fafafa;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}

.webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="email"]:focus,
.webform-submission-form input[type="url"]:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {
  border-color: var(--gmu-primary-green);
  box-shadow: 0 0 0 3px rgba(0, 82, 57, 0.12);
  outline: none;
  background: #fff;
}

/* Textarea */
.webform-submission-form textarea {
  resize: vertical;
  min-height: 130px;
}

/* Select — custom chevron */
.webform-submission-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23005239' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Placeholder */
.webform-submission-form input::placeholder,
.webform-submission-form textarea::placeholder {
  color: #999;
  font-size: var(--font-size-14);
}

/* Submit / action buttons */
.webform-submission-form .webform-actions,
.webform-submission-form .form-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gmu-light-gray);
}

.webform-submission-form .button--primary,
.webform-submission-form input[type="submit"],
.webform-submission-form button[type="submit"] {
  background: var(--gmu-primary-green);
  color: var(--gmu-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-16);
  padding: 0.65rem 2rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.18s ease;
  letter-spacing: 0.02em;
}

.webform-submission-form .button--primary:hover,
.webform-submission-form input[type="submit"]:hover,
.webform-submission-form button[type="submit"]:hover {
  background: #003d29;
}

/* Confirmation / success message */
.webform-confirmation {
  /* max-width: 720px; */
  margin: 2rem auto;
  padding: 1.25rem 1.5rem;
  background: #eef7f3;
  border-left: 4px solid var(--gmu-primary-green);
  border-radius: 3px;
  font-size: var(--font-size-16);
  line-height: 1.7;
  color: var(--gmu-dark-gray);
}

.webform-confirmation strong {
  color: var(--gmu-primary-green);
}

/* Error messages */
.webform-submission-form .form-item--error input,
.webform-submission-form .form-item--error textarea,
.webform-submission-form .form-item--error select {
  border-color: #c0392b;
}

.webform-submission-form .form-item--error-message {
  color: #c0392b;
  font-size: var(--font-size-14);
  margin-top: 0.25rem;
}


/* ── Location page: override prose rules ── */
.location-todays-hours .location-todays-hours__title {
  color: white !important;
  border-bottom: none !important;
  width: auto !important;
}
.location-quick-links .location-quick-links__title {
  color: var(--gmu-accent-yellow, #ffc733) !important;
  border-bottom: none !important;
}
.location-quick-links .location-quick-link {
  color: white !important;
  text-decoration: none !important;
}