/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --background-color: #f1e9e7;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #131313;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;

  /* fonts - Updated to use strict font requirements */
  --body-font-family: "Aref Ruqaa Ink", serif;
  --heading-font-family: "Inria Serif", serif;
  --misc-font-family: "Fira Sans", sans-serif;

  /* body sizes */
  --body-font-size-m: 22px;
  --body-font-size-s: 19px;
  --body-font-size-xs: 17px;

  /* heading sizes */
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;

  /* nav height */
  --nav-height: 77px;
}

/* fallback fonts - Updated for new font stack */
@font-face {
  font-family: inria-serif-fallback;
  size-adjust: 95%;
  src: local('Times New Roman'), local('serif');
}

@font-face {
  font-family: aref-ruqaa-ink-fallback;
  size-adjust: 100%;
  src: local('Times New Roman'), local('serif');
}

@font-face {
  font-family: fira-sans-fallback;
  size-adjust: 99.529%;
  src: local('Arial'), local('sans-serif');
}

@media (width >= 900px) {
  :root {
    /* body sizes */
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;

    /* heading sizes */
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: 1.25;
  scroll-margin: 40px;
}

/* Enhanced heading hierarchy with Inria Serif weights */
h1 { 
  font-size: var(--heading-font-size-xxl); 
  font-weight: 700; /* Bold for main titles */
}

h2 { 
  font-size: var(--heading-font-size-xl); 
  font-weight: 700; /* Bold for section headers */
}

h3 { 
  font-size: var(--heading-font-size-l); 
  font-weight: 400; /* Regular for subsection headers */
}

h4 { 
  font-size: var(--heading-font-size-m); 
  font-weight: 400; /* Regular for smaller headers */
  font-style: italic; /* Italic for distinction */
}

h5 { 
  font-size: var(--heading-font-size-s); 
  font-weight: 300; /* Light for minor headers */
}

h6 { 
  font-size: var(--heading-font-size-xs); 
  font-weight: 300; /* Light for smallest headers */
  font-style: italic; /* Light italic for subtle headers */
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--body-font-family);
}

code,
pre {
  font-size: var(--body-font-size-s);
  font-family: var(--misc-font-family);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
  font-family: var(--misc-font-family);
  font-weight: 400; /* Regular for form inputs */
}

/* Enhanced form element styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-weight: 400; /* Regular Fira Sans for inputs */
}

input[type="submit"],
input[type="button"] {
  font-weight: 600; /* SemiBold for input buttons */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Global Hyperlink Styles */
a:link {
  color: #50a788; /* Changed from #b04028 to teal green */
  text-decoration: underline;
}

a:visited {
  color: #b04028; /* Changed from #50a788 to brick red */
  text-decoration: underline;
}

a:hover {
  color: #d59124; /* Remains golden orange */
  text-decoration: underline;
}

a:active {
  color: #d59124; /* Remains golden orange */
  text-decoration: underline;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font-family: var(--misc-font-family);
  font-style: normal;
  font-weight: 600; /* SemiBold for buttons */
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: var(--link-color);
  color: var(--background-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  background-color: var(--link-hover-color);
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
  font-weight: 500; /* Medium for secondary buttons */
  text-transform: none; /* No uppercase for secondary */
  letter-spacing: normal;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 40px 0;
}

main > .section > div {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

main > .section:first-of-type {
  margin-top: 0;
}

/* Rescale image wrapper - match default-content-wrapper sizing exactly */
.rescaleimage-wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

@media (width >= 900px) {
  main > .section > div {
    padding: 0 32px;
  }
  
  /* Rescale image wrapper desktop sizing */
  .rescaleimage-wrapper {
    padding: 0 32px;
  }
}

/* Add this to your existing mobile media query section */
@media (max-width: 768px) {
  /* Reduce main heading sizes for mobile */
  h1 { 
    font-size: var(--heading-font-size-xl); /* Reduced from xxl */
  }

  h2 { 
    font-size: var(--heading-font-size-l); /* Reduced from xl */
  }

  h3 { 
    font-size: var(--heading-font-size-m); /* Reduced from l */
  }

  h4 { 
    font-size: var(--heading-font-size-s); /* Reduced from m */
  }

  h5 { 
    font-size: var(--heading-font-size-xs); /* Reduced from s */
  }

  h6 { 
    font-size: var(--body-font-size-m); /* Use body size for smallest */
  }

  /* Reduce phrasing block heading sizes for mobile */
  .phrasing-wrapper .content-heading {
    font-size: clamp(1.25rem, 5vw, 1.75rem); /* Reduced from 1.75rem-2.25rem */
    line-height: 1.3; /* Slightly increased for better readability */
  }

  .phrasing-wrapper .content-heading.large {
    font-size: clamp(1.5rem, 5.5vw, 2rem); /* Specific size for large variant */
  }

  .phrasing-wrapper .content-heading.medium {
    font-size: clamp(1.125rem, 4.5vw, 1.5rem); /* Specific size for medium variant */
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

/**
 * Phrasing Block CSS - Shared for both left and right phrasing variants
 * Updated to strictly use: Inria Serif for titles, Aref Ruqaa Ink for regular text, Fira Sans for misc
 */

/* Block-specific variables */
.phrasing-wrapper {
  --ph-spacing-unit: clamp(20px, 2vw, 30px);
  --ph-text-color: #131313;
  --ph-bg-white: #fff;
  
  /* Custom color palette */
  --ph-dark-blue: #3c3f49;
  --ph-light-beige: #f0e9e7;
  --ph-teal-green: #50a788;
  --ph-brick-red: #b04028;
  --ph-golden-orange: #d59124;
  --ph-green-25: #e0f5ed;
  --ph-terracotta-25: #f7c19d;
  
  /* Container styling */
  display: block;
  position: relative;
  margin-top: calc(var(--ph-spacing-unit) * 2);
  margin-bottom: calc(var(--ph-spacing-unit) * 2);
  width: 100%;
}

/* Base block structure */
.phrasing-wrapper .media-text-block {
  display: grid;
  grid-template-rows: auto;
  margin-left: calc(var(--ph-spacing-unit) * -1);
  margin-right: calc(var(--ph-spacing-unit) * -1);
  max-width: none;
  gap: calc(var(--ph-spacing-unit) * 2);
  position: relative;
  overflow: visible;
  color: var(--ph-text-color);
  margin-block-start: var(--ph-spacing-unit);
  margin-block-end: 0;
  clear: both;
  margin-bottom: 0;
  z-index: 1;
  padding: calc(var(--ph-spacing-unit) * 2) calc(var(--ph-spacing-unit) * 1.5);
  padding-left: calc(var(--ph-spacing-unit) * 2);
  padding-right: calc(var(--ph-spacing-unit) * 2);
  background-color: transparent !important;
}

/* Make sure the grid is set correctly */
.phrasing-wrapper.left .media-text-block.initialized {
  grid-template-columns: 60% auto !important;
  align-items: center;
}

.phrasing-wrapper.right .media-text-block.initialized {
  grid-template-columns: auto 60% !important;
  align-items: center;
}

/* Typography - STRICTLY using Inria Serif for titles */
.phrasing-wrapper .content-heading {
  font-family: "Inria Serif", serif;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: inherit;
}

/* Regular text - STRICTLY using Aref Ruqaa Ink */
.phrasing-wrapper .content-text {
  font-family: "Aref Ruqaa Ink", serif;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  color: inherit;
}

/* Enhanced typography variations for different contexts */
.phrasing-wrapper .content-heading.large {
  font-weight: 700; /* Bold for large headings */
}

.phrasing-wrapper .content-heading.medium {
  font-weight: 400; /* Regular for medium headings */
  font-style: italic; /* Add italic for variety */
}

.phrasing-wrapper .content-text.emphasis {
  font-weight: 700; /* Bold Aref Ruqaa Ink for emphasis */
}

.phrasing-wrapper .content-text.light {
  font-weight: 400; /* Regular weight for light text */
}

/* Media container */
.phrasing-wrapper .media-container {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Position media container based on left/right variant */
.phrasing-wrapper.left .media-container {
  grid-column: 1;
}

.phrasing-wrapper.right .media-container {
  grid-column: 2;
}

.phrasing-wrapper .media-container img {
  max-width: 100%;
  height: auto;
  display: block;
  box-shadow: none;
}

/* Content container */
.phrasing-wrapper .content-container {
  padding: 0 calc(var(--ph-spacing-unit));
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

/* Position content container based on left/right variant */
.phrasing-wrapper.left .content-container {
  grid-column: 2;
}

.phrasing-wrapper.right .content-container {
  grid-column: 1;
}

/* Button styles - STRICTLY using Fira Sans for miscellaneous text */
.phrasing-wrapper .button-container {
  display: flex;
  margin-top: 1.5rem;
}

.phrasing-wrapper .button-wrapper {
  margin-right: 1rem;
}

.phrasing-wrapper .primary-button {
  font-family: "Fira Sans", sans-serif;
  display: inline-block;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600; /* SemiBold for primary buttons */
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid transparent;
  text-transform: uppercase; /* Add uppercase for button emphasis */
  letter-spacing: 0.5px; /* Slight letter spacing for readability */
}

.phrasing-wrapper .secondary-button {
  font-family: "Fira Sans", sans-serif;
  display: inline-block;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 400; /* Regular for secondary buttons */
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 2px solid currentColor;
  background-color: transparent;
}

/* Button color variations based on background */
.phrasing-wrapper[data-color="dark-blue"] .primary-button {
  background-color: var(--ph-teal-green);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="teal-green"] .primary-button {
  background-color: var(--ph-brick-red);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="brick-red"] .primary-button {
  background-color: var(--ph-golden-orange);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="golden-orange"] .primary-button {
  background-color: var(--ph-dark-blue);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="light-beige"] .primary-button {
  background-color: var(--ph-dark-blue);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="green-25"] .primary-button {
  background-color: var(--ph-dark-blue);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="terracotta-25"] .primary-button {
  background-color: var(--ph-dark-blue);
  color: var(--ph-bg-white);
}

.phrasing-wrapper .primary-button:hover {
  background-color: var(--ph-dark-blue);
  color: var(--ph-bg-white);
}

/* Background color extension */
.phrasing-wrapper {
  position: relative;
  overflow: hidden;
}

/* Set data-color on the wrapper instead of the block */
.phrasing-wrapper[data-color="dark-blue"]::before {
  background-color: var(--ph-dark-blue);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="light-beige"]::before {
  background-color: var(--ph-light-beige);
}

.phrasing-wrapper[data-color="teal-green"]::before {
  background-color: var(--ph-teal-green);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="brick-red"]::before {
  background-color: var(--ph-brick-red);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="golden-orange"]::before {
  background-color: var(--ph-golden-orange);
  color: var(--ph-bg-white);
}

.phrasing-wrapper[data-color="green-25"]::before {
  background-color: var(--ph-green-25);
}

.phrasing-wrapper[data-color="terracotta-25"]::before {
  background-color: var(--ph-terracotta-25);
}

.phrasing-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 1;
}

/* Position the background extension based on left/right variant */
.phrasing-wrapper.left::before {
  left: 0;
}

.phrasing-wrapper.right::before {
  right: 0;
}

/* Image placeholder - using Fira Sans for misc text */
.phrasing-wrapper .image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fira Sans", sans-serif;
}

.phrasing-wrapper .image-placeholder::after {
  content: 'Image';
  color: #999;
  font-size: 1rem;
  font-family: "Fira Sans", sans-serif;
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
  /* Reset wrapper overflow for mobile */
  .phrasing-wrapper {
    overflow: visible;
    margin-top: 0;
    margin-bottom: calc(var(--ph-spacing-unit) * 2);
  }
  
  /* Remove the ::before pseudo-element on mobile */
  .phrasing-wrapper::before {
    display: none;
  }
  
  /* Add a new ::after pseudo-element for the horizontal color bar */
  .phrasing-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px; /* Adjusted for better overlap with images */
    z-index: 0;
  }
  
  /* Apply colors to the ::after element */
  .phrasing-wrapper[data-color="dark-blue"]::after {
    background-color: var(--ph-dark-blue);
  }
  
  .phrasing-wrapper[data-color="light-beige"]::after {
    background-color: var(--ph-light-beige);
  }
  
  .phrasing-wrapper[data-color="teal-green"]::after {
    background-color: var(--ph-teal-green);
  }
  
  .phrasing-wrapper[data-color="brick-red"]::after {
    background-color: var(--ph-brick-red);
  }
  
  .phrasing-wrapper[data-color="golden-orange"]::after {
    background-color: var(--ph-golden-orange);
  }
  
  .phrasing-wrapper[data-color="green-25"]::after {
    background-color: var(--ph-green-25);
  }
  
  .phrasing-wrapper[data-color="terracotta-25"]::after {
    background-color: var(--ph-terracotta-25);
  }
  
  /* Adjust the media-text-block for mobile */
  .phrasing-wrapper .media-text-block {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    gap: 0;
    margin-top: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }
  
  .phrasing-wrapper .media-text-block.initialized {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    display: grid !important;
  }
  
  /* Position media container in the middle */
  .phrasing-wrapper .media-container {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    padding-top: 40px; /* Reduced from 100px to create more overlap */
    width: 100%; /* Full width to ensure image can span properly */
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    z-index: 1;
  }
  
  .phrasing-wrapper .media-container img,
  .phrasing-wrapper .media-container picture {
    width: 83%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  
  /* Force both left and right variants to show image first on mobile */
  .phrasing-wrapper.left .media-container,
  .phrasing-wrapper.right .media-container {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
  }
  
  .phrasing-wrapper.left .content-container,
  .phrasing-wrapper.right .content-container {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
  }
  
  /* Position content container at the bottom */
  .phrasing-wrapper .content-container {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
    width: 83%;
    max-width: 83%;
    margin: 0 auto;
    padding: 0;
    padding-top: calc(var(--ph-spacing-unit) * 2);
    padding-bottom: calc(var(--ph-spacing-unit) * 2);
    z-index: 1;
    display: block !important; /* Ensure block display */
  }
  
  /* Ensure content takes full width within container */
  .phrasing-wrapper .content-container > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Adjust heading and text sizes for mobile */
  .phrasing-wrapper .content-heading {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    margin-bottom: 1rem;
    text-align: left;
    line-height: 1.2;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .phrasing-wrapper .content-text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    text-align: left;
    line-height: 1.6;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Left align buttons on mobile */
  .phrasing-wrapper .button-container {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
  }
  
  .phrasing-wrapper .button-wrapper {
    margin-bottom: 0.5rem;
    margin-left: 0;
  }
  
  .phrasing-wrapper .primary-button,
  .phrasing-wrapper .secondary-button {
    display: inline-block;
    margin-left: 0;
    text-align: center;
  }
}