/* ======= YOUR ORIGINAL CSS (preserved) ======= */
:root {
  --brand-900: #1A193F;
  --brand-800: #21205A;
  --brand-700: #242252;
  --brand-600: #3B3A76;
  --accent-1:  #FF7A59;
  --accent-2:  #6F7D5A;
  --accent-3:  #9DB1A1;
  --earth-1:   #9C6644;
  --ink:       #0B1220;
  --ink-muted: #334155;
  --surface:   #FAFAFA;
  --card:      #FFFFFF;
}

/* FIX 1 & 2: 
  - The SVG background is now applied directly and reliably to the body.
  - Padding is added to the body to create the "floating" effect for the main container,
    ensuring space at the top and bottom.
*/
html {
    height: 100%;
}

body {
    min-height: 100%;
    background-color: #9c6644;
    background-color: #6f7d5a;
background-color: #1a193f;
background-color: #1a193f;
background-color: #9c6644;
background-color: #9db1a1;
background-color: #ff7a59;
background-color: #6f7d5a;
background-color: #e4cec0;
background-color: #e9eeea;
background-color: #ff7a59;
background-color: #ff7a59;
background-color: #9c6644;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%239db1a1' fill-opacity='0.6'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    color: var(--ink); /* Moved color property here */
    margin: 0 !important;
    padding: 30px 15px !important; /* Added padding for top/bottom space */
    box-sizing: border-box; /* Ensures padding is calculated correctly */
}

/* FIX 2 (continued): 
  - The top and bottom margin is removed from the page container, 
    as the body padding now handles the spacing.
*/
.pkp_structure_page {
    max-width: 1200px;
    margin: 0 auto; /* Changed margin to 0 auto */
    padding: 0 !important; /* FIX: Remove internal padding */
    background-color: rgba(255,255,255,0.94);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16' 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23242252' fill-opacity='0.12' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: local;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    border: 3px solid var(--brand-900) !important; /* Changed border color to brand color */
    box-sizing: border-box;
    position: relative;
    overflow: visible !important;
    background-origin: padding-box;
    background-clip: padding-box;
    z-index: 10;
}

.pkp_structure_head {
    border-bottom: none;
    background: #ffffff;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 100%;
    max-width: 100%;
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}

.pkp_site_name_wrapper, .pkp_head_content, .pkp_site_name {
    height: 200px !important;
    width: 100% !important;
    box-sizing: border-box;
    background: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
    min-width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 100;
}

.pkp_site_name a {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.pkp_site_name_wrapper *, .pkp_head_content * {
    margin: 0 !important;
    padding: 0 !important;
}

#navigationPrimary > li > a {
    color: #fff !important;
}

.pkp_navigation_primary_row {
    background: var(--brand-700) !important;
    width: 100% !important;
    flex-grow: 1;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1002;
    overflow: visible !important;
}

/* FIX: Increased specificity to ensure padding is applied */
ul#navigationPrimary.pkp_navigation_primary > li > a {
    color: #fff !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 18px !important; /* Reduced side padding */
    padding-right: 18px !important; /* Reduced side padding */
    display: block !important;
}

.pkp_navigation_primary .pkp_nav_list > li > a,
.pkp_navigation_primary .pkp_nav_list > li > a * {
    color: #fff !important;
    /* Padding is now handled by a more specific rule above */
}

.pkp_navigation_primary .pkp_nav_list > li > a:hover,
.pkp_navigation_primary .pkp_nav_list > li > a:focus {
    background: var(--brand-600) !important;
    color: #fff !important;
}

/* FIX: Make search text and icon light and align padding with navbar */
.pkp_search.pkp_search_desktop {
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin: 0 !important; /* FIX: Remove unwanted default margin */
}

.pkp_search.pkp_search_desktop .fa-search {
    color: #FFFFFF !important;
    margin-right: 5px; /* Add space between icon and text */
}

.pkp_navigation_primary .pkp_nav_list > li {
    position: relative;
    z-index: 1003 !important;
    overflow: visible !important;
}

/* FIX 3: 
  - Dropdown background and hover colors now use the brand color variables.
  - Selectors have been made more specific using the #navigationPrimary ID to override default styles.
*/
ul#navigationPrimary.pkp_navigation_primary > li > ul { /* Increased specificity */
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px;
    background: var(--brand-800) !important;
    color: #fff !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

ul#navigationPrimary.pkp_navigation_primary > li:hover > ul, /* Increased specificity */
ul#navigationPrimary.pkp_navigation_primary > li:focus > ul { /* Increased specificity */
    display: block !important;
}

ul#navigationPrimary.pkp_navigation_primary > li > ul > li > a { /* Increased specificity */
    background: var(--brand-800) !important;
    color: #FFFFFF !important;
    padding: 12px 20px !important;
    display: block !important;
}

ul#navigationPrimary.pkp_navigation_primary > li > ul > li > a:hover, /* Increased specificity */
ul#navigationPrimary.pkp_navigation_primary > li > ul > li > a:focus { /* Increased specificity */
    background: var(--accent-1) !important; /* Warm accent color on hover */
    color: var(--brand-900) !important; /* Dark text for contrast */
}

.pkp_navigation_primary .pkp_nav_list > li > a {
    z-index: 1 !important;
    position: relative !important;
}

.pkp_button,
.pkp_page_action,
.pkp_linkActions .btn,
.cmp_button,
.pkp_search button {
  background: var(--accent-1) !important;
  color: #081A14 !important;
  border: none !important;
}

.pkp_button:hover,
.cmp_button:hover {
  filter: brightness(0.92);
}

a { color: #006798; }
a:hover { color: #004d7a; }

.pkp_structure_page, .pkp_block { background: var(--card);
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

 /* FIX: Remove horizontal padding and margin from the main content column */
.pkp_structure_main {
    padding-left: 30px !important;
    padding-right: 35px !important;
    margin: 0 !important;
}

/* FIX: Increase left padding for the main journal content */
.page_index_journal {
    padding-left: 0 !important;
}

.homepage_image {
    margin: 0px -35px 10px -47px !important;
    width: calc(100% + 82px) !important;
    max-width: none !important;
    position: relative;
}

.homepage_image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    }

 /* FIX: Remove padding from main content area when sidebar exists */
.pkp_structure_content.has_sidebar {
    padding: 0 !important;
}

.pkp_structure_sidebar {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* FIX: Make sidebar blocks fill the entire container */
.pkp_structure_sidebar .pkp_block {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.pkp_structure_sidebar .pkp_block .content {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* FIX: Override inline styles within custom sidebar blocks to make them flush */
.pkp_structure_sidebar .pkp_block.block_custom .content > div {
    border: none !important;
    padding: 0 !important; 
    margin: 0 !important;
}

.pkp_structure_sidebar table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100%;
}

.pkp_structure_sidebar table td,
.pkp_structure_sidebar table th {
    padding: 8px 15px !important;
    margin: 0 !important;
}

@media (max-width:950px) {
    body {
        padding: 0 !important; /* Remove padding on mobile */
    }
    .pkp_structure_page, .pkp_structure_footer {
        max-width: 100%;
        margin: 0;
    }
    .pkp_structure_main {
        padding: 0 3px !important;
    }
    .pkp_site_name_wrapper, .pkp_head_content, .pkp_site_name {
        height: 110px !important;
    }
    
    /* Mobile dropdown styling remains the same, but with increased specificity */
    ul#navigationPrimary.pkp_navigation_primary > li > ul { /* Increased specificity */
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        max-height: 0 !important;
        overflow: visible !important;
        background: var(--brand-800) !important;
        color: #fff !important;
        z-index: 99999 !important;
    }

    ul#navigationPrimary.pkp_navigation_primary > li > ul > li > a { /* Increased specificity */
        background: var(--brand-800) !important;
        color: #fff !important;
        z-index: 99999 !important;
    }
    
    ul#navigationPrimary.pkp_navigation_primary > li > ul > li > a:hover, /* Increased specificity */
    ul#navigationPrimary.pkp_navigation_primary > li > ul > li > a:focus { /* Increased specificity */
        background: var(--accent-1) !important; /* Warm accent color on hover */
        color: var(--brand-900) !important; /* Dark text for contrast */
        z-index: 99999 !important;
    }
}

.pkp_structure_head > * {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FIX 1 (continued): 
  - The conflicting body:before rule has been removed.
*/

/* ======= END ORIGINAL ======= */


/* ======================================================================
   APPEND-ONLY PATCH — Resolve 40px shrink + inter-column gap on desktop
   ====================================================================== */
@media (min-width: 1200px) {
  /* Ensure content row is full width and has no latent gutter */
  .pkp_structure_content.has_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;          /* grid/flex gap */
    column-gap: 0 !important;   /* legacy gap */
  }

  /* Sidebar stays 300px, no ghost gutter */
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar.left {
    margin-left: 0 !important;
    padding-right: 0 !important;
    width: 300px !important;
    box-sizing: border-box !important;
  }

  /* Main fills the rest precisely */
  .pkp_structure_content.has_sidebar .pkp_structure_main {
    width: calc(100% - 300px) !important;
    box-sizing: border-box !important;
  }

  /* Header aligns to the full page box */
  .pkp_structure_head {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ======================================================================
   APPEND-ONLY PATCH — Homepage hero: align to inner left edge of page box
   (extends left by 30px and width by 65px = 30 + 35)
   ====================================================================== */
@media (min-width: 1200px) {
  .page_index_journal .homepage_image {
    margin-left: -30px !important;
    width: calc(100% + 65px) !important;
  }
}

/* ======================================================================
   APPEND-ONLY PATCH — Sidebar custom block box-model safety
   ====================================================================== */
.pkp_structure_sidebar .pkp_block.block_custom .content > div {
  box-sizing: border-box !important;
  width: 100% !important;
  overflow-x: hidden !important;
}
.pkp_structure_sidebar .pkp_block.block_custom .content > div *,
.pkp_structure_sidebar .pkp_block.block_custom .content > div *::before,
.pkp_structure_sidebar .pkp_block.block_custom .content > div *::after {
  box-sizing: inherit !important;
}
.pkp_structure_sidebar .pkp_block.block_custom .content > div a {
  display: block !important;
  width: 100% !important;
}
.pkp_structure_sidebar .pkp_block.block_custom .content > div a > button {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
}
.pkp_structure_sidebar .pkp_block.block_custom .content > div img,
.pkp_structure_sidebar .pkp_block.block_custom .content > div iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
