/* =============================================================================
   Riterly Brand Overrides
   Source of truth: docs/branding/BRAND_VISUALS.md
   Scope: colors and typography only.
   Load order: appended last in global-styling library, after styles.css and
   colors.css, so overrides win on equal specificity without !important except
   where the original also uses it.
   ============================================================================= */

/* Google Fonts — DM Serif Display (marketing headlines) + Inter (UI and body).
   Lora is excluded here; it is the editor product font, not the marketing site. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500&display=swap');

/* =============================================================================
   Brand tokens — override theme CSS custom properties
   ============================================================================= */

:root {
  /* Replace theme defaults (Gordita / DM Sans / dark grey palette) */
  --primary-color:   #04342C; /* Deep teal — nav sticky bg, active states */
  --secondary-color: #5F5E5A; /* Charcoal   — paragraph text               */
  --hover-color:     #0F6E56; /* Teal        — hover states                 */
  --primary-font:    'DM Serif Display', Georgia, serif;
  --secondary-font:  'Inter', system-ui, sans-serif;

  /* Full Riterly palette for use in this file */
  --riterly-deep-teal:  #04342C; /* rgb(4, 52, 44)     Hero bg, nav, dark base     */
  --riterly-teal:       #0F6E56; /* rgb(15, 110, 86)   Borders, dividers, surfaces */
  --riterly-mid-teal:   #1D9E75; /* rgb(29, 158, 117)  CTAs, buttons, pos. status  */
  --riterly-light-teal: #9FE1CB; /* rgb(159, 225, 203) Subheads on dark            */
  --riterly-off-white:  #F1EFE8; /* rgb(241, 239, 232) Light mode bg               */
  --riterly-stone:      #D3D1C7; /* rgb(211, 209, 199) Body text on dark           */
  --riterly-near-black: #2C2C2A; /* rgb(44, 44, 42)    Primary text on light       */
  --riterly-charcoal:   #5F5E5A; /* rgb(95, 94, 90)    Secondary text, captions    */
}

/* =============================================================================
   Typography
   ============================================================================= */

/* Headlines — DM Serif Display, weight 400.
   Brand spec: two weights only (400 / 500), never 600 or 700.
   Positive letter-spacing replaced with slight negative tracking on large sizes. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--riterly-near-black);
  letter-spacing: 0;
}

h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.01em; }

/* Body — Inter */
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--riterly-near-black);
  background-color: var(--riterly-off-white);
}

p {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--riterly-charcoal);
}

/* Links — Inter; near-black default, mid teal on hover */
a {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--riterly-near-black);
}

a:hover {
  color: var(--riterly-mid-teal);
}

.form-dark input,
.form-dark textarea,
.form-dark select {
  background-color: var(--riterly-off-white);
  color: var(--riterly-near-black);
}

.form-dark label {
  color: var(--riterly-off-white) !important;
  font-weight: bold;
}

.form-dark .form-text,
.form-dark .description {
  color: var(--riterly-near-black);
}

.form-dark .description {
  display: block;
  margin-bottom: 50px;
}

/* =============================================================================
   Global surfaces
   ============================================================================= */

/* Off-white base — warmer than pure white per brand spec */
#page,
#main-wrapper {
  background-color: var(--riterly-off-white);
}

.coming-soon h2 span {
  -webkit-text-stroke: unset;
  color: var(--riterly-charcoal);
}

#clockdiv .brand-logo svg {
  max-height: 65px;
  width: auto;
}

/* Active-trail nav item background on off-white pages */
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background-color: var(--riterly-off-white);
}

.sidebar .block {
  background-color: var(--riterly-off-white);
  border-color: var(--riterly-stone);
}

/* =============================================================================
   Navigation / Header
   The sticky fixed-top nav gets background-color: var(--primary-color) in
   styles.css, which now resolves to deep teal via the :root override above.
   The following rules handle dropdown menus and explicit nav text colours.
   ============================================================================= */

/* Dropdown menus on deep teal nav */
.header .dropdown-menu {
  background-color: var(--riterly-deep-teal);
}

.header .dropdown-menu a {
  color: var(--riterly-off-white);
}

.header .dropdown-menu a:hover {
  color: var(--riterly-light-teal);
  background-color: rgba(15, 110, 86, 0.35); /* --riterly-teal at 35% opacity */
}

/* Nav links on deep teal — off-white */
.header .navbar-nav .nav-link,
.nav-link {
  color: var(--primary-color) !important;
}

@media (min-width: 767.98px) {
  .header .navbar-nav .nav-link,
  .nav-link {
    color: var(--riterly-off-white) !important;
  }
}

.header .navbar-brand.cl-logo img {
  max-height: 75px;
  width: auto;
}

/* Region header — off-white text on deep teal */
.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--riterly-off-white);
}

/* =============================================================================
   Buttons — mid teal for all CTAs
   Brand spec: "CTAs, primary buttons, positive status → #1D9E75 (mid teal)"
   styles.css ties button colors to var(--primary-color); by overriding the
   variable we'd get deep teal on buttons. We want mid teal instead, so every
   button selector is explicitly overridden here.
   ============================================================================= */

.btn {
  background-color: var(--riterly-mid-teal);
  border-color: var(--riterly-mid-teal);
  color: var(--riterly-off-white);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
}

.btn:hover,
.btn:focus {
  background-color: var(--riterly-teal);
  border-color: var(--riterly-teal);
  color: var(--riterly-off-white);
}

.btn-primary {
  background-color: var(--riterly-mid-teal);
  border-color: var(--riterly-mid-teal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--riterly-teal) !important;
  border-color: var(--riterly-teal) !important;
  color: var(--riterly-off-white) !important;
}

/* btn-style-1 — filled, mid teal */
.btn-style-1-sm,
.btn-style-1-md,
.btn-style-1-lg {
  background-color: var(--riterly-mid-teal);
  border-color: var(--riterly-mid-teal);
  color: var(--riterly-off-white) !important;
}

.btn-style-1-sm:hover,
.btn-style-1-md:hover,
.btn-style-1-lg:hover,
.btn-style-1-sm:focus,
.btn-style-1-md:focus,
.btn-style-1-lg:focus {
  background-color: var(--riterly-off-white) !important;
  border-color: var(--riterly-mid-teal) !important;
}

.btn-style-1-sm:hover span,
.btn-style-1-md:hover span,
.btn-style-1-lg:hover span,
.btn-style-1-sm:focus span,
.btn-style-1-md:focus span,
.btn-style-1-lg:focus span {
  color: var(--riterly-mid-teal) !important;
}

.btn-style-1-sm .icon,
.btn-style-1-md .icon,
.btn-style-1-lg .icon {
  background-color: var(--riterly-off-white);
}

.btn-style-1-sm:hover .icon,
.btn-style-1-md:hover .icon,
.btn-style-1-lg:hover .icon,
.btn-style-1-sm:focus .icon,
.btn-style-1-md:focus .icon,
.btn-style-1-lg:focus .icon {
  background-color: var(--riterly-mid-teal);
}

.btn-style-1-sm svg,
.btn-style-1-md svg,
.btn-style-1-lg svg {
  fill: var(--riterly-mid-teal);
}

.btn-style-1-sm svg path,
.btn-style-1-md svg path,
.btn-style-1-lg svg path {
  fill: var(--riterly-mid-teal);
}

/* btn-style-2 — ghost/outline, mid teal */
.btn-style-2-sm,
.btn-style-2-md,
.btn-style-2-lg {
  color: var(--riterly-mid-teal) !important;
  border-color: var(--riterly-mid-teal);
}

.btn-style-2-sm:hover,
.btn-style-2-md:hover,
.btn-style-2-lg:hover {
  background-color: var(--riterly-mid-teal);
  border-color: var(--riterly-mid-teal);
  color: var(--riterly-off-white) !important;
}

.btn-style-2-sm .icon,
.btn-style-2-md .icon,
.btn-style-2-lg .icon {
  background-color: var(--riterly-mid-teal);
}

.btn-style-2-sm:hover .icon,
.btn-style-2-md:hover .icon,
.btn-style-2-lg:hover .icon {
  background-color: var(--riterly-off-white);
}

.btn-style-2-sm:hover svg path,
.btn-style-2-md:hover svg path,
.btn-style-2-lg:hover svg path {
  fill: var(--riterly-mid-teal);
}

/* =============================================================================
   Pagination
   ============================================================================= */

.page-link,
.page-link:hover {
  color: var(--riterly-mid-teal);
}

.page-item.active .page-link {
  background-color: var(--riterly-deep-teal);
  border-color: var(--riterly-deep-teal);
  color: var(--riterly-off-white);
}

/* =============================================================================
   Footer
   ============================================================================= */

.site-footer {
  background: var(--riterly-deep-teal);
  color: var(--riterly-stone);
}

.footer h2, .footer h3 {
  color: var(--riterly-off-white);
}

/* =============================================================================
   Page banner (inner pages)
   ============================================================================= */

.page-banner::before {
  background-color: var(--riterly-deep-teal);
  opacity: 0.85;
}

.page-banner .title h1 {
  color: var(--riterly-off-white);
}

.media-and-text [class*="media-and-text-content-"] {
  display: flex;
}

.media-and-text .media-and-text-content--stacked {
  flex-direction: column;
  gap: 10px;
}

.media-and-text .media-and-text-content--media-left {
  flex-direction: row;
}

.media-and-text .media-and-text-content--media-right {
  flex-direction: row-reverse;
}

.media-and-text .media-and-text-content--media-left .text-copy {
  padding-left: 16px;
}

.media-and-text .media-and-text-content--media-right .text-copy {
  padding-right: 16px;
}

.media-and-text .media-and-text-content[data-ratio="50_50"] .media-item,
.media-and-text .media-and-text-content[data-ratio="50_50"] .text-copy {
  flex: 0 0 50%;
}

.media-and-text .media-and-text-content[data-ratio="60_40"] .media-item {
  flex: 0 0 60%;
}
.media-and-text .media-and-text-content[data-ratio="60_40"] .media-item img {
  width: 100%;
  height: auto;
}
.media-and-text .media-and-text-content[data-ratio="60_40"] .text-copy {
  flex: 0 0 40%;
}

.media-and-text .media-and-text-content[data-ratio="40_60"] .media-item {
  flex: 0 0 40%;
}
.media-and-text .media-and-text-content[data-ratio="40_60"] .media-item img {
  width: 100%;
  height: auto;
}
.media-and-text .media-and-text-content[data-ratio="40_60"] .text-copy {
  flex: 0 0 60%;
}

.media-and-text .field--type-image {
  float: none;
  margin: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .media-and-text .media-and-text-content {
    flex-direction: column !important;
  }
  .media-and-text .media-and-text-content[data-ratio] > * {
    flex: 0 0 100% !important;
  }
}

.cta-2 svg {
  display: none;
}

.cta-2 .image::after {
  background-color: var(--riterly-charcoal);
}


div#sliding-popup {
  background-color: var(--riterly-mid-teal);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  div#sliding-popup .popup-content.eu-cookie-compliance-content {
    margin-top: 32px;
  }
}

div#sliding-popup .popup-content.eu-cookie-compliance-content h2,
div#sliding-popup .popup-content.eu-cookie-compliance-content p,
div#sliding-popup .popup-content.eu-cookie-compliance-content button {
  color: var(--riterly-off-white);
}

div#sliding-popup .agree-button, div#sliding-popup .decline-button {
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
}

div#sliding-popup .agree-button {
  color: var(--riterly-off-white);
}

div#sliding-popup .decline-button {
  color: var(--riterly-near-black);
}


/************************************************************************
 *********************** Node page overrides ****************************
 ***********************************************************************/
.page-node-164 section.about-style-2-contact h2 {
 color: var(--riterly-mid-teal);
}

.page-node-164 section.about-style-2-contact p {
  color: var(--riterly-off-white);
}

.page-node-164 .about-style-2-contact .contact form .form-item-beta-commitment small {
  margin-left: 0.5em;
}