/* ===================================================================
   freestockphotos.biz  -  v5 stylesheet  (light / forest-green theme)
   Skeleton mirrors halfphoto.com; recolored for FSP's own identity.
   Theme is driven entirely by the CSS custom properties in :root, so
   a future re-skin is a one-line-per-color change.
   =================================================================== */

:root
	{
	--bg:            #f4f5f7;   /* page background            */
	--surface:       #ffffff;   /* cards, sidebar, footer     */
	--surface-2:     #eef1f4;   /* subtle fills (nav buttons) */
	--border:        #dfe3e8;   /* hairline borders           */
	--border-strong: #cfd5dc;   /* stronger dividers          */
	--text:          #232a31;   /* primary text               */
	--muted:         #5b6673;   /* secondary text             */
	--faint:         #9aa3ad;   /* placeholders / meta        */
	--accent:        #2e7d32;   /* forest green               */
	--accent-dark:   #245e27;   /* hover / active             */
	--accent-tint:   #ebf3ec;   /* active-nav background      */
	--radius:        8px;
	/* Mobile photo-page hero cap: how much vertical space to reserve
	   above+below the image (sticky bar + 120px leaderboard + label +
	   title + download row) so the Download button lands within the
	   first screen. Tune this one number if the button sits too
	   high/low; see .photo_stage img in the mobile block below. */
	--photo-fit-offset: 340px;
	}

/* ---------- Globals ---------- */

* {box-sizing:border-box;}
html {height:100%;}
/* Body is a full-height flex column so the footer sticks to the bottom
   on short pages (no dangling scroll) and #main_container grows to fill. */
body {background-color:var(--bg); margin:0; padding:0; font-size:14px; line-height:1.5; color:var(--text); font-family:Arial,"Segoe UI",Sans-Serif; }
a {outline:none; text-decoration:none; color:var(--accent);}
a:hover {color:var(--accent-dark); text-decoration:underline;}
img {border:0; vertical-align:middle;}
form {margin:0; padding:0;}
h1,h2,h3 {font-weight:600; color:var(--text); margin:0 0 12px;}
.r {clear:both;}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.google-auto-placed { height: auto !important; max-height: 350px; }

/* ===================================================================
   Layout : two-column shell
   Mobile  -> left column is a sticky top bar (collapsible)
   >=768px -> left column is a 250px sticky sidebar
   =================================================================== */

#main_container {width:100%; flex:1 0 auto;}

/* Mobile: left column is a sticky top bar. */
.column.left
	{
	position:sticky; top:0; z-index:20;
	background:var(--surface);
	border-bottom:1px solid var(--accent-dark);
	}

.column.right {padding:10px;}

/* ---------- Header (inside left column) ---------- */

#header_top {display:flex; align-items:center; justify-content:space-between; padding:10px 14px;}

/* Full wordmark in the accent green; .tld span kept as a hook for a
   future font/weight tweak or logo image. */
#brand {font-size:20px; font-weight:700; letter-spacing:-0.01em; color:var(--accent); line-height:1;}
#brand a {color:var(--accent);}
#brand a:hover {color:var(--accent-dark); text-decoration:none;}
#brand .tld {color:var(--accent);}

#tagline {display:none; font-size:11px; color:var(--muted); margin-top:5px;}

/* Hamburger + search glyph (mobile only) */
#menu_toggle {display:flex; align-items:center; gap:18px; cursor:pointer;}
#menu_toggle .g_search {width:20px; height:20px; position:relative;}
#menu_toggle .g_search::before {content:''; position:absolute; top:0; left:0; width:13px; height:13px; border:2px solid var(--muted); border-radius:50%;}
#menu_toggle .g_search::after {content:''; position:absolute; top:12px; left:12px; width:7px; height:2px; background:var(--muted); transform:rotate(45deg); transform-origin:0 50%; border-radius:1px;}
#menu_toggle .g_bars {width:22px; height:16px; display:flex; flex-direction:column; justify-content:space-between;}
#menu_toggle .g_bars span {display:block; height:2px; border-radius:1px; background:var(--muted);}

/* Collapsible region (search + nav) : hidden on mobile until opened */
#header_drawer {display:none; padding:0 14px 12px;}
.column.left.open #header_drawer {display:block;}

/* ---------- Search box ---------- */

#side_search {display:flex; align-items:center; gap:8px; height:38px; padding:0 10px; margin-top:4px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius);}
#side_search:focus-within {border-color:var(--accent);}
#side_search .g_search {width:18px; height:18px; position:relative; flex:0 0 18px;}
#side_search .g_search::before {content:''; position:absolute; top:0; left:0; width:12px; height:12px; border:2px solid var(--faint); border-radius:50%;}
#side_search .g_search::after {content:''; position:absolute; top:11px; left:11px; width:6px; height:2px; background:var(--faint); transform:rotate(45deg); transform-origin:0 50%; border-radius:1px;}
#side_search input {flex:1; min-width:0; border:0; outline:none; background:transparent; font-size:14px; color:var(--text); font-family:inherit;}
#side_search input::placeholder {color:var(--faint);}

/* ---------- Sidebar navigation ---------- */

.nav_section {margin-top:16px;}
.nav_label {font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent-dark); margin:0 2px 8px;}

.nav_btn {display:block; padding:9px 12px; margin-bottom:6px; font-size:13px; text-decoration:none; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);}
.nav_btn:hover {color:var(--accent-dark); border-color:var(--accent); text-decoration:none;}
.nav_btn.on {color:#fff; background:var(--accent); border-color:var(--accent);}

/* ---------- Sidebar ad slot ---------- */
#side_ad {margin-top:18px; text-align:center;}

/* ===================================================================
   Desktop layout  (>=768px)
   =================================================================== */

@media (min-width:768px)
	{
	/* align-items:stretch (default) makes both columns run the full
	   height of the row, so the sidebar reaches down to the footer. */
	#main_container {display:flex; flex-direction:row; align-items:stretch; gap:10px;}

	.column.left
		{
		flex:0 0 250px; width:250px;
		border-bottom:0; border-right:1px solid var(--accent-dark);
		}
	/* Sidebar content sticks to the top while long grid pages scroll,
	   while the column itself still stretches to the footer. */
	#side_inner {position:sticky; top:0;}
	.column.right {flex:1; min-width:0; margin-top:0;}

	#header_top {display:block; padding:16px 14px 6px; text-align:center;}
	#brand {font-size:22px;}
	#tagline {display:block; text-align:center;}
	#menu_toggle {display:none;}

	/* search + nav always visible on desktop */
	#header_drawer {display:block !important; padding:0 14px 14px;}
	}

/* ===================================================================
   Content helpers  (used by simple text pages for now)
   =================================================================== */

.page_head {padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--border);}
.page_head h1 {font-size:24px; font-weight:600; margin:0;}
.page_head .sub {font-size:14px; color:var(--muted); margin-top:6px;}


.leaderboard_slot {text-align:center; margin-bottom:14px; min-height:0;}

/* Simple themed form (contact, etc.) */
.form_block {max-width:520px;}
.form_block label {display:block; font-size:13px; font-weight:600; color:var(--muted); margin:16px 0 5px;}
.form_block input[type="text"], .form_block input[type="email"], .form_block select, .form_block textarea {width:100%; padding:9px 10px; font-size:14px; font-family:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); outline:none;}
.form_block input:focus, .form_block select:focus, .form_block textarea:focus {border-color:var(--accent);}
.form_block textarea {resize:vertical; min-height:130px;}
.form_block .btn {margin-top:18px;}

/* primary call-to-action button (solid accent) */
.btn {display:inline-block; padding:9px 16px; margin:4px; font-size:14px; font-weight:600; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:var(--radius);}
.btn:hover {background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; text-decoration:none;}
.btn.ghost {color:var(--accent); background:transparent;}
.btn.ghost:hover {color:#fff; background:var(--accent);}

/* ===================================================================
   Results header  (result count + sort links above the grid)
   =================================================================== */

#results_head {display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border);}
#results_title {font-size:18px; font-weight:600; color:var(--text);}
#results_title .count {font-size:13px; font-weight:400; color:var(--muted); margin-left:6px;}
#results_sort {font-size:13px; color:var(--muted);}
#results_sort a {color:var(--accent);}
#results_sort b {color:var(--text);}
#results_sort .sep {color:var(--border-strong); margin:0 5px;}

/* ===================================================================
   Results grid  —  uniform tiles (mirrors halfphoto .new_box)
   Mobile  : 1 column, full-width natural image, title hidden.
   >=768px : square tiles, image object-fit:contain, 2-line title.
   Columns : 3 -> 4 -> 6 -> 8 as the viewport grows.
   (aspect-ratio + -webkit-line-clamp are supported in all current
    target browsers: Chrome, Firefox, Edge.)
   =================================================================== */

#grid::after {content:''; display:block; clear:both;}

.new_box {width:100%; position:relative; margin:0 0 12px;}
.new_box_link {display:block; text-decoration:none; color:var(--muted);}
.new_box_link:hover {text-decoration:none;}
.new_box:hover .new_box_title {color:var(--accent-dark);}
.new_box_image {width:100%; height:auto; display:block;}
.new_box_title {display:none;}

@media (min-width:768px)
	{
	.new_box {width:calc((100% / 3) - 12px); float:left; margin:6px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
	.new_box:hover {border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.08);}
	.new_box_picture_holder {margin:6px; padding:4px; aspect-ratio:1 / 1;}
	.new_box_image {object-fit:contain; width:100%; height:100%;}
	/* Fixed 2-line height so every tile is identical -> floated tiles
	   never snag into a staggered/wrapping layout. */
	.new_box_title {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:2.8em; margin:0 10px 10px; text-align:center; font-size:12px; line-height:1.4; color:var(--muted);}
	}
@media (min-width:1024px) {.new_box {width:calc((100% / 4) - 12px);}}
@media (min-width:1280px) {.new_box {width:calc((100% / 6) - 12px);}}
@media (min-width:1920px) {.new_box {width:calc((100% / 8) - 12px);}}

/* ===================================================================
   Pagination
   =================================================================== */

.bottom_pagelinks, .pagelinks {text-align:center; margin:16px 0;}
.page_link, .current_page {display:inline-block; min-width:16px; padding:6px 11px; margin:2px; font-size:13px; font-weight:600; text-align:center; border:1px solid var(--border); border-radius:6px;}
.page_link {color:var(--muted); background:var(--surface);}
.page_link:hover {color:#fff; background:var(--accent); border-color:var(--accent); text-decoration:none;}
.current_page {color:#fff; background:var(--accent); border-color:var(--accent);}

/* ===================================================================
   Single photo page
   .photo_wrap.side = image left / details right; it auto-STACKS when
   the details column can't hold its 475px minimum (flex-wrap), and on
   mobile. .photo_wrap.stack forces the stacked arrangement.
   =================================================================== */

.photo_label {color:var(--faint); font-size:12px; margin-bottom:4px;}
/* Full-width, single line with ellipsis: the title never wraps, so it
   can't push the hero image down. Sits above both columns, so the image
   box and the details box start flush at the same top. Smaller on
   mobile to fit more before truncating. */
.photo_title {font-size:19px; font-weight:600; margin:0 0 12px; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Image stage. On desktop the image shows at natural size (capped at
   its source width, never upscaled). On mobile the hero is height-capped
   by CSS (see the max-width:767px block) so the download button lands
   within the first viewport — no JavaScript. */
.photo_stage {width:100%; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px;}
.photo_stage img {max-width:100%; width:auto; height:auto; display:block; margin:0 auto;}

/* Mobile: cap the hero height so the Download button sits within the
   first screen. svh = the SMALL viewport height (as if the browser's
   address bar is showing); unlike the old JS (which watched innerHeight
   via the resize event) it does NOT change as the address bar collapses
   on scroll, so the image no longer resizes/jitters mid-scroll.
   The image keeps its aspect ratio, shrinking to satisfy both max-width
   and max-height. Offset is tunable via --photo-fit-offset above.
   Browser support: svh units are current Chrome/Firefox/Edge/Safari
   (2022+). Older browsers ignore the unit and fall back to natural
   size — no breakage, just no cap. */
@media (max-width:767px)
	{
	.photo_stage img {max-height:calc(100svh - var(--photo-fit-offset));}
	}

/* Download row: download button (+ optional vector) then the license /
   model-release icons. Mobile = 2-column grid (items stack 2x2);
   desktop = a left-aligned row. */
.dl_row {display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; margin:16px 0;}
.dl_form {margin:0;}
.dl_btn {display:block; width:100%; cursor:pointer; font-family:inherit; text-align:center; text-decoration:none; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:10px 14px;}
.dl_btn:hover {border-color:var(--accent); text-decoration:none;}
.dl_btn .dl_main {display:block; font-size:14px; font-weight:600; color:var(--text);}
.dl_btn .dl_sub {display:block; font-size:12px; color:var(--muted); margin-top:4px;}
.dl_btn.primary {background:var(--accent); border-color:var(--accent);}
.dl_btn.primary:hover {background:var(--accent-dark); border-color:var(--accent-dark);}
.dl_btn.primary .dl_main {color:#fff;}
.dl_btn.primary .dl_sub {color:#e3efe3;}
.dl_badge {display:flex; align-items:center; justify-content:center;}
.dl_badge img {display:block; max-width:100%;}

/* License disclaimer box: lives in the details panel, full width. */
.dl_disclaimer {margin-top:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:12px 14px; font-size:13px; color:var(--muted); line-height:1.5;}
.dl_disclaimer a {color:var(--accent);}

/* Details panel */
.detail_label {color:var(--faint); font-size:12px; margin:16px 0 4px;}
.kw_links {line-height:1.9;}
.stats_table {width:100%; font-size:13px; color:var(--muted); border-collapse:collapse;}
.stats_table td {padding:4px 0; vertical-align:top;}
.stats_table td.k {color:var(--faint); padding-right:16px; white-space:nowrap; width:1%;}
.stats_table a {color:var(--accent);}

/* Section heading bar (related images): title left, "View All" right */
.section_bar {display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin:22px 0 12px;}
.section_bar .sb_title {font-size:16px; font-weight:600; color:var(--text);}
.section_bar .sb_title a {color:var(--accent);}
.section_bar .view_all {font-size:13px; font-weight:600; white-space:nowrap;}

/* Layout: STACKED by default (details full width). Becomes side-by-side
   only when there's room for a >=600px hero image alongside the 475px
   details column (600 + 26 gap + 475 = 1101). A container query measures
   the content area itself, so the 250px sidebar doesn't skew the
   breakpoint. (Container queries: current Chrome/Firefox/Edge.) */
.photo_area {container-type:inline-size;}

@container (min-width:1101px)
	{
	.photo_wrap {display:flex; gap:26px; align-items:flex-start;}
	.photo_wrap .photo_col_main {flex:1 1 auto; min-width:0;}
	.photo_wrap .photo_col_side {flex:0 0 475px; max-width:475px;}
	}

@media (min-width:768px)
	{
	.photo_title {font-size:26px;}
	/* Download row: left-aligned, button ~175px then vector/icons. */
	.dl_row {display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
	.dl_row .dl_form {flex:0 0 175px;}
	}

/* ===================================================================
   Footer
   =================================================================== */

#site_footer {flex-shrink:0; margin-top:24px; background:var(--surface); border-top:1px solid var(--border);}
#footer_inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:14px 18px;}
#footer_links a {color:var(--muted); font-size:13px;}
#footer_links a:hover {color:var(--accent-dark);}
#footer_links .sep {color:var(--border-strong); margin:0 6px;}
#footer_meta {font-size:12px; color:var(--faint);}
#footer_meta .cross {color:var(--muted);}
#footer_meta .cross b {color:var(--text);}
#footer_meta .cross .tld {color:var(--accent);}