/* global-styles.css */

:root {
    /* Primary Colors */
    --brand-color: #C37655;
    --complementary-color: #B0A089;
    --background-color: #FDFBF8;
    --text-color: #020202;
    --illustration-color: #CCC2B3;
    --avisrur-center-color: #1186CC;
    --avisrur-center-color2: #F39200;
    --success-color: #009F42;
    --main-text-color: #fff;

    --headline-1-font-size: 64px;
    --headline-1-spacing: 36px;
    --headline-1-font-weight: bold;

}

* {
    box-sizing: border-box;
}

/* Ensure all H2 headings use Hadassah Friedlaender font */
h2,
.wp-block-heading h2,
.project-title h2,
.project-card h2,
.post-title h2 {
    font-family: 'Hadassah', 'HadassahFriedlaender-Regular', serif !important;
}

/* Ensure all text and buttons use Almoni ML v5 AAA font */
body,
p,
div:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
button,
input,
select,
textarea,
.wp-block-button__link,
.wp-block-paragraph,
span:not(.wp-block-heading span) {
    font-family: 'Almoni', 'almoni-regular-aaa' !important;
}

/* Ensure dark text uses #0E2038 color in project blocks */
.project-title p,
.project-card p,
.project-card span,
.project-card div:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.projects-container p,
.projects-container span,
.projects-container div:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.real-estate-container p,
.real-estate-container span,
.circular-card p,
.circular-card span {
    color: #0E2038 !important;
}

/* Override: Ensure project-overlay text is white */
.project-overlay p,
.project-overlay h3,
.project-card .project-overlay p,
.project-card .project-overlay h3,
html body .project-overlay p,
html body .project-overlay h3,
html body .project-card .project-overlay p,
html body .project-card .project-overlay h3 {
    color: white !important;
}

html, body {
    background-color: #FFFFFF !important ;
}

/* Project Image Sizing - Ensure all project images fill their containers */
.project-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.project-image, .project-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    outline: none;
}

.project-image-placeholder {
    background-color: #f0f0f0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
}

/* Responsive adjustments for project images */
@media (max-width: 768px) {
    .project-image-wrapper {
        min-height: 200px;
    }
    
    .project-image, .project-image-placeholder {
        min-height: 200px;
    }
}

@media (min-width: 769px) {
    .project-image-wrapper {
        min-height: 300px;
    }
    
    .project-image, .project-image-placeholder {
        min-height: 300px;
    }
}

/* Full width (stretches to the full width of the screen) */
.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Wide width (typically takes up most of the page width but not the full screen) */
.alignwide {
    width: 90%;
    max-width: 1240.55px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop-only padding for specific pages */
@media screen and (min-width: 768px) {
    body.page-id-1512, .body.page-id-22, body.page-id-2244, body.page-id-2246, body.page-id-27, body.page-id-2264{
      padding-top: 110px;
    }
    .split-banner-container {
        padding: 88px 0px;
      }
  }

  @media screen and (max-width: 768px) {
    body.page-id-1512, body.page-id-2368, body.page-id-2242,  body.page-id-2244, body.page-id-2246, body.page-id-27, body.page-id-2254, body.page-id-2264 {
      padding-top: 80px !important;
    }
  }

  /* about page */
  @media screen and (max-width: 768px) {
    .about-main-container {
        padding-top: 80px;
    }
    .about-main-headering {
        text-align: center;
    }
  }

  @media screen and (min-width: 768px) {
    .about-main-container {
        padding-top: 80px;
        margin-top: 80px;
        padding-bottom: 50px;
      }
  }