/*
Theme Name: Rest'Eau 2026
Theme URI: http://theodagency.com
Description: Theme for Rest'Eau 2026
Author: Ollie Stott
Author URI: http://theodagency.com
Version: 1.0.0
*/

/* ==========================================
   ROOT
========================================== */

:root {
  --font-body: 'Montserrat', sans-serif;

  --color-primary: #000;
  --color-primary-dark: #000;
  --color-primary-alt: #000;
  --color-secondary: #31a8e6;
  --color-accent: #1dd8d7;
  --color-link: #2fa3ea;
  --color-text: #2e2e2e;
  --color-text-dark: #3c3c3b;
  --color-white: #fff;

  --impact-bg-start: #323d98;
  --impact-bg-end: #32a7e5;
  --impact-card-bg: #313d98;
  --impact-btn-bg: #31d1d4;
  --impact-btn-bg-hover: #21bfc2;
  --impact-btn-text: #2f3f96;
  --impact-badge-bg: #f0eeeb;
  --impact-badge-text: #4368bf;

  --radius-pill: 999px;
  --radius-card: 2rem;
  --radius-soft: 10px;
  --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.12);
  --shadow-photo: 0 14px 30px rgba(0, 0, 0, 0.1);
  --shadow-badge: 0 10px 24px rgba(0, 0, 0, 0.08);

  --transition-default: all 0.25s ease;
  --impact-orb-scale: 1.35;
}

@media screen and (min-width: 768px) {
	:root {
	  --radius-image-left: 80px 0 0 80px;
	}	
}

@media screen and (max-width: 767px) {
	.fa-2x {
	    font-size: 1.5em!important;
	}
}

/* ==========================================
   BASE
========================================== */

body {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {	
	font-family: "Parisienne", cursive;
}

h2 {
  font-size: 4em;
	line-height: 0.9em;
}

h4.label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.2em;
}


.navbar-nav .nav-link.active,
.navbar-nav .current-menu-item > a,
.navbar-nav .current_page_item > a {
  font-weight: 700;
  opacity: 1;
}

.btn, .nf-form-content input[type=submit] {
	border-radius: 0;
    font-size: 0.9em!important;
    font-weight: 600!important;
    padding: 10px 20px!important;
	text-transform: uppercase!important;
}

button {
	box-shadow: none;
}

.btn-outline-primary {
	border: thin solid #4A9CAF!important;
	color: #4A9CAF!important;
}

.btn-primary, .btn-primary:hover {
	border: thin solid #4A9CAF!important;
	background: #4A9CAF;
	color: #fff!important;
}

.btn-outline-primary:hover {
	background: #4A9CAF!important;
	color: #fff!important;
}

a {
	color: #000!important;
}

/* TRANSITIONS */

#header {
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;	
}

/* ==========================================
   HEADER
========================================== */

#header.headroom--top {
    background: rgba(197, 220, 226, 0.2);
	color: #fff;
}

#header.headroom--top a {
	color: #fff!important;
}

#header.headroom--not-top nav {
    background: rgba(197, 220, 226, 1);
}

.navbar-nav li a {
  color: var(--color-text-dark);
  text-decoration: none;
  padding: 0 10px;
  font-weight: 500;
}

a.header-language-link {
    padding: 0 5px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

a.header-language-link.is-active {
    font-weight: 700;
}

a.header-social-link {
    font-size: 1.2em;
    padding: 0 2px;
    color: #000;
}

.navbar-toggler {
	box-shadow: none!important;
}

#mobileNav {
    background: #4A9CAF;
    color: #fff;
}

#mobileNav li a {
	color: #fff!important;	
}

#reservecta {
    position: absolute;
    bottom: 0;
    z-index: 9999;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
	font-size: 1.1em;
}

/* SECTION */
.reservation-section {
  background: #efefef;
  padding-top: 110px !important;
  padding-bottom: 110px !important;
}

/* TYPOGRAPHY */
.reservation-title {
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  color: #111;
}

.reservation-intro {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.45rem;
  color: #3e3e3e;
}

/* CARDS */
.reservation-card, .reservation-form-wrap {
  background: #fff;
  padding: 40px 30px;
  height: 100%;
}

.reservation-icon i {
  font-size: 34px;
  color: #111;
}


.reservation-form-title {
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 2rem;
}

/* =========================
   NINJA FORM STYLING
========================= */

/* Labels */
.nf-form-content label {
  font-weight: 600;
  margin-bottom: 6px;
}

/* Inputs + selects + textarea */
.nf-form-content input:not([type=button]),
.nf-form-content select,
.nf-form-content textarea {
  width: 100%;
  border: 1px solid #ccc;
  padding: 14px 12px;
  background: #fff;
  font-size: 15px;
  transition: all 0.2s ease;
}

/* Focus */
.nf-form-content input:focus,
.nf-form-content select:focus,
.nf-form-content textarea:focus {
  outline: none;
  border-color: #b85b24;
  box-shadow: none;
}

/* Textarea height */
.nf-form-content textarea {
  min-height: 120px;
}

/* Two column layout spacing fix */
.nf-form-content .nf-field-container {
  margin-bottom: 20px;
}

/* Submit button */
.nf-form-content input[type=submit] {
  width: 100%;
  background: #b85b24;
  color: #fff;
  border: none;
  padding: 16px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

/* Hover */
.nf-form-content input[type=submit]:hover {
  background: #8f4519;
}

/* Remove weird Ninja spacing */
.nf-form-content .nf-row {
  margin-left: -10px;
  margin-right: -10px;
}
	
.nf-form-fields-required {
    margin-bottom: 20px;
}

.nf-form-content .nf-field {
  padding-left: 10px;
  padding-right: 10px;
}
	
@media screen and (max-width:767px) {
.reservation-card, .reservation-form-wrap {
  padding: 10px;
}
}