/* ==========================================================================
   Town of Clarke's Beach – responsive fixes (2026)
   Loaded after style.css by sitenav/_assets.inc.php. Mobile-first overrides
   that only correct layout; colours / typography stay as designed.
   ========================================================================== */

/* never allow horizontal scrolling caused by off-canvas animations / rows */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe, table { max-width: 100%; }
iframe { border: 0; }
.ip-lrg, .info-section, .announcements, #informationDiv { overflow-wrap: anywhere; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* honeypot field used by the public forms – keep it out of sight and out of the tab order */
.hp-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---- header ------------------------------------------------------------ */
#topHeader { padding: 4px 0; line-height: 1.2; }
#topHeader .row { margin-left: 0; margin-right: 0; }
#topHeader a { color: inherit; }
#btmHeader { padding: .5rem 12px; }
#header .logo { position: static; width: auto; }
#header .logo img { max-height: 90px; width: auto; }
.hdr-alert-txt { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.1; color: #333; font-size: .9rem; }
.hdr-alert-icon { font-size: 2.5rem; }
#dwnLoadBtn { position: static; display: inline-block; margin: 0; }
#dwnLoadBtn img { width: 144px; height: 56px; max-width: 100%; }


/* ---- home hero --------------------------------------------------------- */
#homeCarousel .carousel-item > img { width: 100%; object-fit: cover; }
.carousel-caption { word-wrap: break-word; }

/* ---- inner page banner -------------------------------------------------- */
.breadcrumbs > .d-flex { display: block !important; }
.breadcrumbs > .d-flex > img, .breadcrumbs img { width: 100%; height: auto; min-height: 0; object-fit: cover; display: block; }

/* ---- sections ------------------------------------------------------------ */
section.inner-page .ip-lrg { min-height: 0; }
section.inner-page .ip-lrg h1 { font-size: 1.35rem; }
section.inner-page .ip-lrg table { display: block; overflow-x: auto; }
.home-news .info-section { min-height: 0; max-height: none; }
#council .btn-group { position: static; margin-bottom: 8px; }
#why-us .wu_details { max-height: none; }
#admin_menu { left: auto; right: 0; font-size: 12px; }
.albumDiv .album-desc { font-size: .9rem; }
.notiForm { border-radius: 12px; padding: 20px 10px; }
#footer .footer-top h4 { margin-top: 10px; }

/* ===== phones ===== */
@media (max-width: 767.98px) {
	h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.15rem; }
	#header.fixed-top { position: relative; }
	#main.inner-page { margin-top: 0; }
	#topHeader { font-size: .8rem; }
	#btmHeader .row > div { padding: 4px 6px; }
	#header .logo img { max-height: 64px; }
	.hdr-alert a { margin: 0; }
	.hdr-alert-txt { font-size: .72rem; }
	.hdr-alert-icon { font-size: 1.9rem; }
	#dwnLoadBtn img { width: 110px; height: auto; }

	/* hero: caption sits under the image instead of floating over a 120px-tall picture */
	#homeCarousel .carousel-item > img { min-height: 220px; max-height: 260px; }
	#homeCarousel .carousel-caption { position: static; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 1rem .75rem; border: 0; border-radius: 0; background: #2f4f7f; animation: none !important; opacity: 1 !important; }
	#homeCarousel .carousel-caption h1, #homeCarousel .carousel-caption h2, #homeCarousel .carousel-caption h3 { font-size: 1.5rem; }
	#homeCarousel .carousel-caption p, #homeCarousel .carousel-caption p.lrg { font-size: 1rem; }
	#homeCarousel .carousel-control-prev, #homeCarousel .carousel-control-next { height: 220px; max-height: 60%; }
	#banner-imgs { position: static; padding: 6px 10px; }

	/* inner banner: search box below the picture */
	.breadcrumbs img { min-height: 110px; max-height: 170px; }
	.breadcrumbs .bc-caption { position: static; background: #537db3; padding: 10px 0 6px; }
	.breadcrumbs .bc-caption h1, .breadcrumbs .bc-caption h2, .breadcrumbs .bc-caption h3 { font-size: 1.4rem; margin-bottom: .5rem; }
	.breadcrumbs .bc-caption p { font-size: 1rem; margin-bottom: .5rem; }
	.breadcrumbs .bc-caption .row > .col-1 { display: none; }
	.breadcrumbs .bc-caption .row > .col-10 { flex: 0 0 100%; max-width: 100%; padding: 0 12px !important; }

	section.inner-page { padding: 16px 0; }
	section.inner-page .ip-lrg { padding: 12px; margin-bottom: 16px; }
	section.inner-page .ip-lrg img.float-start, section.inner-page .ip-lrg img[style*="float"] { float: none !important; display: block; margin: 0 auto 10px !important; max-width: 100% !important; }
	.viewPage { margin: 0; }
	#feedback .testimonials-side .t-quote { font-size: 1rem; }
	#specialoffer_view { width: calc(100% - 20px); max-width: 360px; left: 10px; right: auto; top: 25px; }
	.social-media-links img { height: 28px; width: auto; }
	#footer .footer-top { padding-top: 20px; }
	#footer .copyright .visits { display: block; padding: 4px 0 0; }
	.minutesDiv h4, #informationDiv h4, #informationDiv .infoDivTitle, .locationDiv h4, .agendaDiv h4 { white-space: normal; }
}

/* ===== tablets ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
	#header.fixed-top { position: relative; }
	#main.inner-page { margin-top: 0; }
	#header .logo img { max-height: 80px; }
	#homeCarousel .carousel-caption { bottom: 1rem; padding: 1.2rem 1rem; max-width: 60%; }
	#homeCarousel .carousel-caption h1, #homeCarousel .carousel-caption h2 { font-size: 1.8rem; }
	#homeCarousel .carousel-caption p, #homeCarousel .carousel-caption p.lrg { font-size: 1.1rem; }
	.breadcrumbs .bc-caption { bottom: .5rem; }
	.breadcrumbs .bc-caption h1 { font-size: 2rem; }
}

/* ===== small laptops ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ulTop li a { padding: .5rem .45rem; font-size: .85rem; }
}

/* rows inside statically positioned captions must not spill out of the viewport */
.breadcrumbs .bc-caption .row, .carousel-caption .row { margin-left: 0; margin-right: 0; }
#topHeader a { white-space: nowrap; }
#homeCarousel .carousel-control-next-icon, #homeCarousel .carousel-control-prev-icon { padding: 10px 20px 50px 20px; }
.announcements .sm-date, .home-news .sm-date { white-space: nowrap; font-size: .85rem; padding: 6px 2px; }
@media (max-width: 991.98px) { .home-news .announcements .col-2, .home-news .announcements .col-lg-2 { flex: 0 0 56px; max-width: 56px; } .home-news .announcements .col-10, .home-news .announcements .col-lg-10 { flex: 1 1 auto; max-width: calc(100% - 56px); } }

/* ==========================================================================
   Mobile / tablet navigation (<= 991px): hamburger bar + in-flow accordion menu
   ========================================================================== */
@media (max-width: 991.98px) {
	#menuHeader { padding: 0; }
	#menuHeader .container { padding: 0; max-width: 100%; }
	#menuHeader.header-scrolled { position: static; padding: 0; }
	#navbar.navbar { display: flex; flex-direction: column; width: 100%; background: #537db3; }
	#navbar .rht { order: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 10px 0 16px; cursor: pointer; }
	#navbar .rht::before { content: "MENU"; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .08em; font-size: 1.05rem; }
	#navbar .mobile-nav-toggle { position: static !important; display: block; font-size: 38px; line-height: 1; padding: 0; margin: 0; color: #fff; }
	#navbar .mobile-nav-toggle.bi-x { color: #fbd5a0; }
	#navbar > ul { order: 2; display: none; }

	#navbar.navbar-mobile { overflow: visible; background: #537db3; }
	#navbar.navbar-mobile > ul {
		display: block; position: static !important; top: auto; bottom: auto; width: 100%; margin: 0; padding: 0;
		background: #222; text-align: left; max-height: calc(100vh - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	#navbar.navbar-mobile > ul > li { display: block; width: 100%; white-space: normal; border: 0; border-top: 1px solid #3a3a3a; }
	#navbar.navbar-mobile > ul > li > a { display: block; padding: 14px 18px; font-size: 1rem; line-height: 1.3; margin: 0; text-align: left; color: #fbd5a0; background: transparent !important; }
	#navbar.navbar-mobile > ul > li > a:hover, #navbar.navbar-mobile > ul > li > a:focus { background: #333 !important; color: #fff; }
	#navbar.navbar-mobile .dropdown-toggle { display: flex !important; justify-content: space-between; align-items: center; }
	#navbar.navbar-mobile .dropdown-toggle::after { margin-left: .5em; }
	#navbar.navbar-mobile .dropdown-toggle.show { background: #333 !important; color: #fff; }

	/* sub menus open in place, never as floating popovers */
	#navbar.navbar-mobile .dropdown-menu { position: static !important; transform: none !important; inset: auto !important; float: none; display: none; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: #111; box-shadow: none; }
	#navbar.navbar-mobile .dropdown-menu.show, #navbar.navbar-mobile .dropdown-menu.dropdown-active { display: block; }
	#navbar.navbar-mobile a.dropdown-item { display: block; padding: 12px 18px 12px 32px; font-size: .95rem; white-space: normal; color: #ddd; border-bottom: 1px solid #2a2a2a; background: transparent; }
	#navbar.navbar-mobile a.dropdown-item:hover, #navbar.navbar-mobile a.dropdown-item:focus { background: #2e2e2e; color: #fff; }
}

/* Tourism Map (opens the town map) – highlighted last menu item */
.ulTop li a.nav-map-link { color: #d6f04a; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; padding-left: 1.2rem; }
.ulTop li a.nav-map-link:hover, .ulTop li a.nav-map-link:focus { color: #fff; }
.ulTop li a.nav-map-link .bi { margin-left: .5rem; font-size: 1.25rem; vertical-align: -2px; }
.ulTop li.nav-map { border-right: 0; }
@media (max-width: 991.98px) {
	#navbar.navbar-mobile > ul > li > a.nav-map-link { color: #d6f04a; font-weight: 700; }
	#navbar.navbar-mobile > ul > li > a.nav-map-link:hover { color: #fff; }
}

/* desktop menu: keep all items (incl. Tourism Map) on one row */
@media (min-width: 992px) {
	.ulTop li a { padding: .5rem .55rem; font-size: .85rem; }
	.ulTop li a.nav-map-link { font-size: 1rem; padding-left: .8rem; }
	.ulTop li a.nav-map-link .bi { margin-left: .35rem; font-size: 1.1rem; }
	#menuHeader .container { max-width: 1140px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ulTop li a { padding: .45rem .4rem; font-size: .78rem; }
	.ulTop li a.nav-map-link { font-size: .92rem; }
}