/**
 * @file
 * Visual styles for Hilltop theme landing page content type.
 */
.page-node-type-mt-canvas-page .main-content__section,
.page-node-type-mt-canvas-page .sidebar__section {
  padding: 0;
}

/*layout builder*/
.page-node-type-mt-canvas-page .layout-builder__layout .layout-builder-block {
  background-color: transparent;
}
.page-node-type-mt-canvas-page .layout-builder__layout .block ~ .block {
  padding-top: 10px;
}
.page-node-type-mt-canvas-page .block-local-tasks-block,
.page-node-type-mt-canvas-page .node-layout-builder-form,
.page-node-type-mt-canvas-page .block-help-block {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .page-node-type-mt-canvas-page .block-local-tasks-block,
  .page-node-type-mt-canvas-page .node-layout-builder-form,
  .page-node-type-mt-canvas-page .block-help-block {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .page-node-type-mt-canvas-page .block-local-tasks-block,
  .page-node-type-mt-canvas-page .node-layout-builder-form,
  .page-node-type-mt-canvas-page .block-help-block {
      max-width: 720px;
  }
}
@media (min-width: 992px) {
  .page-node-type-mt-canvas-page .block-local-tasks-block,
  .page-node-type-mt-canvas-page .node-layout-builder-form,
  .page-node-type-mt-canvas-page .block-help-block {
      max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .page-node-type-mt-canvas-page .block-local-tasks-block,
  .page-node-type-mt-canvas-page .node-layout-builder-form,
  .page-node-type-mt-canvas-page .block-help-block {
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width: 1500px) {
  .page-node-type-mt-canvas-page .block-local-tasks-block,
  .page-node-type-mt-canvas-page .node-layout-builder-form,
  .page-node-type-mt-canvas-page .block-help-block {
    max-width: 1440px;
  }
}
#drupal-off-canvas .block-categories .layout-builder-browser-block-item {
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

/* ========================================
   RM CONSTRUCTION LANDING PAGE STYLES
   Added: 2025-11-18
   ======================================== */

/**
 * Landing Page Component Styles
 *
 * This file contains structural CSS for the landing page template.
 * Figma-generated CSS files will be added separately by CSS agent.
 *
 * CSS Agent Handoff:
 * - This file should contain only essential structural CSS
 * - Figma design CSS should be added to /css/figma/ directory
 * - See LANDING_PAGE_IMPLEMENTATION_NOTES.md for full specifications
 */

/* ========================================
   LANDING PAGE BASE STRUCTURE
   ======================================== */

.node--landing-page {
  /* Container for all landing page sections */
}

/* Section containers with consistent structure */
.lp-section-container {
  max-width: 1440px;
  margin: 0 auto;
  /* CSS_AGENT_TODO: Add responsive padding and breakpoints */
}

/* ========================================
   HERO SECTION STRUCTURE
   ======================================== */

.lp-hero-section {
  /* CSS_AGENT_TODO: Height: 603px, split layout at 759px */
}

.lp-hero-container {
  display: flex;
  /* CSS_AGENT_TODO: Implement split layout (beige left, image right) */
}

.lp-hero-content {
  /* Left side - beige background #EDE6DA */
  /* CSS_AGENT_TODO: Width 0-759px, padding, vertical alignment */
}

.lp-hero-image {
  /* Right side - hero image */
  /* CSS_AGENT_TODO: Width 759-1440px, image scaling */
}

/* ========================================
   FEATURE CARDS GRID
   ======================================== */

.lp-feature-cards-grid {
  display: grid;
  /* CSS_AGENT_TODO: 4-column grid, gap, responsive stacking */
}

.lp-feature-card {
  /* CSS_AGENT_TODO: 275px × 240px, white background, shadow */
}

/* ========================================
   WHAT WE HANDLE - TWO COLUMN CHECKLIST
   ======================================== */

.lp-checklist-columns {
  /* CSS_AGENT_TODO: Two-column layout with proper distribution */
}

.lp-checklist-item {
  display: flex;
  align-items: flex-start;
  /* CSS_AGENT_TODO: Spacing, alignment */
}

.lp-checklist-checkmark {
  /* CSS_AGENT_TODO: Orange checkmark styling (#E76F2C) */
  /* Can use icon, SVG, or CSS pseudo-element */
}

.lp-project-images-grid {
  display: grid;
  /* CSS_AGENT_TODO: 3-column grid, images 375×260px */
}

/* ========================================
   PROCESS SECTION - SPLIT LAYOUT
   ======================================== */

.lp-process-split {
  display: flex;
  /* CSS_AGENT_TODO: Left (images) / Right (steps) split */
}

.lp-process-images {
  /* CSS_AGENT_TODO: Two images positioning */
}

.lp-process-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* CSS_AGENT_TODO: Vertical spacing between steps */
}

.lp-process-step {
  /* CSS_AGENT_TODO: Step layout with number, icon, content */
}

/* ========================================
   SERVING THE VALLEY SECTION
   ======================================== */

.lp-valley-split {
  display: flex;
  /* CSS_AGENT_TODO: Left (content) / Right (map) split */
}

/* ========================================
   TESTIMONIALS SECTION
   ======================================== */

.lp-testimonial-card {
  /* CSS_AGENT_TODO: Card styling, padding, background */
}

.lp-testimonial-stars {
  /* CSS_AGENT_TODO: Star layout and spacing */
}

.lp-star {
  /* CSS_AGENT_TODO: Individual star styling */
}

.lp-star--filled {
  color: #E76F2C; /* Orange for filled stars */
}

/* ========================================
   CONTACT FORM SECTION - SPLIT LAYOUT
   ======================================== */

.lp-contact-split {
  display: flex;
  /* CSS_AGENT_TODO: Left (image) / Right (form) split */
}

.lp-contact-form-container {
  /* Beige background #EDE6DA */
  /* CSS_AGENT_TODO: Padding, width */
}

.lp-contact-form {
  /* CSS_AGENT_TODO: 2-column form layout */
}

/* ========================================
   DRUPAL FIELD WRAPPER OVERRIDES
   ======================================== */

/* CSS_AGENT_TODO: Override Drupal default field wrappers
   - .field
   - .field-item
   - .field-items
   - .field-label
   May need to remove margins/padding that interfere with Figma layout
*/

/* ========================================
   WEBFORM STYLING
   ======================================== */

/* CSS_AGENT_TODO: Drupal Webform classes to style:
   - .webform-submission-form
   - .form-item
   - .form-type-textfield
   - .form-type-email
   - .form-type-tel
   - .form-type-select
   - .form-type-textarea
   - .form-actions
   - .webform-button--submit

   Implement 2-column layout for form fields
*/

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* CSS_AGENT_TODO: Add responsive CSS

   Mobile: 320px - 767px
   - Stack all split layouts vertically
   - Feature cards: 1 column
   - Hero: Stack content over image
   - Form: Single column

   Tablet: 768px - 1023px
   - Feature cards: 2 columns
   - Adjust spacing

   Desktop: 1024px - 1440px
   - Feature cards: 4 columns
   - Full Figma design layout
*/

/* ========================================
   ACCESSIBILITY
   ======================================== */

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/**
 * END OF STRUCTURAL CSS
 *
 * Next Steps for CSS Agent:
 * 1. Create /css/figma/landing-page-layout.css (section layouts, grid systems)
 * 2. Create /css/figma/landing-page-components.css (component-specific styles)
 * 3. Create /css/figma/landing-page-typography.css (Montserrat font styles)
 * 4. Uncomment library references in cleanplus.libraries.yml
 * 5. Test responsive behavior
 * 6. Validate against Figma design specifications
 */