/**
 * Theme Name:  App Custom Theme
 * Description: Custom theme for application.
 * Version:     0.2.0-20250916T1650sgt
 *
 * @link https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
 */

/* BEGIN: CSS custom properties (variables) */
:root {
  --app-primary: #4291d6;
  --app-secondary: #e60ff1;

  --app-border-radius: 1rem;
}
/* CLOSE: CSS custom properties (variables) */


/* BEGIN: Containers */
html,
body {
  font-size: 16px; /* fix base font size for easier computation of rem units */
  height: 100%;
  margin: 0;
  padding: 0;
}
/* CLOSE: Containers */


/* BEGIN: Colors & Gradients */
.color-primary {
  color: var(--app-primary);
}

.color-secondary {
  color: var(--app-secondary);
}

.btn-gradient {
  background: linear-gradient(90deg, var(--app-primary) 0%, var(--app-secondary) 100%);
  border: none;
  color: white;
}

.text-gradient {
  background: linear-gradient(180deg, var(--app-primary) 0%, var(--app-secondary) 100%); /* gradient not obvious at 90deg */
  background-clip: text;
  color: var(--app-primary);
  -webkit-text-fill-color: transparent;
}
/* CLOSE: Colors & Gradients */


/* BEGIN: Forms */
.form-label {
  font-weight: bold;
}

/* See https://contactform7.com/styling-contact-form/ for styling of Contact Form 7 */
.wpcf7-spinner {
  display: block;
  margin: 1rem auto;
}

.wpcf7-not-valid-tip {
  text-shadow: white 0 0 0.5rem; /* add text shadow as red text is illegible on colored backgrounds */
}

.wpcf7 form .wpcf7-response-output {
  border-radius: var(--bs-border-radius);
  margin: 0;
  padding: 0.5rem;
  text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-green);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
  color: var(--bs-red);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  color: var(--bs-orange);
}
/* CLOSE: Forms */


/* BEGIN: Navigation & Links */
.nav-link:hover,
.nav-link.active:hover {
  color: var(--bs-gray-700);
  filter: brightness(85%);
}

.btn:hover,
.button:hover {
  filter: brightness(85%);
}
/* CLOSE: Navigation & Links */


/* BEGIN: Generic Sections */
.section-background {
  background: url('assets/images/background.jpg');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: auto;
  min-height: 480px;
}

.section-wrapper {
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: var(--app-border-radius);
  color: white;
  padding: 4rem;
}

.section-top { /* class to be applied to all topmost sections to buffer for navbar */
  padding: 7rem 0 4rem 0;
}
/* CLOSE: Generic Sections */


/* BEGIN: Banner section */
.section-banner {
  background: url('assets/images/banner.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
}
@media (max-width: 991.98px) { /* smaller than lg breakpoint */
  .section-banner {
    background-position: center top; /* change to top else white background appears when navbar toggle is clicked */
  }
}

.navbar {
  padding-top: 0;
}

.navbar .container {
  border-radius: 0 0 0.5rem 0.5rem;
}

.navbar-logo {
  height: 50px;
}

@media (max-width: 991.98px) { /* smaller than lg breakpoint */
  .nav-item {
    text-align: right;
  }
}

.nav-link {
  color: black;
  font-weight: bold;
}
/* CLOSE: Banner section */


/* BEGIN: Purpose section */
.section-purpose img {
  border-radius: var(--app-border-radius);
}
/* CLOSE: Purpose section */


/* BEGIN: Campaign Flow section */
.section-campaign {
  background: url('assets/images/campaign-background.jpg');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: auto;
}

.section-campaign img {
  border-radius: var(--app-border-radius);
}
/* CLOSE: Campaign Flow section */


/* BEGIN: Collaboration section */
.section-collaboration img {
  border-radius: var(--app-border-radius);
}
/* CLOSE: Collaboration section */


/* BEGIN: Rally section */
.section-rally {
  background: url('assets/images/background.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto;
  padding: 6rem 0 8rem 0;
}
/* CLOSE: Rally section */


/* BEGIN: Contact Us section */
.section-contact {
  background: linear-gradient(180deg, var(--app-primary) 0%, #220f66 100%);
  margin-top: -4rem;
  padding: 5rem;
}

.section-contact .icon-circle {
  align-items: center;
  border: 0.15rem solid white;
  border-radius: 50%;
  display: flex;
  height: 3rem;
  justify-content: center;
  min-width: 3rem; /* needed else on md breakpoint, long email address will squeeze this into an oval */
  width: 3rem;
}
/* CLOSE: Contact Us section */


/* BEGIN: Entries section */
.section-entries {
  background: url('assets/images/campaign-background.jpg');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: auto;
  min-height: 80vh;
}

.entry {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid white;
  border-radius: var(--app-border-radius);
  padding: 0.5rem;
}

.entry-video {
  max-height: 20rem;
  max-width: 100%;
}
/* CLOSE: Entries section */


/* BEGIN: Footer */
footer {
  background-color: var(--app-primary);
  color: white;
  padding: 1rem;
  text-align: center;
}
/* CLOSE: Footer */