/**
 * WE Solicitors — Page Content Overrides
 * ========================================
 * NEW FILE: assets/css/page-overrides.css
 *
 * This file loads AFTER main.css (Tailwind) to override Preflight
 * resets that strip list bullets, heading spacing, etc.
 *
 * It also handles the page layout system so full-width pattern
 * blocks span the viewport while regular content stays centered.
 *
 * DO NOT compile this into Tailwind — it loads separately.
 */

/* =================================================================
   1. PAGE CONTENT LAYOUT
   ================================================================= */

.we-page-content {
  width: 100%;
  overflow-x: hidden;
}

/* Catch-all: every direct child is constrained to 900px unless it explicitly
   opts out with alignfull or alignwide. This handles any block type that comes
   out of the database — paragraphs, groups, freeform, columns, whatever —
   without needing to list each one individually. */
.we-page-content > *:not(.alignfull):not(.alignwide) {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Full-width blocks: span the viewport */
.we-page-content > .alignfull,
.we-page-content > .wp-block-group.alignfull,
.we-page-content > .wp-block-cover.alignfull,
.we-page-content > .wp-block-columns.alignfull,
.we-page-content > .wp-block-image.alignfull {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Wide blocks */
.we-page-content > .alignwide,
.we-page-content > .wp-block-group.alignwide,
.we-page-content > .wp-block-columns.alignwide,
.we-page-content > .wp-block-image.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Pattern blocks with their own .container stay centered */
.we-page-content .container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Spacing between full-width and regular blocks */
.we-page-content > .alignfull + .alignfull {
  margin-top: 0;
}

.we-page-content > .alignfull + p,
.we-page-content > .alignfull + h2,
.we-page-content > .alignfull + h3,
.we-page-content > .alignfull + ul,
.we-page-content > .alignfull + ol {
  margin-top: 3rem;
}

.we-page-content > p + .alignfull,
.we-page-content > ul + .alignfull,
.we-page-content > ol + .alignfull,
.we-page-content > h2 + .alignfull,
.we-page-content > h3 + .alignfull {
  margin-top: 3rem;
}


/* =================================================================
   2. LIST BULLET RESTORATION
   =================================================================
   Tailwind Preflight sets: ol, ul { list-style: none; margin: 0; padding: 0; }
   These rules restore bullets/numbers for page content.
   ================================================================= */

/* Unordered lists get disc bullets */
.we-page-content ul:not(.checklist):not(.list-none),
.we-page-content .wp-block-list,
.we-page-content .wp-block-freeform ul {
  list-style-type: disc !important;
  padding-left: 1.625rem !important;
  margin-bottom: 1rem !important;
}

/* Ordered lists get numbers */
.we-page-content ol:not(.list-none),
.we-page-content .wp-block-freeform ol {
  list-style-type: decimal !important;
  padding-left: 1.625rem !important;
  margin-bottom: 1rem !important;
}

/* Nested list styles */
.we-page-content ul:not(.checklist) ul { list-style-type: circle !important; }
.we-page-content ul:not(.checklist) ul ul { list-style-type: square !important; }
.we-page-content ol ol { list-style-type: lower-alpha !important; }

/* List item spacing */
.we-page-content li {
  margin-bottom: 0.375rem;
  line-height: 1.625;
}


/* =================================================================
   3. CONTENT TYPOGRAPHY
   ================================================================= */

/* Heading spacing — no > so these apply inside groups too */
.we-page-content h2 { margin-top: 2rem; margin-bottom: 1rem; }
.we-page-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.we-page-content h4 { margin-top: 1.25rem; margin-bottom: 0.5rem; }

/* Paragraph breathing room — no > so these apply inside groups too */
.we-page-content p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

/* Classic editor blocks */
.we-page-content .wp-block-freeform {
  line-height: 1.75;
}


/* =================================================================
   4. CHECKLIST PATTERN STYLING
   ================================================================= */

.we-page-content .checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
}

.we-page-content .checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  line-height: 1.5;
}

.we-page-content .checklist li svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: hsl(195, 23%, 29%); /* --primary */
}


/* =================================================================
   5. MOBILE SPLIT-PANEL NAVIGATION
   =================================================================
   Left side: parent menu items
   Right side: child items appear on tap
   ================================================================= */

/* Parent list — clean, no bullets */
.mobile-parent-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-parent-list li {
  margin: 0 !important;
}

/* Hide the nested sub-menu in the left panel — JS reads it */
.mobile-parent-list .mobile-sub-menu {
  display: none !important;
}

/* Parent item links */
.mobile-parent-list > .mobile-nav-parent > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s, color 0.15s;
}

.mobile-parent-list > .mobile-nav-parent > a:active,
.mobile-parent-list > .mobile-nav-parent.is-active > a {
  background-color: hsl(195, 23%, 29%);
  color: #fff;
}

/* Arrow indicator for parents with children */
.mobile-parent-list > .mobile-nav-parent.has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-left: 0.5rem;
  opacity: 0.5;
}

.mobile-parent-list > .mobile-nav-parent.is-active.has-children > a::after {
  opacity: 1;
}

/* Right panel: child items */
#mobile-children-container {
  min-height: 100%;
}

#mobile-children-container ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mobile-children-container li {
  margin: 0 !important;
}

#mobile-children-container a {
  display: block;
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.15s, color 0.15s;
}

#mobile-children-container a:active {
  background-color: hsl(195, 23%, 29%);
  color: #fff;
}

/* "View all" link at top of children panel */
.mobile-children-viewall {
  display: block;
  padding: 0.625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(195, 23%, 29%);
  text-decoration: none;
  border-bottom: 2px solid hsl(195, 23%, 29%);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.mobile-children-viewall:active {
  background-color: hsl(195, 23%, 29%);
  color: #fff;
}


/* =================================================================
   6. NATIVE GUTENBERG PATTERN STYLING
   =================================================================
   Styles for the rewritten content patterns that use native WordPress
   blocks (wp:group, wp:columns, wp:list, wp:image, etc.)
   ================================================================= */

/* Section wrapper */
.we-section {
  background-color: hsl(0, 0%, 100%);
}

/* Container — constrains content to readable width */
.we-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Narrow container for centered text sections */
.we-container--narrow {
  max-width: 900px !important;
}

/* Also constrain wp-block-columns inside we-section when no explicit container */
.we-section > .wp-block-columns {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Columns inside patterns — gap and alignment */
.we-section .wp-block-columns {
  gap: 3rem;
}

/* Image in a card style */
.we-card-image img {
  border-radius: 1rem;
  box-shadow: 0 4px 16px -8px rgba(62, 83, 88, 0.2);
  width: 100%;
  height: auto;
}

/* Lists inside pattern sections get proper bullets */
.we-section .wp-block-list {
  list-style-type: disc !important;
  padding-left: 1.625rem !important;
  margin-bottom: 0.75rem !important;
}

.we-section .wp-block-list li {
  margin-bottom: 0.25rem;
  line-height: 1.5;
  color: hsl(0, 0%, 40%);
}

/* Headings inside pattern sections */
.we-section h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(0, 0%, 20%);
  margin-bottom: 0.75rem;
}

.we-section h3 {
  font-size: 1.25rem;
  font-weight: 700 !important;
  color: hsl(0, 0%, 20%);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

/* Paragraphs inside pattern sections */
.we-section p {
  color: hsl(0, 0%, 40%);
  line-height: 1.6;
  margin-bottom: 0.625rem;
}

/* Ensure columns inside patterns don't overflow */
.we-section .wp-block-column {
  overflow: hidden;
  word-wrap: break-word;
}

/* Video embed — round corners and shadow */
.we-section--video-form .wp-block-embed {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  margin-top: 0;
  margin-bottom: 0;
}

/* Video-form section — tighter layout */
.we-section--video-form {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.we-section--video-form .wp-block-columns {
  align-items: flex-start !important;
  gap: 2rem;
}

/* Make the video sticky so it stays visible while scrolling the form */
.we-section--video-form .wp-block-column:first-child {
  position: sticky;
  top: 8rem;
}

.we-section--video-form .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.we-section--video-form .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Remove excess margins from blocks inside the video-form section */
.we-section--video-form .wp-block-column > *:first-child {
  margin-top: 0;
}

.we-section--video-form .wp-block-column > *:last-child {
  margin-bottom: 0;
}

.we-section--video-form figure {
  margin: 0;
}

/* Constrain textarea height in forms */
.we-section--video-form textarea,
.we-section textarea.form-input,
.wpcf7-form textarea {
  max-height: 100px;
  min-height: 60px;
  resize: vertical;
}

/* Tighten form label-to-input spacing */
.we-section--video-form .form-label,
.we-section--video-form .wpcf7-form label {
  margin-bottom: 0.125rem !important;
  padding-bottom: 0 !important;
  font-size: 0.8125rem;
}

.we-section--video-form .form-field,
.we-section--video-form .form-field-grid {
  margin-bottom: 0.5rem !important;
}

.we-section--video-form .form-field-grid {
  gap: 0.75rem !important;
}

.we-section--video-form .form-input,
.we-section--video-form .wpcf7-form input,
.we-section--video-form .wpcf7-form textarea {
  margin-top: 0.125rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.we-section--video-form .wpcf7-form {
  margin-top: 0.5rem;
}

/* Tighten the heading and description above the form */
.we-section--video-form h3 {
  margin-bottom: 0.25rem !important;
}

.we-section--video-form .text-sm {
  margin-bottom: 0.75rem !important;
  font-size: 0.8125rem;
}

/* Shortcode block (forms) — add some visual separation */
.we-section .wp-block-shortcode {
  margin-top: 1.5rem;
}

/* Responsive: stack columns on mobile */
@media (max-width: 781px) {
  .we-section .wp-block-columns {
    gap: 2rem;
  }
  
  .we-section h2 {
    font-size: 1.5rem;
  }
}