/* 
Theme Name: Patient Genius
Theme URI: 
Description: Patient Genius is a child theme of Hello Elementor
Author: Koda Digital
Author URI: https://kodadigital.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: patient-genius
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*=============================================
=            TABLE OF CONTENTS                =
=============================================*/

/**
 * 1.0 - Global Styles
 * 1.1 - CSS Variables
 * 1.2 - Body & HTML
 * 1.3 - Typography
 * 2.0 - Layout & Structure
 * 2.1 - Header
 * 2.2 - Navigation
 * 2.3 - Footer
 * 3.0 - Reusable Components
 * 3.1 - Buttons
 * 3.2 - Forms
 * 3.3 - Client Logos
 * 3.4 - Hover Cards
 * 4.0 - Page-Specific Styles
 * 4.1 - Homepage
 */


/*=============================================
=            1.0 - GLOBAL STYLES              =
=============================================*/


/*----------  1.1 - CSS Variables  ----------*/

/*
 * ----------------------------------------------------------------------------
 * To ensure site-wide consistency, reduce maintenance time, and eliminate styling
 * inconsistencies, this website is built on a variable-driven system. All design 
 * tokens—such as colors, fonts, and spacing units—are defined as CSS Custom 
 * Properties (variables). These variables are then linked to Elementor's Global 
 * Site Settings. 
 */
:root {
  /* ==========================================================================
     Color Palette
     Source: Section 3 of the Style Guide
	 These are also hardcoded in Elementor due to not being able to set variables for globals.
	 Elementor > Site Settings > Global Colors
     ========================================================================== */

  /* Primary Colors (Style Guide 3.1) */
  --pg-color-primary-teal: #2DB5B8; /* Vibrant Teal */
  --pg-color-primary-charcoal: #212934; /* Dark Charcoal */

  /* Secondary/Accent Colors (Style Guide 3.2) */
  --pg-color-accent-blue: #00529B; /* Confident Blue: Used for primary buttons (CTAs) and links. */
  --pg-color-accent-blue-dark: #00407A; /* Derived 15% darker shade for button hover states. */
  --pg-color-accent-amber: #F7A600; /* Premium Amber: Used for non-interactive accents. */

  /* Neutral Colors (Style Guide 3.3) */
  --pg-color-neutral-text: #212934; /* Dark Charcoal: Primary color for all body text. */
  --pg-color-neutral-bg-light: #F0F4F5; /* Light Grey: For subtle backgrounds. */
  --pg-color-neutral-grey-medium: #8A949E; /* Medium Grey: For dividers, captions, and input borders. */
  --pg-color-neutral-grey-light-2: #DDE2E5; /* Light Grey 2: For card borders and disabled states. */
  --pg-color-white: #FFFFFF; /* Standard white, used for text on dark backgrounds. */
  --pg-color-error: #C53030; /* From Form specs (7.2): For error state borders and text. */

  /* Font Families (Style Guide 4.1) */
  --pg-font-family-heading: 'Inter', sans-serif; /* Primary Typeface for all headings (H1-H6). */
  --pg-font-family-body: 'Source Sans Pro', sans-serif; /* Secondary Typeface for all body text. */

  /* Typographic Scale / Font Sizes (Style Guide 4.2) */
  --pg-font-size-h1: clamp(2.5rem, 6vw, 3.4rem); /* Responsive H1 size, approx 61px. */
  --pg-font-size-h2: clamp(2rem, 5vw, 2.75rem); /* Responsive H2 size, approx 50px. */
  --pg-font-size-h3: clamp(1.75rem, 4vw, 2.2rem); /* Responsive H3 size, approx 40px. */
  --pg-font-size-h4: 1.758rem; /* Static H4 size, 28px. */
  --pg-font-size-h5: 1.406rem; /* Static H5 size, 22.5px. */
  --pg-font-size-h6: 1.125rem; /* Static H6 size, 18px. */
  --pg-font-size-body: 1.125rem; /* Body text size, 18px. */
  --pg-font-size-small: 0.9375rem; /* Small text/caption size, 15px. */

  --pg-space-xs: 8px;   /* Based on form label/helper text margin. */
  --pg-space-s: 12px;   /* Based on vertical padding for buttons and inputs. */
  --pg-space-m: 24px;   /* Based on horizontal padding for buttons. */
  --pg-space-l: 32px;   /* Logical next step for column gaps. */
  --pg-space-xl: 48px;  /* Logical next step for section padding. */
  --pg-space-xxl: 64px; /* Logical next step for large section padding. */

  /* For Headings (H1-H3) */
  --pg-line-height-heading: 1.2;
  --pg-letter-spacing-heading: -0.02em; 

  /* For Body Text */
  --pg-line-height-body: 1.65;
  --pg-letter-spacing-body: normal; 
}


/*----------  1.2 - Body & HTML  ----------*/

/*
 * ----------------------------------------------------------------------------
 * This provides base styling for non-Elementor elements,
 * ensuring brand consistency across the entire WordPress site.
 * It uses the CSS Custom Properties defined in Elementor's
 * Custom CSS for a single source of truth.
 */

body {
  font-family: var(--pg-font-family-body, 'Source Sans Pro', sans-serif);
  font-size: var(--pg-font-size-body, 18px);
  font-weight: var(--pg-font-weight-regular, 400);
  line-height: 1.65; /* */
  color: var(--pg-color-neutral-text, #212934); /* */
  background-color: var(--pg-color-white, #FFFFFF);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pg-font-family-heading, 'Inter', sans-serif);
  font-weight: var(--pg-font-weight-semibold, 600); /* */
  line-height: 1.2; /* */
  letter-spacing: -0.02em; /* */
  color: var(--pg-color-neutral-text, #212934);
}

h1 { font-size: var(--pg-font-size-h1, 3.4rem); }
h2 { font-size: var(--pg-font-size-h2, 2.75rem); }
h3 { font-size: var(--pg-font-size-h3, 2.2rem); }
h4 { font-size: var(--pg-font-size-h4, 1.758rem); }
h5 { font-size: var(--pg-font-size-h5, 1.406rem); }
h6 { font-size: var(--pg-font-size-h6, 1.125rem); }

a {
  color: var(--pg-color-accent-blue, #00529B); /* */
  text-decoration: none; /* */
  transition: var(--pg-transition-fast, all 0.2s ease-in-out);
}

a:hover {
  text-decoration: underline; /* */
}

ul, ol {
  line-height: 1.7;
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

li {
  margin-bottom: 0.5em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    font-family: var(--pg-font-family-body, 'Source Sans Pro', sans-serif);
    font-size: var(--pg-font-size-body, 18px); /* */
    color: var(--pg-color-neutral-text, #212934);
    padding: var(--pg-space-s, 12px); /* */
    border-radius: var(--pg-border-radius-subtle, 4px);
    border: 1px solid var(--pg-color-neutral-grey-medium, #8A949E); /* */
    transition: var(--pg-transition-fast, all 0.2s ease-in-out);
    box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border: 2px solid var(--pg-color-accent-blue, #00529B); /* */
    box-shadow: var(--pg-box-shadow-focus-input, 0 0 0 3px #00529B33); /* */
    outline: none;
}

button,
input[type="submit"],
input[type="button"] {
    font-family: var(--pg-font-family-body, 'Source Sans Pro', sans-serif);
    font-weight: var(--pg-font-weight-bold, 700); /* */
    font-size: var(--pg-font-size-body, 18px); /* */
    color: var(--pg-color-white, #FFFFFF);
    background-color: var(--pg-color-accent-blue, #00529B); /* */
    border: none;
    border-radius: var(--pg-border-radius-subtle, 4px);
    padding: var(--pg-space-s, 12px) var(--pg-space-m, 24px); /* */
    cursor: pointer;
    transition: var(--pg-transition-fast, all 0.2s ease-in-out);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--pg-color-accent-blue-dark, #00407A); /* */
}

/*=============================================
=            2.0 - LAYOUT & STRUCTURE         =
=============================================*/

/*----------  2.2 - Navigation  ----------*/

.main-nav .e-n-menu-toggle,
.main-nav .e-n-menu-toggle:focus,
.main-nav .e-n-menu-toggle:hover,
{
	background-color: unset !important;
}

.main-nav ul.e-n-menu-heading > li:last-child a {
	background-color: var(--pg-color-accent-blue);
	color: var(--pg-color-white) !important;
	padding: 12px 24px;
	border-radius: var(--pg-border-radius-subtle);
	text-align: center;
	transition: background-color 0.2s ease;
	text-decoration: none;
	font-weight: 700;
}

.main-nav ul.e-n-menu-heading > li:last-child a .e-n-menu-title-text {
	color: var(--pg-color-white) !important;
}

.main-nav ul.e-n-menu-heading > li:last-child a:hover {
	background-color: var(--pg-color-accent-blue-dark);
}

.main-nav ul.e-n-menu-heading > li:last-child {
	display: none;
}

/* Mobile CTA as part of menu */
@media (max-width: 728px) {
	.main-nav ul.e-n-menu-heading > li:last-child {
        display: block;
    }
}

/*=============================================
=            3.0 - REUSABLE COMPONENTS        =
=============================================*/

/*----------  3.05 Typography Styling  ----------*/
.has-accent h2 span {
	font-weight: 900;
}

/*----------  3.1 Buttons  ----------*/

.tertiary-button .elementor-button-link,
.tertiary-button .elementor-button-link:hover {
    text-decoration: none;
}

.tertiary-button .elementor-button-link:hover .elementor-button-text {
    text-decoration: underline;
}

/*----------  3.2 Forms  ----------*/

/*----------  3.3 Client Logo Sections (case study & working with)  ----------*/

.client-logo img {
    filter: brightness(0) invert(1);
	opacity: 1.0;
    transition: all 0.3s ease;
	border-radius: 0;
}

.client-logo-gray img {
	filter: grayscale(100%);
    opacity: 0.7;
	border-radius: 0;
}

/*----------  3.4 Hover Cards  ----------*/

.hover-reveal-card {
  position: relative;
  text-decoration: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.hover-reveal-card:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.hover-reveal-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  transform: translateX(10px); 
  transition: all 0.3s ease-in-out;
}

.hover-reveal-card:hover .hover-reveal-arrow {
  opacity: 1;
  transform: translateX(0);
}

.hover-reveal-card:hover .elementor-widget-heading {
	text-decoration: underline;
}

/*=============================================
=            4.0 - Page Specific             =
=============================================*/

/*-----------  4.1 Homepage  -----------*/

.hero-image-overlap {
    filter: drop-shadow(0px 10px 20px rgba(33, 41, 52, 0.15));
}