/*
Theme Name: Photograph Door County (Photography Child)
Theme URI: https://themes.themegoods.com/landing/photography/
Description: Dark-mode child theme of Photography for Photograph Door County.
Version: 2.0.0
Author: David Ristau
Template: photography
Text Domain: photography
*/

/* Inter (variable, weights 100-900). Same file WooCommerce bundles; see fonts/README.txt. */
@font-face {
	font-family: "Inter";
	src: url("fonts/Inter-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------
   Design tokens (brand: Night / Bay Navy / Fog / Golden Hour amber)
   --------------------------------------------------------------- */
:root {
	--dc-bg:        #0f1216;   /* Night */
	--dc-surface:   #131b22;   /* navy-tinted panel */
	--dc-surface-2: #1a2630;
	--dc-line:      #26404f;   /* Bay Navy, darkened for borders */
	--dc-navy:      #24475c;   /* Bay Navy */
	--dc-text:      #c6d0d9;
	--dc-heading:   #f2f6f9;   /* close to Fog */
	--dc-muted:     #8b98a4;
	--dc-accent:    #e2a23b;   /* Golden Hour */
	--dc-accent-2:  #f0c26e;   /* hover */
	--dc-radius:    6px;
	--dc-font:      "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------------
   Base (theme color settings do most of the work; this is the safety net)
   --------------------------------------------------------------- */
html, body, #wrapper, #content_wrapper, #page_content_wrapper, .inner, .inner_wrapper {
	background-color: var(--dc-bg);
}
body { color: var(--dc-text); }
h1, h2, h3, h4, h5, h6 { color: var(--dc-heading); letter-spacing: .02em; }
a { color: var(--dc-accent); }
a:hover { color: var(--dc-accent-2); }
hr { border-color: var(--dc-line); }
::selection { background: var(--dc-accent); color: #0b0e11; }

/* Page title banner (typography settings in the theme carry their own colors) */
#page_caption { background: var(--dc-bg); border-bottom: 1px solid var(--dc-line); }
#page_caption h1, .ppb_title { color: var(--dc-heading) !important; }
.page_tagline, #page_caption .page_tagline { color: var(--dc-muted) !important; }
hr.title_break { border-color: var(--dc-accent); }

/* Header logo B (peninsula + stacked wordmark). Source PNG is rendered at 4x for sharpness.
   The theme's header is 60px tall; B is ~74px at this width, so the header is raised to 84px
   and the page content offset follows it. */
:root { --dc-header-h: 84px; }
#logo_wrapper img, .logo_wrapper img, #custom_logo img, .header_logo img {
	width: 250px !important;
	height: auto !important;
	max-width: 62vw;
}
@media (min-width: 961px) {
	.top_bar .standard_wrapper { height: var(--dc-header-h); }
	html[data-menu="leftalign"] #wrapper { padding-top: calc(var(--dc-header-h) + 1px) !important; }
	#menu_wrapper .nav ul li a, #menu_wrapper div .nav li > a { padding-top: 30px !important; padding-bottom: 30px !important; }
}
@media (max-width: 960px) {
	#logo_wrapper img, .logo_wrapper img, #custom_logo img, .header_logo img { width: 190px !important; }
	/* The theme's phone/tablet header is 46px; logo B needs ~74px, and the menu/cart icons are re-centered in it. */
	.top_bar { height: 74px !important; }
	#logo_wrapper { height: 74px !important; padding-top: 0 !important; padding-bottom: 0 !important; }  /* theme adds 15px on top */
	.logo_container { display: table !important; height: 74px !important; margin: 0 !important; }
	.logo_align { display: table-cell !important; vertical-align: middle !important; height: 74px; }
	#custom_logo { display: block !important; margin-top: 0 !important; }
	#wrapper { padding-top: 75px !important; }
	#mobile_nav_icon, #logo_right_button, .mobile_nav_wrapper { margin-top: 29px !important; }
}

/* ---------------------------------------------------------------
   Full-bleed home page + hero
   --------------------------------------------------------------- */
body.home #page_content_wrapper .inner,
body.home #page_content_wrapper .inner_wrapper,
body.home #page_content_wrapper .sidebar_content { max-width: none; width: 100%; padding: 0; margin: 0; }
body.home #page_content_wrapper { padding: 0; }

.dc-hero.wp-block-cover { min-height: 92vh; padding: 0 24px; }
.dc-hero .wp-block-cover__image-background {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover;
}
.dc-hero .wp-block-cover__inner-container { text-align: center; max-width: 880px; position: relative; z-index: 1; }
/* Logo A: the PNG has empty margin around the peninsula watermark, so pull the neighbours in */
.dc-hero .dc-hero-logo { margin: -34px auto -26px; }
.dc-hero .dc-hero-logo img { width: clamp(260px, 36vw, 520px); height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)); border-radius: 0; }
.dc-hero h1 {
	font-size: clamp(30px, 5.2vw, 58px);
	line-height: 1.12;
	margin: 0 0 14px;
	color: #fff;
	text-shadow: 0 2px 22px rgba(0,0,0,.6);
}
.dc-hero p.dc-hero-sub { font-size: clamp(15px, 1.7vw, 19px); color: #e7eef4; margin: 0 0 28px; text-shadow: 0 1px 12px rgba(0,0,0,.7); }

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.dc-section { max-width: 1120px; margin: 0 auto; padding: 84px 24px; }
.dc-section.narrow { max-width: 780px; text-align: center; }
.dc-section h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 18px; }
.dc-section p { font-size: 17px; line-height: 1.85; }
.dc-band { background: var(--dc-surface); border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); }
.dc-eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dc-accent); margin: 0 0 10px; }

/* Inner pages (Gallery, Explore, About, Prints) */
body:not(.home) #page_content_wrapper .inner { max-width: 1120px; }
.dc-page { padding: 24px 0 72px; }
.dc-page h2 { margin-top: 0; }
.dc-page p { font-size: 17px; line-height: 1.85; }
.dc-lede { font-size: 20px !important; line-height: 1.7 !important; color: var(--dc-heading); }
.dc-topic { margin: 0 0 76px; align-items: center; gap: 48px; }
.dc-topic .wp-block-image img { border-radius: var(--dc-radius); width: 100%; height: auto; }
.dc-topic h2 { font-size: 28px; }

/* Cards */
.dc-cards { gap: 24px; }
.dc-card { background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); padding: 28px 26px; height: 100%; box-sizing: border-box; }
.dc-card h3 { margin: 0 0 10px; font-size: 19px; }
.dc-card p { font-size: 15.5px; line-height: 1.75; margin: 0 0 12px; color: var(--dc-text); }
.dc-card a { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

/* Gallery */
.wp-block-gallery.has-nested-images.dc-gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: center; margin: 0 0 32px; }
.wp-block-gallery.has-nested-images.dc-gallery figure.wp-block-image:not(#individual-image) { width: auto !important; max-width: none; margin: 0; }
.wp-block-gallery.has-nested-images.dc-gallery .wp-block-image img { border-radius: var(--dc-radius); width: 100%; height: auto; display: block; }
.wp-block-gallery.dc-gallery figcaption { color: var(--dc-muted); font-size: 13px; letter-spacing: .04em; }
.wp-block-image img { border-radius: var(--dc-radius); }

/* Home page "Recent photographs" ([dc_recent_photos] in functions.php): shuffled on every load */
.dc-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: center; margin: 0 0 32px; }
.dc-recent-item { margin: 0; }
.dc-recent-photo { display: block; }
.dc-recent-item img { display: block; width: 100%; height: auto; border-radius: var(--dc-radius); transition: opacity .2s; }
.dc-recent-photo:hover img { opacity: .88; }
.dc-recent-item figcaption { margin-top: 8px; font-size: 13px; letter-spacing: .04em; }
.dc-recent-item figcaption a { color: var(--dc-muted); text-decoration: none; }
.dc-recent-item figcaption a:hover { color: var(--dc-accent); }
.wp-lightbox-overlay { background: rgba(6,8,10,.94) !important; }

/* Buttons */
.wp-block-button__link, .wp-element-button {
	background: var(--dc-accent); color: #0b0e11 !important; border: 1px solid var(--dc-accent);
	border-radius: 3px; padding: 13px 28px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none; font-weight: 600; transition: background .2s, color .2s, border-color .2s;
}
.wp-block-button__link:hover { background: var(--dc-accent-2); border-color: var(--dc-accent-2); color: #0b0e11 !important; }
.wp-block-button.is-style-outline .wp-block-button__link,
.dc-btn-outline .wp-block-button__link { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.7); }
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.dc-btn-outline .wp-block-button__link:hover { background: #fff; color: #0b0e11 !important; border-color: #fff; }
.wp-block-buttons { gap: 14px; justify-content: center; }

/* Coming soon */
.dc-soon { display: inline-block; padding: 7px 18px; border: 1px solid var(--dc-accent); color: var(--dc-accent); border-radius: 999px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 18px; }
.dc-soon-tiles .wp-block-image { position: relative; }
.dc-soon-tiles .wp-block-image img { filter: brightness(.55) saturate(.8); }

/* About */
.dc-about { align-items: flex-start; gap: 56px; }
.dc-about .wp-block-image img { border-radius: var(--dc-radius); width: 100%; height: auto; }
.dc-signoff { color: var(--dc-heading); font-size: 18px; margin-top: 28px; }

/* "Uncategorized" is hidden everywhere (blog cards, post header badge, side-menu Categories list) while it is the only category.
   Real categories added later show normally. The post's header photo is untouched. */
.post_info_cat:has(a[href*="/category/uncategorized/"]:only-child) { display: none; }
li.widget_block:has(.wp-block-categories-list > li:only-child > a[href*="/category/uncategorized/"]) { display: none; }

/* Header cart icon: sales happen on Fine Art America, so the (unused) WooCommerce cart is hidden. Show it again when selling directly. */
.header_cart_wrapper { display: none !important; }

/* Prints page: the Fine Art America store widget always draws on white, so it sits in a light panel on the dark page */
.dc-print-store { background: #fff; border-radius: var(--dc-radius); padding: 12px; max-width: 1200px; margin: 0 auto 40px; overflow: hidden; }
.dc-print-store iframe { display: block; width: 100%; }

/* Footer */
#footer, .footer_bar, .footer_bar_wrapper, #copyright { background: #0a0d10 !important; color: var(--dc-muted); }
#footer a, #copyright a { color: var(--dc-accent); }
/* The theme floats the copyright into the left half of the bar and social icons into the right half;
   both are stacked full-width and centered here instead so the footer reads as one centered block. */
#copyright { color: var(--dc-muted) !important; text-align: center; float: none !important; width: 100% !important; font-family: var(--dc-font) !important; }
.footer_bar_wrapper { border-top: 1px solid var(--dc-line); }
#copyright .dc-footer-logo { display: block; width: 240px; max-width: 70vw; height: auto; margin: 6px auto 4px; border-radius: 0; }
/* Colors already come from tg_footer_copyright_link_color/tg_footer_copyright_hover_link_color (set in build-site.sh);
   only the layout needs fixing here so the icons sit centered under the copyright instead of floated right. */
.footer_bar_wrapper .social_wrapper { float: none !important; width: 100% !important; text-align: center !important; margin: 10px 0 4px !important; }
.footer_bar_wrapper .social_wrapper ul { text-align: center !important; }
.footer_bar_wrapper .social_wrapper ul li { float: none !important; display: inline-block !important; margin: 0 10px !important; }

/* Mobile slide-out menu */
.mobile_menu_wrapper { background: var(--dc-surface) !important; }
.mobile_menu_wrapper a, .mobile_menu_wrapper li a { color: #eaf2f8 !important; }
.mobile_menu_wrapper a:hover { color: var(--dc-accent) !important; }

@media (max-width: 782px) {
	.wp-block-gallery.has-nested-images.dc-gallery { grid-template-columns: 1fr; }
	.dc-recent { grid-template-columns: 1fr; }
	.dc-section { padding: 56px 20px; }
	.dc-topic { gap: 24px; margin-bottom: 52px; }
	.dc-hero .dc-hero-logo img { width: 260px; }
}