/* ============================================================
   mobile.css  —  responsive add-on for bryancotter.com
   Load this AFTER your main stylesheet so it takes priority:
       <link rel="stylesheet" href="/mobile.css">
   It only adds/overrides what's needed for phones & tablets;
   your main stylesheet is left untouched.
   ============================================================ */

/* ---- Feature row (the 4 icon blurbs) ---- */
.features{flex-wrap:wrap;}
.feature{display:flex;gap:10px;flex:1 1 210px;max-width:240px;}

/* ---- Featured galleries (the 4 cards) ---- */
.featured{flex-wrap:wrap;}
.gcard{flex:1 1 210px;max-width:260px;width:auto;}
.gcard-cap{padding:10px;border:1px solid #999;border-top:0;}

/* ---- Hero text legibility over the bird photo ---- */
.copy h1,.copy p{text-shadow:0 1px 8px rgba(0,0,0,.55);}

/* ---- About-me strip above the footer ---- */
.about-strip{background:#0f291c;color:#fff;padding:36px 22px;}
.about-strip__inner{max-width:860px;margin:0 auto;display:flex;gap:28px;align-items:center;}
.about-strip__photo{width:150px;height:150px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid rgba(255,255,255,.15);}
.about-strip h2{color:#fff;text-transform:none;font:600 24px "Times New Roman",Times,serif;margin:0 0 .6rem;}
.about-strip p{font-size:15px;line-height:1.6;margin:0 0 .8rem;color:#e7efdc;}
.about-strip a.more{color:#cde08a;font-weight:700;}
.about-strip a.more:hover{color:#fff;}

/* =================== TABLET (≤960px) =================== */
@media (max-width:960px){
	.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px;}
	.features{display:flex;}
	.feature{flex:1 1 44%;max-width:none;}
	.featured{display:flex;}
	.gcard{flex:1 1 44%;max-width:none;}
	.feat{width:auto;max-width:100%;}
}

/* =================== PHONE (≤600px) =================== */
@media (max-width:600px){
	.hero-inner{padding:22px;}
	.copy h1{font-size:26px;}
	.copy p{font-size:15px;}
	.buttons .btn{display:inline-block;margin-bottom:8px;}
	.feature{flex:1 1 100%;}
	.gcard{flex:1 1 100%;}
	.birding{height:auto;padding:26px 22px;}
	.copy2{padding:0;}
	.about-strip__inner{flex-direction:column;text-align:center;gap:16px;}
}

/* ============================================================
   Mobile hamburger nav (CSS-only — no JavaScript needed)
   Requires the checkbox + label added in top.php (see notes).
   ============================================================ */
.nav-toggle-cb{display:none;}
.nav-toggle{display:none;cursor:pointer;padding:7px 9px;border-radius:6px;background:rgba(0,0,0,.4);user-select:none;-webkit-user-select:none;}
.nav-toggle span{display:block;width:26px;height:3px;margin:5px 0;background:#fff;border-radius:2px;}

@media (max-width:960px){
	.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;padding:8px 14px;}
	.nav > div{padding:0;}
	.nav-toggle{display:block;}
	.nav ul{display:none;flex-direction:column;flex-basis:100%;width:100%;gap:0;padding:0;margin-top:8px;background:rgba(8,20,8,.96);border-radius:6px;}
	.nav-toggle-cb:checked ~ ul{display:flex;}
	.nav li{width:100%;float:none;font-size:15px;border-top:1px solid rgba(255,255,255,.12);}
	.nav li:first-child{border-top:0;}
	.nav li a,.nav .dropbtn{display:block;width:100%;text-align:left;padding:12px 14px;font-size:15px;}
	.active{border-bottom:0;padding-bottom:0;}
}
@media (max-width:600px){
	.floated-box{float:none;max-width:100%;margin:10px 0;background-color:#fff;}
	.inner-div{padding:10px 0;}
}
@media (max-width:960px){
	.bcp-page .floated-box{float:none;max-width:100%;margin:10px 0;background-color:#fff;}
	.bcp-page .inner-div{padding:10px 0;}
}