/* Load Lora from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

/* =========================================
   1. Typography & Global Settings (16px)
   ========================================= */

*, *:before, *:after {
  box-sizing: border-box;
}

body,
.pkp_page_content,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
  font-family: 'Lora', serif;
  font-size: 16px; 
  line-height: 1.6;
  color: #222222;
  -webkit-font-smoothing: antialiased;
}

/* =========================================
   2. Paragraphs: Justified & Readable
   ========================================= */

p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1.5em;
  
  /* Justified text with hyphenation */
  text-align: justify;
  text-justify: inter-word; 
  hyphens: auto; 
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', serif;
  font-weight: 600;
  text-align: left;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* =========================================
   3. Layout Adjustment (The "Up Right" Fix)
   ========================================= */

/* We use Flexbox to control the vertical alignment.
   align-items: flex-start is the command that forces 
   the Sidebar to jump to the top (Up).
*/
.pkp_structure_content.container,
.pkp_structure_content {
  display: flex !important;      /* Enforce Flexbox */
  flex-wrap: wrap !important;    /* Allow wrapping on mobile */
  align-items: flex-start !important; /* Forces Sidebar UP */
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 15px; 
  padding-right: 15px;
}

/* The Main Content */
.pkp_structure_main {
  flex: 1; /* Takes up remaining space */
  padding-left: 0 !important;
  text-align: left;
}

/* The Sidebar (.pkp_structure_sidebar) 
   We ensure it has no top margin so it aligns with the very top line.
*/
.pkp_structure_sidebar {
  width: 300px; /* Standard sidebar width, adjusts automatically usually */
  padding-right: 15px;
  margin-top: 0 !important;      /* Remove top gap */
  padding-top: 0 !important;     /* Remove top padding */
  text-align: left;
}

/* Ensure the first element inside the sidebar (The Title) 
   doesn't push the box down 
*/
.pkp_structure_sidebar .pkp_block:first-child,
.pkp_structure_sidebar .pkp_block:first-child .title {
    margin-top: 0 !important;
}

/* =========================================
   4. Article & Breadcrumb Specifics
   ========================================= */

.pkp_breadcrumbs,
.page-header,
.pkp_page_title {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.obj_article_details,
.obj_article_summary {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* =========================================
   5. Navigation & Form Elements
   ========================================= */

.pkp_navigation_primary > li > a,
.pkp_nav_list a,
.pkp_block .title,
.pkp_form label {
  font-family: 'Lora', serif;
  font-size: 16px;
}

/* =========================================
   6. Responsiveness (Mobile)
   ========================================= */

@media only screen and (max-width: 768px) {
  /* On mobile, we stack the flex items vertically */
  .pkp_structure_content.container {
    flex-direction: column;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .pkp_structure_main,
  .pkp_structure_sidebar {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  p {
    text-align: justify;
  }
}