/* Patrick Connect - Custom Styles */

/* ============================================
   FONT FACE DECLARATIONS - GOTHAM FONT FAMILY
   ============================================ */

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ============================================
   CORPORATE COLORS
   Primary Blue: #034EA2
   Accent Yellow: #FFBC05
   ============================================ */

:root {
  --md-primary-fg-color: #034EA2;
  --md-primary-fg-color--dark: #023570;
  --md-primary-fg-color--light: #0466c7;
  --md-accent-fg-color: #FFBC05;
  --md-accent-bg-color: #FFBC05;
  --md-accent-fg-color--transparent: rgba(255, 188, 5, 0.1);

  /* Custom Patrick colors */
  --patrick-blue: #034EA2;
  --patrick-blue-dark: #023570;
  --patrick-blue-light: #0466c7;
  --patrick-yellow: #FFBC05;
  --patrick-yellow-dark: #e5a800;
}

/* ============================================
   DARK MODE - PATRICK DARK SCHEME
   Background: Corporate blue with proper contrast
   ============================================ */

[data-md-color-scheme="patrick-dark"] {
  /* Primary colors for dark mode */
  --md-primary-fg-color: #0466c7;
  --md-primary-fg-color--dark: #034EA2;
  --md-primary-fg-color--light: #3d8fd1;
  --md-accent-fg-color: #FFBC05;
  --md-accent-bg-color: #FFBC05;
  --md-accent-fg-color--transparent: rgba(255, 188, 5, 0.15);

  /* Background colors - Corporate blue tones */
  --md-default-bg-color: #001a33;
  --md-default-bg-color--light: #002447;
  --md-default-bg-color--lighter: #003366;
  --md-default-bg-color--lightest: #034EA2;
  
  /* Foreground/text colors - High contrast for readability */
  --md-default-fg-color: #e8f0f7;
  --md-default-fg-color--light: #c5d9e8;
  --md-default-fg-color--lighter: #a3c4db;
  --md-default-fg-color--lightest: #7fa8c9;
  
  /* Code blocks */
  --md-code-bg-color: #002447;
  --md-code-fg-color: #e8f0f7;
  
  /* Footer */
  --md-footer-bg-color: #001428;
  --md-footer-bg-color--dark: #000a14;
  --md-footer-fg-color: #c5d9e8;
  
  /* Links */
  --md-typeset-a-color: #5ca3e6;
  
  /* Tables */
  --md-typeset-table-color: #e8f0f7;
  
  /* Custom Patrick colors for dark mode */
  --patrick-blue: #0466c7;
  --patrick-blue-dark: #034EA2;
  --patrick-blue-light: #3d8fd1;
  --patrick-yellow: #FFBC05;
  --patrick-yellow-dark: #e5a800;
}

/* Dark mode specific overrides */
[data-md-color-scheme="patrick-dark"] h1,
[data-md-color-scheme="patrick-dark"] h2,
[data-md-color-scheme="patrick-dark"] h3,
[data-md-color-scheme="patrick-dark"] h4,
[data-md-color-scheme="patrick-dark"] h5,
[data-md-color-scheme="patrick-dark"] h6 {
  color: #5ca3e6;
}

[data-md-color-scheme="patrick-dark"] h1 {
  border-bottom-color: var(--patrick-yellow);
}

[data-md-color-scheme="patrick-dark"] h2 {
  border-bottom-color: #0466c7;
}

[data-md-color-scheme="patrick-dark"] .md-header {
  background-color: #001428;
}

[data-md-color-scheme="patrick-dark"] .md-tabs {
  background-color: #001a33;
}

[data-md-color-scheme="patrick-dark"] .md-tabs__link--active {
  color: var(--patrick-yellow);
  border-bottom-color: var(--patrick-yellow);
}

[data-md-color-scheme="patrick-dark"] .md-nav__link--active {
  color: #5ca3e6;
  border-left-color: var(--patrick-yellow);
}

[data-md-color-scheme="patrick-dark"] .md-nav__item .md-nav__link:hover {
  color: #5ca3e6;
  background-color: rgba(255, 188, 5, 0.1);
}

[data-md-color-scheme="patrick-dark"] a {
  color: #5ca3e6;
}

[data-md-color-scheme="patrick-dark"] a:hover {
  color: #7fb8ed;
}

[data-md-color-scheme="patrick-dark"] .md-button {
  background-color: #0466c7;
  border-color: #0466c7;
  color: white;
}

[data-md-color-scheme="patrick-dark"] .md-button:hover {
  background-color: #3d8fd1;
  border-color: #3d8fd1;
}

[data-md-color-scheme="patrick-dark"] .admonition {
  border-left-color: #0466c7;
  background-color: rgba(4, 102, 199, 0.1);
}

[data-md-color-scheme="patrick-dark"] .admonition.note {
  border-left-color: #0466c7;
}

[data-md-color-scheme="patrick-dark"] .admonition.warning {
  border-left-color: var(--patrick-yellow);
  background-color: rgba(255, 188, 5, 0.1);
}

[data-md-color-scheme="patrick-dark"] .admonition .admonition-title {
  color: #5ca3e6;
}

[data-md-color-scheme="patrick-dark"] th {
  background-color: #0466c7;
  color: white;
}

[data-md-color-scheme="patrick-dark"] td,
[data-md-color-scheme="patrick-dark"] th {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="patrick-dark"] tbody tr:hover {
  background-color: rgba(255, 188, 5, 0.08);
}

[data-md-color-scheme="patrick-dark"] .md-search__input {
  background-color: rgba(255, 255, 255, 0.08);
  color: #e8f0f7;
}

[data-md-color-scheme="patrick-dark"] .md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="patrick-dark"] .md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

[data-md-color-scheme="patrick-dark"] .md-container {
  background: linear-gradient(135deg, #001a33 0%, #002447 100%);
}

[data-md-color-scheme="patrick-dark"] .homepage-hero {
  background: linear-gradient(135deg, #0466c7 0%, #034EA2 100%);
}

[data-md-color-scheme="patrick-dark"] .homepage-image-container {
  background: #002447;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="patrick-dark"] .homepage-feature {
  background: #002447;
  border-left-color: var(--patrick-yellow);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="patrick-dark"] .homepage-feature:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

[data-md-color-scheme="patrick-dark"] .homepage-feature h3 {
  color: #5ca3e6;
}

[data-md-color-scheme="patrick-dark"] .homepage-feature p {
  color: #c5d9e8;
}

[data-md-color-scheme="patrick-dark"] .md-footer {
  background-color: #001428;
}

[data-md-color-scheme="patrick-dark"] .md-footer-meta {
  background-color: #000a14;
}

[data-md-color-scheme="patrick-dark"] .codehilite {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="patrick-dark"] body {
  color: #e8f0f7;
}

[data-md-color-scheme="patrick-dark"] .md-typeset {
  color: #e8f0f7;
}

[data-md-color-scheme="patrick-dark"] p {
  color: #e8f0f7;
}

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

body {
  font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  color: var(--patrick-blue);
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  border-bottom: 3px solid var(--patrick-yellow);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  border-bottom: 2px solid var(--patrick-blue);
  padding-bottom: 0.3rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--patrick-blue);
  margin-top: 1.5rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--patrick-blue);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.md-header {
  background-color: var(--patrick-blue);
}

.md-header[data-md-state="shadow"] {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
}

.md-tabs {
  background-color: var(--patrick-blue-dark);
}

.md-tabs__link {
  font-family: 'Gotham', sans-serif;
  font-weight: 500;
}

.md-tabs__link--active {
  color: var(--patrick-yellow);
  border-bottom: 2px solid var(--patrick-yellow);
}

/* Navigation header */
.md-header__title {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */

.md-nav__link {
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
}

.md-nav__link--active {
  color: var(--patrick-blue);
  font-weight: 500;
  border-left: 3px solid var(--patrick-yellow);
  padding-left: 0.6rem;
  margin-left: -0.8rem;
}

.md-nav__item .md-nav__link:hover {
  color: var(--patrick-blue);
  background-color: var(--md-accent-fg-color--transparent);
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */

.md-button {
  background-color: var(--patrick-blue);
  border-color: var(--patrick-blue);
  font-family: 'Gotham', sans-serif;
  font-weight: 500;
}

.md-button:hover {
  background-color: var(--patrick-blue-light);
  border-color: var(--patrick-blue-light);
}

.md-button--primary {
  background-color: var(--patrick-blue);
  border-color: var(--patrick-blue);
  color: white;
}

a {
  color: var(--patrick-blue);
}

a:hover {
  color: var(--patrick-blue-light);
}

/* ============================================
   ADMONITIONS
   ============================================ */

.admonition {
  border-left: 4px solid var(--patrick-blue);
  background-color: var(--md-accent-fg-color--transparent);
}

.admonition.note {
  border-left-color: var(--patrick-blue);
}

.admonition.warning {
  border-left-color: var(--patrick-yellow);
  background-color: rgba(255, 188, 5, 0.1);
}

.admonition.tip {
  border-left-color: #00c853;
}

.admonition .admonition-title {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  color: var(--patrick-blue);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

.codehilite {
  border-radius: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   TABLES
   ============================================ */

table {
  border-collapse: collapse;
  margin: 1.5rem 0;
}

th {
  background-color: var(--patrick-blue);
  color: white;
  font-family: 'Gotham', sans-serif;
  font-weight: 500;
}

td, th {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem;
}

tbody tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* ============================================
   SEARCH
   ============================================ */

.md-search__input {
  background-color: rgba(255, 255, 255, 0.15);
  font-family: 'Gotham', sans-serif;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* ============================================
   HOMEPAGE SPLASH PAGE
   ============================================ */

.md-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

.homepage-hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, var(--patrick-blue) 0%, var(--patrick-blue-dark) 100%);
  color: white;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.homepage-hero h1 {
  color: white;
  border-bottom: none;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.homepage-hero p {
  font-size: 1.25rem;
  font-family: 'Gotham', sans-serif;
  font-weight: 300;
  opacity: 0.95;
}

.homepage-image-container {
  text-align: center;
  margin: 2rem 0;
  padding: 2rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.homepage-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.homepage-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.homepage-feature {
  padding: 1.5rem;
  background: white;
  border-radius: 0.5rem;
  border-left: 4px solid var(--patrick-yellow);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.homepage-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.homepage-feature h3 {
  color: var(--patrick-blue);
  margin-top: 0;
  font-size: 1.25rem;
}

.homepage-feature p {
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
}

/* ============================================
   FOOTER
   ============================================ */

.md-footer {
  background-color: var(--patrick-blue-dark);
}

.md-footer-meta {
  background-color: var(--patrick-blue);
}

.md-footer-copyright {
  font-family: 'Gotham', sans-serif;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__item--active > .md-nav__link {
    color: var(--patrick-yellow);
  }

  .homepage-hero h1 {
    font-size: 2rem;
  }
}