/* pv_files/css/pv.css - Personal Views Section Styles - FINAL VERSION */

:root {
  --pv-primary-purple: #5a0a87;
  --pv-green: #008000;
  --pv-red: #e61e1e;
  --pv-text-color: #333;
  
  /* ============ POSITIONING CONTROLS ============ */
  
  /* Local Menu Position */
  --pv-menu-top: 130px;       /* Distance from top (below "Consulting - Quality") */
  --pv-menu-left: max(
    20px,
    calc((100vw - var(--pv-content-max-width)) / 2 + var(--pv-content-padding-x))
  );       /* Align with content column, but never hug the edge */
  
  /* Header Section Alignment */
  --pv-header-margin-left: 0px;      /* Adjust if header text goes too far right */
  --pv-header-margin-right: 120px;     /* Adjust to pull header text left */
  
  /* Divider Position Between Header Lines */
  --pv-divider-margin-top: -50px;     /* Space above divider line */
  --pv-divider-margin-bottom: 80px;  /* Space below divider line */
  
  /* Column Alignment (matches header width) */
  --pv-content-max-width: 1100px;    /* Total width of content area */
  --pv-content-padding-x: 10px;      /* Side padding */

  /* Column Widths */
  --pv-left-col-width: 43%;
  --pv-right-col-width: 43%;
  --pv-columns-gap: 16px;

  /* Menu Item Spacing */
  --pv-menu-item-padding-y: 6px;
  --pv-menu-item-padding-x: 6px;

  /* Menu Typography */
  --pv-menu-title-font-size: 24px;
  --pv-menu-item-font-size: 16px;
  --pv-menu-arrow-size: 20px;

  /* Menu Width */
  --pv-menu-width: 240px;

  /* Menu Layering */
  --pv-menu-z: 2500;
  --pv-menu-nav-z: 2501;
  --pv-menu-title-z: 2502;

  /* Menu Hover */
  --pv-menu-hover-bg: #4a0870;

  /* Menu shift (visual only) */
  --pv-menu-shift-x: -150px;      /* + moves right, - moves left */
  --pv-menu-shift-y: -117px;      /* + moves down, - moves up */
  
  /* Bottom Box Padding */
  --pv-bottom-padding-y: 5px;       /* Top/bottom padding (reduced) */
  --pv-bottom-padding-x: 0px;       /* Left/right padding */

  /* Section shift */
  --pv-section-shift-x: 65px;         /* + moves right, - moves left */
}

/* ============ PAGE WRAPPER ============ */
.pv-section {
  max-width: var(--pv-content-max-width);
  margin: 0 auto;
  padding: 20px var(--pv-content-padding-x);
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  transform: translateX(var(--pv-section-shift-x));
}

/* ============ LOCAL MENU (DROPDOWN STYLE) ============ */
#pv-local-menu,
.pv-local-menu {
  position: relative;
  margin-top: var(--pv-menu-top);
  margin-left: var(--pv-menu-left);
  z-index: var(--pv-menu-nav-z);
  width: var(--pv-menu-width);
  isolation: isolate;
  transform: translate(var(--pv-menu-shift-x), var(--pv-menu-shift-y));
}

.pv-menu-title {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: var(--pv-menu-title-font-size);
  font-weight: 600;
  color: var(--pv-primary-purple);
  margin: 0;
  padding: 8px 32px 8px 12px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 6px;
  border: 2px solid var(--pv-primary-purple);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  z-index: var(--pv-menu-title-z);
}

.pv-menu-title::after {
  content: "▼";
  font-size: var(--pv-menu-arrow-size);
  transition: transform 0.3s;
  position: absolute;
  right: 12px;
}

.pv-menu-title:hover {
  background: rgba(90, 10, 135, 0.05);
}

/* Dropdown menu - HIDDEN by default */
.pv-menu-nav {
  display: none;
  background: rgba(235, 222, 231, 0.98);
  border: 2px solid var(--pv-primary-purple);
  border-radius: 6px;
  padding: 5px 0;
  margin-top: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  max-height: 400px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--pv-menu-z);
  width: var(--pv-menu-width);
}

/* Show dropdown on hover */
.pv-local-menu:hover .pv-menu-nav {
  display: block;
}

/* Keep dropdown open on click/focus */
.pv-local-menu:focus-within .pv-menu-nav {
  display: block;
}

/* Rotate arrow when hovering */
.pv-local-menu:hover .pv-menu-title::after {
  transform: rotate(180deg);
}

.pv-local-menu:focus-within .pv-menu-title::after {
  transform: rotate(180deg);
}

.pv-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pv-menu-list li {
  margin: 0;
  padding: 0;
}

.pv-menu-list li.pv-menu-separator {
  list-style: none;
  height: 2px;
  margin: 2px 2px;
  background: rgba(59, 4, 92, 0.35);
}

.pv-menu-list li a {
  display: block;
  padding: var(--pv-menu-item-padding-y) var(--pv-menu-item-padding-x);
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--pv-primary-purple);
  text-decoration: none;
  transition: background 0.2s;
  line-height: 1.4;
  text-align: left;
}

.pv-menu-list li a:hover {
  background: var(--pv-menu-hover-bg);
  color: #ffffff;
}

.pv-menu-list li a.active {
  background: var(--pv-primary-purple);
  color: #ffffff;
  font-weight: 600;
}

/* Custom scrollbar for dropdown */
.pv-menu-nav::-webkit-scrollbar {
  width: 6px;
}

.pv-menu-nav::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.pv-menu-nav::-webkit-scrollbar-thumb {
  background: var(--pv-primary-purple);
  border-radius: 3px;
}

.pv-menu-nav::-webkit-scrollbar-thumb:hover {
  background: #4a0870;
}

/* ============ HEADER SECTION (Top Right Area) ============ */
.pv-header-section {
  margin: -79px var(--pv-header-margin-right) 30px var(--pv-header-margin-left);
  padding: 0;
  text-align: right;
  max-width: 100%;
}

.pv-header-title {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 55px;
  font-weight: 350;
  color: var(--pv-primary-purple);
  margin: 0;
  line-height: 1.2;
}

/* Divider between title lines - ADJUSTABLE */
.pv-header-divider {
  margin: var(--pv-divider-margin-top) 0 var(--pv-divider-margin-bottom) 0;
  border: none;
  border-top: 2px solid var(--pv-primary-purple);
  width: 100%;
}

.pv-header-subtitle {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 44px;
  font-weight: 350;
  color: var(--pv-primary-purple);
  margin: 0;
  line-height: 1.2;
}

/* ============ MAIN CONTENT (Two Columns) ============ */
.pv-main-content {
  display: flex;
  gap: var(--pv-columns-gap);
  margin: 30px 0;
  align-items: stretch;
  max-width: 100%;
}

/* Left Column (45%) */
.pv-leftbox {
  flex: 0 0 var(--pv-left-col-width);
  max-width: var(--pv-left-col-width);
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.pv-leftbox h2 {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--pv-primary-purple);
  text-align: center;
  margin: 0 0 20px 0;
}

.pv-leftbox ul {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--pv-text-color);
  margin: 0 0 20px 0;
  padding-left: 25px;
}

.pv-leftbox ul li {
  margin-bottom: 15px;
}

.pv-leftbox p {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pv-text-color);
  margin-bottom: 15px;
}

.pv-leftbox img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Right Column (55%) */
.pv-rightbox {
  flex: 0 0 var(--pv-right-col-width);
  max-width: var(--pv-right-col-width);
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.pv-rightbox h2 {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--pv-green);
  text-align: center;
  margin: 0 0 20px 0;
}

.pv-rightbox ul {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--pv-text-color);
  margin: 20px 0;
  padding-left: 25px;
}

.pv-rightbox ul li {
  margin-bottom: 12px;
}

.pv-rightbox img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pv-rightbox .pv-zoom-img {
  cursor: pointer;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

.pv-rightbox .pv-zoom-img:hover {
  transform: scale(1.5);
}

.pv-rightbox p {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pv-text-color);
}

/* ============ BOTTOM BOX (Full Width Synopsis) ============ */
.pv-bottombox {
  width: calc(var(--pv-left-col-width) + var(--pv-right-col-width) + var(--pv-columns-gap));
  margin: 30px 0;
  margin-right: auto;
  padding: var(--pv-bottom-padding-y) var(--pv-bottom-padding-x);
  background: #fff;
  border: 3px solid var(--pv-primary-purple);
  border-radius: 8px;
  text-align: center;
}

.pv-bottombox h1 {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--pv-primary-purple);
  margin: 0;
  line-height: 1.4;
}

.pv-bottombox p {
  font-family: "Segoe UI", SegoeUI, system-ui, -apple-system, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: var(--pv-text-color);
  margin: 10px 0 0 0;
}


/* ============ TEXT EMPHASIS CLASSES ============ */
.highlight-strong {
  color: var(--pv-red);
  font-weight: 700;
}

.highlight-purple {
  color: var(--pv-primary-purple);
  font-weight: 600;
}

.highlight-green {
  color: var(--pv-green);
  font-weight: 600;
}

.highlight-red {
  color: var(--pv-red);
  font-weight: 600;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .pv-section {
    padding-left: 14px;
    padding-right: 14px;
    transform: none;
  }

  .pv-main-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pv-leftbox,
  .pv-rightbox {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
  }

  #pv-local-menu,
  .pv-local-menu {
    position: static;
    margin: calc(var(--header-height, 88px) + 8px) 0 20px 0;
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  
  .pv-menu-title {
    width: 100%;
  }

  .pv-menu-nav {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 6px;
    box-shadow: none;
  }

  .pv-local-menu.is-open .pv-menu-nav {
    display: block;
  }

  .pv-local-menu.is-open .pv-menu-title::after {
    transform: rotate(180deg);
  }

  .pv-header-section {
    margin: 0 0 18px 0;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .pv-header-title {
    font-size: 35px;
  }
  
  .pv-header-subtitle {
    font-size: 35px;
  }
}

/* Keep PV pages in two-column layout on touch devices in landscape */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 600px) {
  .page-pv .pv-main-content,
  .page-pv-article .pv-main-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--pv-columns-gap) !important;
  }

  .page-pv .pv-leftbox,
  .page-pv-article .pv-leftbox {
    flex: 0 0 var(--pv-left-col-width) !important;
    max-width: var(--pv-left-col-width) !important;
    width: var(--pv-left-col-width) !important;
    min-width: 0;
  }

  .page-pv .pv-rightbox,
  .page-pv-article .pv-rightbox {
    flex: 0 0 var(--pv-right-col-width) !important;
    max-width: var(--pv-right-col-width) !important;
    width: var(--pv-right-col-width) !important;
    min-width: 0;
  }
}

/* Fallback: enforce 2-column on landscape tablets regardless pointer type */
@media (orientation: landscape) and (min-width: 700px) {
  .page-pv .pv-main-content,
  .page-pv-article .pv-main-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--pv-columns-gap) !important;
  }

  .page-pv .pv-leftbox,
  .page-pv-article .pv-leftbox {
    flex: 0 0 var(--pv-left-col-width) !important;
    max-width: var(--pv-left-col-width) !important;
    width: var(--pv-left-col-width) !important;
    min-width: 0 !important;
  }

  .page-pv .pv-rightbox,
  .page-pv-article .pv-rightbox {
    flex: 0 0 var(--pv-right-col-width) !important;
    max-width: var(--pv-right-col-width) !important;
    width: var(--pv-right-col-width) !important;
    min-width: 0 !important;
  }
}