/* Mobile & responsive fixes - loaded after style.min.css */
@font-face{font-family:BebasNeueRegular;font-display:swap;src:url(../rotary-sass/stylesheets/bebas-neue-fontfacekit/BebasNeue-webfont.woff) format("woff")}

/* Nothing may push the page wider than the phone */
img,video,iframe,embed,object{max-width:100%}
img{height:auto}
.rotary-cd-photo{max-width:none;width:40px;height:40px;object-fit:cover}
select,input[type="text"],input[type="search"],input[type="email"],textarea{max-width:100%;box-sizing:border-box}

/* The member directory fills in by AJAX: reserve room so the footer does not jump */
.rotarymembershipcontainer:has(#rotaryclubdirectory,#rotarymembers){min-height:100vh}

/* The menu bar sits below the logo and the (right-floated) meeting details, however long they are */
#mainmenu{clear:both}

/* Menu button - phones only */
#menutoggle{display:none}

/* Board: initials when a member has no photo; long office titles wrap */
.bbrc-initials{display:flex;align-items:center;justify-content:center;color:#fff;font:700 52px/1 "Open Sans Condensed",Arial,Helvetica,sans-serif;letter-spacing:1px}

/* Projects synced from the Club Directory: facts and photo gallery */
.cd-project-facts{margin:10px 0 15px 18px;list-style:disc}
.cd-project-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:15px 0}
.cd-project-gallery img{display:block;width:100%;height:110px;object-fit:cover}

/* Project cards (Projects page and project archive) */
.project-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin:24px 0;clear:both}
.project-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e7ee;border-radius:4px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.project-card:hover{box-shadow:0 10px 28px rgba(0,36,108,.14);transform:translateY(-2px)}
.project-card__image{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#0067c8,#17458f)}
.project-card__image img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;transition:transform .4s ease}
.project-card:hover .project-card__image img{transform:scale(1.03)}
.project-card__placeholder{position:absolute;inset:0;background:url(../includes/images/rotary_wheel.png) center/42% no-repeat;opacity:.3}
.project-card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
#content .project-card__meta,.project-card__meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px;font:700 13px/1.3 "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.project-card__date{color:#0067c8}
.project-card__type{color:#77787b}
#content .project-card__title,.project-card__title{margin:0 0 8px;padding:0;font:700 22px/1.2 "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:none}
#content .project-card__title:first-letter{text-transform:uppercase}
.project-card__title a{color:#17458f;text-decoration:none}
.project-card__title a:hover{color:#0067c8}
#content .project-card__excerpt,.project-card__excerpt{flex:1;margin:0 0 14px;font-size:15px;line-height:1.55;color:#555;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.project-card__more{align-self:flex-start;font:700 14px "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#0067c8;text-decoration:none;border-bottom:2px solid #f7a81b;padding-bottom:2px}
.project-card__more:hover{color:#17458f}
.project-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 30px;padding:0;list-style:none}
.project-pagination a,.project-pagination span{display:block;min-width:40px;padding:8px 12px;border:1px solid #d5dae3;text-align:center;font:700 15px "Open Sans Condensed",Arial,Helvetica,sans-serif;color:#17458f;text-decoration:none}
.project-pagination .current{background:#17458f;border-color:#17458f;color:#fff}
.project-pagination a:hover{border-color:#17458f}

/* Member directory cards (Club Directory) */
.member-directory{clear:both;margin:10px 0 20px}
.rotarymembershipcontainer:has(.member-directory),.rotarymembershipheader:has(.member-directory),#rotarymembers_wrapper{border:0;min-height:0}
.rotarymembershipcontainer:has(.member-directory){min-height:0}
.member-directory__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 18px}
.member-search{flex:1 1 280px;max-width:460px;min-height:44px;padding:0 18px 0 42px;border:1px solid #cfd6e2;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2317458f' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") 16px center no-repeat;font-size:15px;color:#333}
.member-search:focus{outline:none;border-color:#0067c8;box-shadow:0 0 0 3px rgba(0,103,200,.15)}
.member-count{font:700 14px "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#77787b}
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.member-card{display:flex;flex-direction:column;width:100%;margin:0;padding:0;border:1px solid #e3e7ee;border-radius:6px;background:#fff;text-align:left;cursor:pointer;overflow:hidden;font:inherit;color:inherit;transition:box-shadow .2s ease,transform .2s ease}
.member-card:hover,.member-card:focus-visible{box-shadow:0 10px 26px rgba(0,36,108,.14);transform:translateY(-2px);outline:none}
.member-card:focus-visible{box-shadow:0 0 0 3px #f7a81b}
.member-card__photo{display:block;aspect-ratio:1/1;overflow:hidden;background:#eef2f7}
.member-card__photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 20%}
.member-card__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font:700 56px/1 "Open Sans Condensed",Arial,Helvetica,sans-serif;letter-spacing:1px}
.member-card__body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.member-card__name{font:700 19px/1.2 "Open Sans Condensed",Arial,Helvetica,sans-serif;color:#17458f}
.member-card__classification{font:700 13px/1.3 "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#0067c8}
.member-card__profession{font-size:14px;line-height:1.35;color:#555}
.member-card__since{margin-top:4px;font-size:13px;color:#8a8b8d}
.member-none{padding:20px 0;color:#77787b}
@media only screen and (max-width:766px){
	.member-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.member-card__initials{font-size:40px}
	.member-card__name{font-size:17px}
}

/* Projects: service buttons and Rotary year selector */
.project-filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin:20px 0 6px;clear:both}
.project-services{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.project-service{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;overflow:hidden;background:#1b1d22 var(--pill-photo,none) center/cover no-repeat;color:#fff!important;text-decoration:none!important;font:700 16px/1 "Open Sans Condensed",Arial,Helvetica,sans-serif;letter-spacing:.02em;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s ease,box-shadow .15s ease}
.project-service:before{content:"";position:absolute;inset:0;background:rgba(10,14,24,.72);transition:background .15s ease}
.project-service span{position:relative}
.project-service__count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin-left:10px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.2);font-size:13px;line-height:1}
.project-service.is-active .project-service__count{background:#f7a81b;color:#1b1d22}
.project-service.is-empty{opacity:.55}
.project-service.is-empty:hover{opacity:.8}
.project-cards-empty{margin:30px 0;padding:28px;border:1px dashed #cfd6e2;text-align:center;color:#77787b}
.project-service:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.project-service:hover:before{background:rgba(10,14,24,.55)}
.project-service.is-active{box-shadow:0 0 0 3px #f7a81b}
.project-service.is-active:before{background:rgba(0,36,108,.78)}
.project-service:focus-visible{outline:3px solid #f7a81b;outline-offset:2px}
.project-year{display:flex;align-items:center;gap:8px;margin:0}
.project-year label{font:700 14px "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#17458f}
.project-year select{min-height:40px;padding:0 34px 0 14px;border:1px solid #cfd6e2;border-radius:999px;background:#fff;font:700 15px "Open Sans Condensed",Arial,Helvetica,sans-serif;color:#17458f;cursor:pointer}
@media only screen and (max-width:766px){
	.project-filter{flex-direction:column;align-items:stretch}
	/* all services visible: they wrap instead of scrolling sideways */
	.project-services{gap:8px}
	.project-service{min-height:38px;padding:0 14px;font-size:14px}
	.project-service__count{min-width:20px;height:20px;margin-left:7px;padding:0 6px;font-size:12px}
}

/* Main menu (desktop): navy bar, gold underline for hover / current page, white drop-downs */
@media only screen and (min-width:767px){
	#mainmenu{height:auto;min-height:56px;background:#00246c}
	#mainmenu:after{content:"";display:table;clear:both}
	#mainmenu > ul,#mainmenu > div > ul{margin-left:6px}
	#mainmenu li{margin-right:0}
	#mainmenu li a{height:auto;margin-top:0;padding:18px 13px 15px;font-size:15px;letter-spacing:.02em;border-bottom:3px solid transparent;transition:background-color .15s ease,border-color .15s ease}
	#mainmenu li a:hover,#mainmenu li:hover > a{background:rgba(255,255,255,.08)}
	#mainmenu li.current_page_item > a,#mainmenu li.current-menu-item > a,#mainmenu li.current-menu-ancestor > a,#mainmenu li.current-menu-parent > a{background:transparent;border-bottom-color:#f7a81b}
	#mainmenu ul ul{top:100%;min-width:220px;padding:6px 0;background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.18)}
	#mainmenu ul ul li{float:none;margin:0}
	#mainmenu ul ul li a{padding:10px 18px;font-size:14px;color:#17458f;border-bottom:0}
	#mainmenu ul ul li a:hover,#mainmenu ul ul li:hover > a{background:#eef4fb}
}

/* Footer credit */
#footer .poweredby{clear:both;text-align:center;font-size:13px;padding:15px 10px 5px}
#footer .poweredby a{color:inherit;text-decoration:underline}

@media only screen and (max-width:766px){
	/* Main menu: a Menu button instead of a fixed-height bar whose second row was invisible */
	#menutoggle{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;padding:0 16px;border:0;border-radius:0;background:#00246c;color:#fff;font:700 16px/1 "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform:uppercase;cursor:pointer}
	.menutoggle-bars,.menutoggle-bars:before,.menutoggle-bars:after{display:block;width:22px;height:2px;background:#fff;content:"";position:relative}
	.menutoggle-bars:before{position:absolute;top:-7px}
	.menutoggle-bars:after{position:absolute;top:7px}
	.menu-open .menutoggle-bars{background:transparent}
	.menu-open .menutoggle-bars:before{top:0;transform:rotate(45deg)}
	.menu-open .menutoggle-bars:after{top:0;transform:rotate(-45deg)}
	#mainmenu{height:auto;display:none}
	.menu-open #mainmenu{display:block}
	#mainmenu ul{margin:0}
	#mainmenu li{float:none;margin:0;border-top:1px solid rgba(255,255,255,.15)}
	#mainmenu li a{height:auto;margin:0;padding:14px 16px;font-size:16px}
	#mainmenu ul ul{display:block;position:static;float:none;width:auto;background:transparent;box-shadow:none}
	#mainmenu ul ul li a{padding-left:32px;font-weight:400}
	#mainmenu .searchform{margin:10px 16px}

	/* Tables: scroll sideways inside their box, hide the least useful columns */
	.dataTables_wrapper{clear:both;overflow-x:auto;-webkit-overflow-scrolling:touch}
	.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{float:none;text-align:left;margin:5px 0}
	.dataTables_wrapper .dataTables_filter input{width:100%;margin:4px 0 0}
	.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}
	#rotaryclubdirectory .professioncol,#rotaryprojects .businessphonecol{display:none}
	#rotaryclubdirectory .membersincecol{white-space:nowrap}
	#rotaryclubdirectory,#rotaryprojects{width:100%!important}

	.home #content{margin-top:0}
	#content{min-height:0}

	/* Comfortable tap targets */
	.rotarybutton-largewhite,.rotarybutton-smallwhite,#signin input[type="submit"]{min-height:36px}
}
