/*
Theme Name: GeneratePress Child
Theme URI: https://example.com/generatepress-child
Description: Child theme for GeneratePress — dark clinical aesthetic overrides.
Author: Site Owner
Author URI: https://example.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* === DARK CLINICAL OVERRIDES === */
html, body { margin: 0 !important; }
body { background-color: #0b0f19 !important; color: #cbd5e1 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; line-height: 1.6 !important; }
h1, h2, h3, h4, h5, h6 { font-family: "Reem Kufi", sans-serif !important; font-weight: 400 !important; }
h1, h2, h3 { color: #f8fafc !important; letter-spacing: -0.025em !important; }
h1 { border-left: 4px solid #ffffff; padding-left: 15px; margin-top: 0; margin-bottom: 16px; }
a { color: #ffffff !important; text-decoration: none !important; transition: color 0.15s ease-in-out; }
a:hover, a:focus, a:active { color: #fde047 !important; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .menu-bar-item:hover > a { color: #fde047 !important; }
.wp-block-columns { display: flex; gap: 40px; margin: 16px 0; }
.wp-block-column { background: #111827; padding: 30px; border-radius: 8px; border: 1px solid #1f2937; }
.site-header, .main-navigation { background: #111827 !important; padding: 4px 0; }
.main-navigation { border-bottom: 0 !important; }
.site-header { position: sticky !important; top: 0; z-index: 100; padding-top: 12px !important; border-bottom: 1px solid #ffffff !important; }
.main-navigation a { color: #f8fafc !important; font-weight: 500; margin-right: 20px; }
pre, code, .wp-block-code { background: #111827 !important; border: 1px dashed #ffffff !important; color: #ffffff !important; padding: 40px !important; text-align: center; display: block; font-family: monospace !important; font-size: 14px; margin: 30px 0; border-radius: 6px; }

/* === HEADER LOGO === */
.site-branding { display: flex; align-items: center; padding: 8px 0; }
.site-title, .main-title, .main-title a { text-transform: uppercase !important; letter-spacing: 0.08em; font-family: "Reem Kufi", sans-serif !important; font-weight: 400 !important; text-align: center !important; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.2 !important; }
.site-branding { margin-top: 0 !important; padding-top: 0 !important; }
.site-logo { padding-bottom: 14px !important; margin-bottom: 0 !important; }
.site-branding-container { display: flex !important; flex-direction: column; align-items: center; margin-left: auto !important; margin-right: auto !important; float: none !important; width: auto !important; flex: 0 0 auto !important; }
.site-branding { width: 100%; justify-content: center; }
.site-logo { display: flex; align-items: center; margin: 0; padding: 4px 16px 4px 0; }
.site-logo a { display: inline-flex; align-items: center; line-height: 0; }
.site-logo img.header-image { height: 96px; width: auto; display: block; }
.inside-header { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
/* === NAV (responsive: inline right-aligned >=769px, hamburger <=768px) === */
#mobile-menu-control-wrapper, .mobile-menu-control-wrapper { display: none !important; }

@media (min-width: 769px) {
  .main-navigation {
    position: sticky !important;
    top: 152px;
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end;
    margin-top: 60px !important;
    padding-bottom: 16px;
    background: #111827 !important;
    z-index: 99;
  }
  .main-navigation .inside-navigation {
    display: flex !important;
    justify-content: flex-end !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box;
    width: 100%;
  }
  .main-navigation .main-nav {
    margin-left: auto;
    display: block !important;
  }
  .main-navigation .main-nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none !important;
    margin: 0;
    padding: 0;
    gap: 8px;
  }
  .main-navigation .main-nav > ul > li { list-style: none !important; }
  .main-navigation .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .main-navigation .menu-toggle { display: none !important; }
}

@media (max-width: 768px) {
  /* Hide GP's auxiliary mobile-control wrapper; we use the toggle inside #site-navigation */
  #mobile-menu-control-wrapper { display: none !important; }

  .site-header { position: relative; }

  /* Position the actual nav fixed in top-right of viewport */
  #site-navigation {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: block !important;
    z-index: 1000;
    flex-basis: auto !important;
  }
  #site-navigation .inside-navigation {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    background: transparent !important;
  }

  /* The toggle button itself — high-specificity to beat GP's has-inline-mobile-toggle hide rule */
  .has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-toggle,
  #site-navigation .inside-navigation > .menu-toggle {
    display: inline-block !important;
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 6px 10px !important;
    cursor: pointer;
    font-size: 0 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
  }
  #site-navigation .menu-toggle .screen-reader-text,
  #site-navigation .menu-toggle .mobile-menu {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }
  /* Hide GP's SVG; show a CSS-drawn hamburger that's guaranteed to render */
  #site-navigation .menu-toggle .gp-icon { display: none !important; }
  #site-navigation .menu-toggle::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 18px;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff);
    background-size: 100% 3px;
    background-position: 0 0, 0 50%, 0 100%;
    background-repeat: no-repeat;
  }
  #site-navigation.toggled .menu-toggle::before {
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff);
    background-size: 100% 3px;
    background-position: 0 50%, 0 50%;
    background-repeat: no-repeat;
    transform: rotate(45deg);
  }

  /* Hide inline menu when not toggled */
  #site-navigation:not(.toggled) .main-nav { display: none !important; }

  /* Dropdown when toggled */
  #site-navigation.toggled .main-nav {
    display: block !important;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #111827;
    border: 1px solid #ffffff;
    border-radius: 8px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    margin: 0 !important;
  }
  #site-navigation.toggled .main-nav > ul {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #site-navigation.toggled .main-nav > ul > li { width: 100%; }
  #site-navigation.toggled .main-nav > ul > li + li { border-top: 1px solid #1f2937; }
  #site-navigation.toggled .main-nav > ul > li > a {
    display: block !important;
    padding: 14px 20px !important;
    color: #ffffff !important;
  }
}

/* === FOOTER === */
.site-footer, .footer-widgets, .site-info, .inside-site-info { background-color: #000 !important; color: #fff !important; }
.site-footer, .site-footer * , .site-info, .site-info * { color: #fff !important; }
.site-footer a, .site-info a { color: #fff !important; }
.site-footer a:hover, .site-info a:hover { color: #fde047 !important; }
.site-info, .inside-site-info { text-align: center !important; justify-content: center !important; }
.site-info .copyright-bar { text-align: center !important; width: 100%; }

/* === FULL-WIDTH CENTERED MAIN === */
.site-content { display: block; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.site-content .content-area { width: 100%; float: none; }
body.right-sidebar .widget-area.sidebar,
body.left-sidebar .widget-area.sidebar { display: none !important; }
.inside-article, .one-container .site-content > .content-area > article { width: 100%; }
.separate-containers .inside-article,
.separate-containers .entry-content,
.one-container .site-content { background-color: #dbeafe !important; }
.entry-content > h1, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > h5, .entry-content > h6 { color: #0b0f19 !important; }
.entry-content > p, .entry-content > ul, .entry-content > ol { color: #1f2937 !important; }
.entry-content > h1 { border-left-color: #0b0f19; }
.inside-article, .entry-content, .page-content { padding: 16px 40px !important; box-sizing: border-box; }
.entry-header, .page-header, .entry-title { display: none !important; }
.site-content, .site-main, .content-area { margin-top: 0 !important; padding-top: 0 !important; }
article.page { margin-top: 0 !important; }
.entry-content > * { max-width: 100%; }
.entry-content > p, .entry-content > h1, .entry-content > h2, .entry-content > h3 { padding-left: 8px; padding-right: 8px; }

/* === MOBILE CONTENT RESPONSIVENESS === */
@media (max-width: 768px) {
  /* Stack the two cards vertically instead of squishing them side-by-side.
     The base rule sets `.wp-block-columns { display: flex }` with no wrap,
     so without this the columns never stack on a phone. */
  .wp-block-columns { flex-direction: column !important; gap: 20px !important; }
  .wp-block-column { padding: 20px !important; }

  /* Trim the large horizontal padding that eats a narrow viewport */
  .site-content { padding-left: 12px !important; padding-right: 12px !important; }
  .inside-article, .entry-content, .page-content { padding: 12px 16px !important; }
  .entry-content > p, .entry-content > h1, .entry-content > h2, .entry-content > h3 { padding-left: 0 !important; padding-right: 0 !important; }

  /* Code blocks: shrink oversized 40px padding */
  pre, code, .wp-block-code { padding: 16px !important; font-size: 13px !important; }

  /* Keep images and video embeds inside the viewport */
  .entry-content img, .wp-block-embed, .wp-block-embed__wrapper { max-width: 100% !important; height: auto; }

  /* Scale the hero headline down so it doesn't overflow */
  h1 { font-size: 1.8rem !important; line-height: 1.25 !important; }
}