/* Responsive / mobile overrides.
   The base stylesheet (Blueprint grid, ~2013) is fixed at 950px with
   no media queries. This file adapts the layout for smaller screens
   without touching the original vendored CSS. */

*{box-sizing:border-box}

/* Heading hierarchy fix: the header brand/house-name lines are
   masthead branding, not content headings - the real per-page H1 is
   the content section's former h3. Same visual style as before
   (copied from the original #title h1 / #title h2 / #page h3 rules),
   just on the correct elements. */
.brand-logo{float:left;letter-spacing:2px;font-size:36px;line-height:1;margin:0;
  font-weight:400;font-family:'Calligraffitti', cursive;color:#505C41;
  text-shadow:0px 1px 1px #AAA}
.house-name{float:left;font-size:26px;line-height:1.5;margin-top:7px;margin-left:155px;margin-bottom:0;
  font-weight:400;font-family:'Calligraffitti', cursive;color:#505C41;
  text-shadow:0px 1px 1px #AAA}
#page h1.page-heading{color:#596166;font-family:'Voces', cursive;
  font-size:21px;font-weight:normal;margin:3px 0px 10px}

/* Desktop: give the header/menu a bit more breathing room above the
   page content than the original 40px */
@media (min-width: 769px) {
  #header{margin-bottom:65px}
}

@media (max-width: 768px) {
  .container{width:100% !important;max-width:100%;padding:0 16px}

  .column,.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,
  .span-9,.span-10,.span-11,.span-12,.span-13,.span-14,.span-15,.span-16,
  .span-17,.span-18,.span-19,.span-20,.span-21,.span-22,.span-23,.span-24{
    width:100% !important;float:none !important;margin-right:0 !important
  }
  .prepend-1,.prepend-2,.prepend-3,.prepend-4,.prepend-5,.prepend-6,.prepend-7,
  .prepend-8,.prepend-9,.prepend-10{padding-left:0}
  .append-1,.append-2,.append-3,.append-4,.append-5,.append-6,.append-7,
  .append-8,.append-9,.append-10{padding-right:0}

  /* Header / logo / nav */
  #header{height:auto;background:none;padding-bottom:10px;margin-bottom:35px}
  #label{float:none;display:flex;flex-direction:row-reverse;justify-content:center;gap:8px;margin:0 0 10px}
  #label p{float:none;margin:0}
  #title{background:none;height:auto;text-align:center;margin-bottom:15px}
  #title h1,.brand-logo{float:none;font-size:28px}
  #title h2,.house-name{float:none;margin-left:0;margin-top:4px;font-size:18px}
  .home_title{margin-top:10px}
  #menu{margin-top:12px}
  #menu ul{float:none;display:flex;flex-wrap:wrap;justify-content:center}
  #menu ul li{float:none;width:auto;text-align:center;margin:4px 10px}
  #page_title{margin-top:20px;margin-bottom:10px;font-size:13px}

  /* Home page photo grid - keep only the two clickable house photos,
     hide the decorative filler photos (blueberries/lake/flower/boat) */
  #image1,#image2,#image3,#image4{display:none}
  #image0,#image5{
    float:none;width:100% !important;height:auto;margin:0 0 10px
  }
  #image0 img,#image5 img{
    width:100%;height:auto;display:block
  }
  #image0 p,#image5 p{position:static;background:rgba(0,0,0,0.55);color:#fff;
    padding:10px;font-size:22px;text-indent:0;line-height:1.3}

  /* Offer page: text first, thumbnail below (source order has the
     image before the heading/paragraphs) */
  div.span-24.last:has(> img.content_image){display:flex;flex-direction:column}
  div.span-24.last:has(> img.content_image) > h1.page-heading{order:1}
  div.span-24.last:has(> img.content_image) > p{order:2}
  div.span-24.last:has(> img.content_image) > img.content_image{
    order:3;float:none;width:100%;max-width:100%;margin:15px 0 0
  }

  /* Attractions list - each item has a floated thumbnail list that
     otherwise escapes its (now stacked) container and overlaps the
     next item's heading/text */
  #attractions .attraction_thumbs{overflow:hidden}
  #attractions .attraction_thumbs ul{display:flex;flex-wrap:wrap}
  #attractions .attraction_thumbs ul li{float:none;margin:2px}
  #attractions .prepend-top{overflow:hidden}

  /* Gallery grid */
  #gallery ul{display:flex;flex-wrap:wrap;justify-content:center}
  #gallery ul li{float:none;width:46%;height:auto;margin:2%}
  #gallery ul li img{width:100%;height:auto}

  /* Pricing table */
  .table_header_title,.table_data_title{float:none;width:100% !important;text-align:left}
  .pricing table{display:block;overflow-x:auto;width:100%}
  .pricing th,.pricing td{white-space:nowrap}

  /* Contact page */
  #additional_info.contact_columns{flex-direction:column;gap:20px;padding:20px 0}
  #map iframe{width:100%}

  /* Footer */
  .forest_background{padding-bottom:10px}
  #footer .span-8{text-align:center;margin-bottom:15px}
  #footer p.h1{float:none}
  #footer p.copyright{margin:15px auto 0}
  #footer ul{margin:0;text-align:center}
  #footer ul li{text-indent:0;padding-left:26px;display:inline-block;text-align:left}

  .error_page h1{font-size:3.5em}
}

@media (max-width: 480px) {
  #title h1,.brand-logo{font-size:22px}
  #title h2,.house-name{font-size:15px}
  #menu ul li a{font-size:17px}
  #image0 p,#image5 p{font-size:17px}
  #gallery ul li{width:98%;margin:1%}
}