/* components.css – Isolated component-level styles (public copy synchronized 1:1 with /css/components.css)
	Author: BreezyOps 2017–2025 */

/* Post preview */
.post-preview > a { color:#234d8f; }
.post-preview > a:hover, .post-preview > a:focus { color:#1467c8; text-decoration:none; }
.post-preview > a > .post-title { font-size:1.75rem; margin:1.75rem 0 .5rem; }
.post-preview > a > .post-subtitle { margin:0 0 .5rem; font-weight:300; }
.post-preview > .post-meta { color:#666; font-size:.95rem; font-style:italic; margin-top:0; }


/* --- Profile Headshot Floating Figure (About Me) --- */
.profile-headshot { float:right; --hs-base: var(--hs-width, 280px); width:clamp(110px, 18vw, var(--hs-base)); max-width:var(--hs-base); margin:0 0 1.1rem 1.1rem; position:relative; z-index:2; shape-margin:.55rem; transition:width .34s cubic-bezier(.4,.12,.25,1), transform .34s ease; }
/* Left-floated variant (earlier, more noticeable scaling + refined spacing) */
.profile-headshot.float-start { float:left; --hs-base: var(--hs-width, 260px); width:clamp(105px, 20vw, var(--hs-base)); max-width:var(--hs-base); /* top | right | bottom | left */
	margin:.18rem clamp(1.25rem, 2.9vw, 1.65rem) .6rem 0; shape-margin:.65rem; transition:width .34s cubic-bezier(.4,.12,.25,1), transform .34s ease; }
.profile-headshot-img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:50%; box-shadow:0 4px 14px -4px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07), 0 0 0 4px rgba(120,160,255,0.10); background:#0f1420; }
.profile-headshot.shape-rounded .profile-headshot-img { border-radius:9%; }
.profile-headshot.shape-none .profile-headshot-img { border-radius:6px; }
/* Circle keeps circular wrap; rounded now uses default rectangular wrap for calmer text flow */
.profile-headshot.shape-circle { shape-outside:circle(50%); }
.profile-headshot.shape-rounded { shape-outside:none; }
/* Offset-0 injection (figure inside first <p>) – adjust baseline alignment */
p > figure.profile-headshot.float-start { margin-top:.25em; margin-bottom:.15em; }
/* When figure precedes first paragraph (offset >=1), nudge following paragraph slightly */
figure.profile-headshot.float-start + p { margin-top:.25rem; }
/* Medium breakpoint refinements: gently reduce width sooner to prevent crowding */
@media (max-width: 1100px) {
	.profile-headshot.float-start { margin:.18rem clamp(1.15rem, 3.2vw, 1.55rem) .6rem 0; }
}
@media (max-width: 880px) {
	.profile-headshot.float-start { margin:.18rem clamp(1.05rem, 3.6vw, 1.45rem) .55rem 0; }
}
.profile-headshot-caption { font-family:'IBM Plex Sans','Open Sans',Arial,sans-serif; font-size:14px; font-weight:400; letter-spacing:.25px; opacity:.78; margin-top:.45rem; line-height:1.25; text-align:center; text-transform:none; }
/* Responsive float behavior refinements:
	 Keep float a bit longer so horizontal (right) margin is preserved down to ~520px.
	 Then switch to centered block layout. */
@media (max-width:640px){
	/* Still floated: shrink width and preserve a readable right gutter */
	.profile-headshot.float-start { width:clamp(95px, 34vw, 170px); margin:.15rem clamp(.85rem, 3.2vw, 1.1rem) .55rem 0; shape-margin:.5rem; }
	.profile-headshot { width:clamp(100px, 32vw, var(--hs-base)); }
}
@media (max-width:300px){
	.profile-headshot, .profile-headshot.float-start { float:none; margin:0 auto 1.1rem; shape-outside:none; text-align:center; max-width:240px; }
	.profile-headshot-caption { text-align:center; }
}

/* --- Legacy CTA Green Button + Nav Highlight (ported) --- */
.btn-cta-green { background:#28a545; border-color:#28a545; color:#fff; }
.btn-cta-green:hover, .btn-cta-green:focus { background:#23943e; border-color:#1f7f35; color:#fff; }
.btn-cta-green:active { background:#1f7f35; border-color:#1a6a2c; }

/* Accent CTA (green) minimal variant: color-only intent (no custom shadows/radius adjustments) */
.btn-cta-accent { background:#2d8a34; border:1px solid #2d8a34; color:#fff; }
.btn-cta-accent:hover, .btn-cta-accent:focus { background:#26772c; border-color:#26772c; text-decoration:none; }
.btn-cta-accent:active { background:#216326; border-color:#216326; }

/* Sidebar bright emphasis link (apply by adding style: 'bright' to sidebar item) */
.bio-sidebar .sidebar-item .sidebar-link-bright .sidebar-text { color:#42d15f; font-weight:500; }
.bio-sidebar .sidebar-item a.sidebar-link-bright .sidebar-text { color:#42d15f; font-weight:500; }
.bio-sidebar .sidebar-item a.sidebar-link-bright:hover .sidebar-text,
.bio-sidebar .sidebar-item a.sidebar-link-bright:focus .sidebar-text { color:#6cf68a; }

/* Nav bar prominent CTA link (Discuss Your Project) */
/* Minimal nav CTA (color only) */
.navbar-nav .nav-link.nav-link-cta { color:#42d15f !important; font-weight:500; }
.navbar-nav .nav-link.nav-link-cta:hover, .navbar-nav .nav-link.nav-link-cta:focus { color:#6cf68a !important; text-decoration:underline; }