/*
 Theme Name: ApartmentCities Astra Child
 Theme URI: https://www.apartmentcities.com/
 Description: Child theme for Astra with AC header/footer + list layout.
 Author: ApartmentCities
 Template: astra
 Version: 1.1.0
 Text Domain: apartmentcities-astra-child
*/
body { background:#f4f4f4; color:#757575; font: 15px Roboto, sans-serif; line-height: 1.6em;}
a { color:#2196f3!important; text-decoration:none; }
.blog .ast-article-post, .archive .ast-article-post {
  background:#ffffff; padding:24px; margin-bottom:16px; box-shadow:0 1px 4px rgba(60,64,67,0.30);
}
a:hover { color:#0b3a86!important; }
.blog .ast-article-post .post-thumb-img-content, 
.archive .ast-article-post .post-thumb-img-content {
  float:left; width:100%; max-width:150px; margin:0 2em 0 0;
}
.entry-title, .archive .entry-title { 
  color:#2196f3!important; font-weight:700; font-size:30px; line-height:1.2; margin:0 0 8px;
}
.entry-title a {font: bold 28px Roboto, sans-serif; margin: 0 0 8px; max-width: calc(100% - 48px);
}

/* Right-align Read More on blog/archive */
.blog .read-more,
.archive .read-more { display: block; text-align: right; margin-right: 12px; font-weight: 700; 
 text-transform: uppercase; flex: 0 0 auto; margin-top:.5rem;
}
/*Table header*/
thead th {
    background: #f7f7f7; font-weight: 600; border: 1px solid #e5e7eb; padding: 8px; text-align: left; display: table-cell;
    vertical-align: inherit; text-align: -internal-center; unicode-bidi: isolate;
}
.blog .entry-content, .archive .entry-content { line-height:1.6; }

/* Important for list layput on the blog page */
@media (min-width: 922px) {
.site-content .ast-container {display: block; }
}
/* === Related posts: image 120x120 left, text right, one per row === */
/* Related posts: 2-column grid so header is above excerpt on the right */
.ast-related-post .ast-related-post-content {
  display: grid !important;
  grid-template-columns: 120px 1fr;
  column-gap: 16px;
  align-items: start;
}
/* Left column = image, spanning both rows */
.ast-related-post .ast-related-post-featured-section {
  grid-column: 1;
  grid-row: 1 / span 2;
}
/* Right column, row 1 = header */
.ast-related-post .related-entry-header {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 6px;
}
/* Right column, row 2 = excerpt (and read more) */
.ast-related-post .entry-content {
  grid-column: 2;
  grid-row: 2;
}
/* Ensure image is 120×120 and not scaled */
.ast-related-post .post-thumb-img-content img,
.ast-related-post .wp-post-image,
.ast-related-post .ac-related-thumb {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  max-width: none !important;
}
/* One related item per row */
.ast-related-posts-wrapper .ast-related-post {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  clear: both !important;
  margin: 0 0 12px;
}
/*---margin-top control --- */
.ast-related-post-featured-section { margin: 11px 0 0 0!important;}
.ast-related-post-content .entry-meta {margin: 0!important;}

/* Optional: mobile stack */
@media (max-width: 768px) {
  .ast-related-post .ast-related-post-content {
    grid-template-columns: 96px 1fr;
    column-gap: 12px;
  }
  /* Switch to single-column stack */
  .ast-related-post .ast-related-post-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 12px;
  }

  /* Order: image (row 1) → header (row 2) → excerpt (row 3) */
  .ast-related-post .ast-related-post-featured-section { grid-column: 1; grid-row: 1; margin: 0; }
  .ast-related-post .related-entry-header                 { grid-column: 1; grid-row: 2; margin: 0 0 6px; }
  .ast-related-post .entry-content                        { grid-column: 1; grid-row: 3; }

  /* Image sizing: 400px wide but never overflow screen */
  .ast-related-post .post-thumb-img-content img,
  .ast-related-post .wp-post-image,
  .ast-related-post .ac-related-thumb {
    width: 400px!important;
    max-width: 100% !important;   /* prevent overflow on small phones */
    height: 120px!important;      /* keep aspect ratio */
    object-fit: cover;
    display: block;
    margin: 0 auto;               /* center the image */
  }	
}
/* === Related posts End ====*/

/* Date under title */
.ac-list-date{font-size:12px; color:#757575; margin: 0 0 8px;}

/* 2-column row: 120x120 left thumb + excerpt right */
.ac-list-row { display:flex; align-items:flex-start; gap:16px; }
.ac-list-thumb { display:block; flex:0 0 120px; width:120px; height:120px; background:#eee; overflow:hidden; }
.ac-list-thumb img { width:120px; height:120px; object-fit:cover; display:block; }
.ac-thumb-empty { background:#f0f0f0; border:1px solid #e5e7eb; }
.ac-list-excerpt { flex:1 1 auto; line-height:1.6; }

/* Make sure Astra grids don't force 33% cards */
.ast-blog-layout-4-grid .ast-row{ display:block !important; }
.ast-blog-layout-4-grid .ast-article-post{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; }

/*Google Adsense for bottom space*/
.blogs-4th-in-feed-ads{ margin-bottom: 5px!important;}
.blogs-7th-inject-ads { margin-bottom: 5px!important;}

/* Mobile */
@media (max-width: 600px){
  .ac-list-row{ gap:12px; }
  .ac-list-title, .ac-list-title a{ font: bold 20px Roboto, sans-serif; }
}

@media (max-width: 768px){
  .blog .ast-article-post .post-thumb-img-content, 
  .archive .ast-article-post .post-thumb-img-content { width:22vw; max-width:128px; margin:0 3vw 3vw 0; }
  .blog .entry-title, .archive .entry-title { font-size:22px; }
}

/* ===== Mobile truncation for archive cards ===== */
@media (max-width: 768px) {
  /* Title: 3 lines max */
  .ac-list-card .ac-list-title,
  .ac-list-card .ac-list-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* clamp lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em;             /* ~2 lines @ ~1.6 line-height */
    line-height: 1.3;
  }

  /* Excerpt: 5 lines max (adjust to taste: 3 or 4) */
  .ac-list-card .ac-list-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 5;         /* change to 4 if you want a bit more */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Helps avoid big bottom gaps from child <p> margins */
    margin-top: .25rem;
  }
  .ac-list-card .ac-list-excerpt p {
    margin: 0;                      /* collapse paragraph margins in the clamp box */
    line-height: 1.6;
  }

  /* Keep image and text aligned nicely on small screens */
  .ac-list-card .ac-list-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: start;
  }
  /* If screen is very narrow, stack image on top */
  @media (max-width: 400px) {
    .ac-list-card .ac-list-row {
      grid-template-columns: 1fr;
    }
    .ac-list-card .ac-list-thumb {
      display: block;
      width: 100%;
      min-width: 290px;         /* ensure ≥300px even on tiny viewports */
      height: 120px;
      margin: 0;                /* tidy */
    }
  .ac-list-card .ac-list-thumb img {
    width: 100%;
    min-width: 270px;         /* mirror container; prevents sub-300 shrink */
    height: 120px;
    object-fit: cover;
    }	  
  }
}
/* Optional: consistent ellipsis for the "… Read More" suffix in excerpts */
.ac-list-card .read-more { white-space: nowrap; }
/* ===== Mobile truncation End */

/*post page*/
h1, .entry-content :where(h1) {font-size: 2em!important;}
h2, .entry-content :where(h2) {font-size: 1.7em!important;}
h1, h2, h3, h4, h5, h6 {color: #808285!important;}  

:root{
  --ac-brand-bg:#0ea5e9;
  --ac-brand-text:#ffffff;
  --ac-accent:#0ea5e9;
  --ac-header-h:64px;
  --ac-maxw:1200px;
  --ac-footer-bg:#0f172a;
  --ac-footer-text:#e5e7eb;
  --ac-footer-muted:#94a3b8;
  --ac-link-on-header:#377df4;
  --ac-header-bg-img:url(https://www.apartmentcities.com/images/formBk.gif);
  --ac-btn-bg:rgba(255,255,255,.7);
  --ac-btn-bg-hover:rgba(255,255,255,.85);
  --ac-btn-text:#0b3a86;
  --ac-border:rgba(255,255,255,.9);
  --ac-menu-max:1200px;
}
.ac-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.ac-container{margin:0 auto;max-width:var(--ac-maxw);width:100%;}
#ac-header *, #ac-footer *{box-sizing:border-box;}
#ac-header a, #ac-footer a{outline:none;}
#ac-header{ background:var(--ac-brand-bg); color:var(--ac-brand-text);
  height:var(--ac-header-h); display:flex; align-items:center; width:100%;
  position:relative; z-index:100; background-image:var(--ac-header-bg-img);
  background-repeat:repeat-x; background-size:auto 62px; background-position:center; overflow:visible;
}
#ac-header .ac-container{ display:flex;align-items:center;justify-content:space-between; gap:16px; padding:0 16px; }
#ac-header .ac-brand{ display:inline-flex;align-items:center;gap:12px; text-decoration:none; color:inherit; line-height:1; }
#ac-header .ac-brand img{ width:auto; display:block; }
#ac-header .ac-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
#ac-header .ac-actions a{ color:var(--ac-brand-text); text-decoration:none; font-weight:600; font-size:14px; opacity:.95; }
#ac-header .ac-actions a:hover{ text-decoration:underline; }
.navbar{ display:flex; align-items:center; gap:16px; height:var(--ac-header-h); width:100%; }
.navbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; border:1px solid var(--ac-border);
  font-weight:700; font-size:14px; line-height:1; text-decoration:none; background:var(--ac-btn-bg); color:var(--ac-btn-text); appearance:none;
  transition:background .15s ease, box-shadow .15s ease; }
.btn:hover{ background:var(--ac-btn-bg-hover); box-shadow:0 2px 6px rgba(0,0,0,.12); }
#ac-header .dropdown, #ac-header .ac-dropdown { position:relative; display:inline-block; }
#ac-header .dropdown-toggle{ cursor:pointer; user-select:none; padding:7px; }
#ac-header .caret{ display:inline-block; margin-left:6px;
  border-top:4px solid var(--ac-link-on-header); border-left:4px solid transparent; border-right:4px solid transparent; height:0; width:0; }
#ac-header .ac-actions a, #ac-header .navbar a.btn, #ac-header .navbar .dropdown-toggle, #ac-header .navbar-right a.header-menu-btn { color:var(--ac-link-on-header) !important; }
#ac-footer{ background:var(--ac-footer-bg); color:var(--ac-footer-text); padding:28px 16px 40px; margin-top:40px; }
#ac-footer .ac-links{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-bottom:12px; }
#ac-footer .ac-links a{ color:var(--ac-footer-text); text-decoration:none; font-weight:600; font-size:14px; }
#ac-footer .ac-links a:hover{ color:var(--ac-accent); }
#ac-footer .ac-legal{ color:var(--ac-footer-muted); font-size:12px; line-height:1.5; }
header.centered-top-container.sticky { margin:0; padding:0; background:transparent; }

/* ===== Buttons (match Blogger design tokens) ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px; border:1px solid var(--ac-border);
  font-weight:700; font-size:14px; line-height:1; text-decoration:none;
  background:var(--ac-btn-bg); color:var(--ac-btn-text);
  -webkit-appearance:none; appearance:none;
  transition:background .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:var(--ac-btn-bg-hover); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.btn.btn-default{ color:var(--ac-btn-text); }

/* Make header links readable blue incl. dropdown triggers */
#ac-header .ac-actions a,
#ac-header .navbar a.btn,
#ac-header .navbar .dropdown-toggle,
#ac-header .navbar-right a.header-menu-btn{
  color:var(--ac-link-on-header) !important;
}
#ac-header .ac-actions a:hover,
#ac-header .navbar a.btn:hover,
#ac-header .navbar .dropdown-toggle:hover,
#ac-header .navbar-right a.header-menu-btn:hover{ text-decoration:underline; }

/* ===== Dropdowns ===== */
.dropdown, .ac-dropdown { position:relative; display:inline-block; }
.dropdown-inline{ display:inline-block; }
.dropdown-toggle{ cursor:pointer; user-select:none; padding:7px; }
.caret{
  display:inline-block; margin-left:6px;
  border-top:4px solid currentColor; border-left:4px solid transparent; border-right:4px solid transparent;
  height:0; width:0;
}
#ac-header .caret{ border-top-color:var(--ac-link-on-header) !important; }
table {margin: 0px!important;}
.dropdown-menu td {border: 0px!important;}

/* Panel (click-controlled) */
.dropdown-menu{
  position:absolute; top:100%; left:0;
  background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding:12px; margin-top:0; /* no gap so clicks don't break */
  z-index:10000; display:none;
  width:max-content; min-width:520px;  /* default */
  max-width:min(92vw, 1000px);
  transform-origin:top left;
}
#ac-header .dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* OPEN STATE: show when aria-expanded or .is-open */
.dropdown[aria-expanded="true"] > .dropdown-menu,
.dropdown.is-open > .dropdown-menu,
[data-dropdown][aria-expanded="true"] > .dropdown-menu,
[data-dropdown].is-open > .dropdown-menu { display:block !important; }

/* Specific widths for your two mega menus */
.dropdown-menu.ac-mega--states{ min-width:600px; }  /* 4 columns */
.dropdown-menu.ac-mega--cities{ min-width:440px; }  /* 2 columns */

/* Mega table/link styles */
#ac-header .dropdown-menu table{ width:100%; border-collapse:collapse; table-layout:auto; }
#ac-header .dropdown-menu td{ vertical-align:top; padding:4px 8px; }
#ac-header .dropdown-menu ul{ list-style:none; margin:0; padding:0; }
#ac-header .dropdown-menu a{
  display:block; padding:6px 8px; border-radius:6px;
  color:#0f172a; text-decoration:none; font-weight:600; font-size:14px;
}
#ac-header .dropdown-menu a:hover{ background:#f1f5f9; color:#0f172a; }

/* Ensure panel anchors under button within header action area */
.ac-actions .dropdown, .ac-actions [data-dropdown]{ position:relative; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .dropdown-menu{
    min-width:0; width:calc(100vw - 24px); max-height:70vh; overflow:auto;
  }
  #ac-header .dropdown-menu table,
  #ac-header .dropdown-menu tbody,
  #ac-header .dropdown-menu tr,
  #ac-header .dropdown-menu td{
    display:block; width:100%;
  }
}
@media (max-width: 600px){
  .navbar-right{ display:none; }
  .dropdown-menu.ac-mega--states{ min-width:330px; }
  .dropdown-menu.ac-mega--cities{ min-width:220px; }
}

/* Optional: tighten spacing between the two buttons */
#ac-header .ac-actions { gap:12px; }