/*
Theme Name: CJones Fine Art
Theme URI: https://cjones.ca
Author: ABX.ca
Author URI: https://abx.ca
Description: A refined, standalone fine-art portfolio theme for Christopher Jones. Reproduces the Ontario lakes & forests homepage (hero, featured works, reflection, collections, full-width feature) in lightweight native PHP/CSS with no page-builder dependency. Includes an Artwork custom post type, WooCommerce support, and a full Customizer panel for editing text, images, and colours.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cjones-fineart
Tags: portfolio, fine-art, custom-logo, custom-menu, featured-images, translation-ready, full-width-template, e-commerce
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --cj-green:        #386641;
  --cj-green-light:  #6a994e;
  --cj-green-dark:   #2b4f33;
  --cj-ink:          #0e0c19;
  --cj-body:         #3c3a47;
  --cj-muted:        #6f6c79;
  --cj-bg:           #ffffff;
  --cj-cream:        #f7f4ee;
  --cj-line:         #e7e2d8;
  --cj-black:        #000000;

  --cj-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cj-sans: 'Source Sans 3', 'Source Sans Pro', Helvetica, Arial, sans-serif;

  --cj-container: 1180px;
  --cj-radius: 6px;
  --cj-shadow: 0 24px 72px -12px rgba(0,0,0,.12);
  --cj-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cj-bg);
  color:var(--cj-body);
  font-family:var(--cj-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--cj-green);text-decoration:none;transition:color .25s var(--cj-ease);}
a:hover{color:var(--cj-green-light);}
h1,h2,h3,h4,h5,h6{
  font-family:var(--cj-display);
  color:var(--cj-ink);
  font-weight:500;
  line-height:1.18;
  margin:0 0 .4em;
}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

/* ============================================================
   Layout helpers
   ============================================================ */
.cj-container{width:88%;max-width:var(--cj-container);margin:0 auto;}
.cj-section{padding:clamp(56px,8vw,120px) 0;}
.cj-section--cream{background:var(--cj-cream);}
.cj-section--dark{background:var(--cj-black);}
.cj-eyebrow{
  font-family:var(--cj-sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:13px;
  font-weight:700;
  color:var(--cj-green-light);
  margin:0 0 14px;
}
.cj-eyebrow--center{text-align:center;}
.cj-section-title{
  font-size:clamp(30px,4.2vw,50px);
  margin:0;
}
.cj-section-head{margin-bottom:clamp(36px,5vw,64px);}
.cj-section-head--center{text-align:center;}

/* ============================================================
   Buttons
   ============================================================ */
.cj-btn{
  display:inline-block;
  font-family:var(--cj-sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  color:#fff;
  background:var(--cj-green);
  padding:14px 30px;
  border-radius:100px;
  border:1px solid var(--cj-green);
  transition:background .3s var(--cj-ease), transform .3s var(--cj-ease), color .3s var(--cj-ease);
}
.cj-btn:hover{background:var(--cj-green-dark);border-color:var(--cj-green-dark);color:#fff;transform:translateY(-2px);}
.cj-btn--ghost{background:transparent;color:var(--cj-green);}
.cj-btn--ghost:hover{background:var(--cj-green);color:#fff;}

/* ============================================================
   Header / top bar
   ============================================================ */
.cj-topbar{
  background:var(--cj-green);
  color:#fff;
  text-align:center;
  padding:9px 20px;
  border-radius:0 0 var(--cj-radius) var(--cj-radius);
}
.cj-topbar p{
  margin:0;
  font-family:var(--cj-sans);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:13px;
  font-weight:600;
}
.cj-header{position:relative;z-index:50;background:var(--cj-bg);}
.cj-header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:22px 0 18px;
}
.cj-logo img{max-height:58px;width:auto;}
.cj-logo .cj-logo-text{
  font-family:var(--cj-display);
  font-size:30px;
  font-style:italic;
  color:var(--cj-ink);
}
.cj-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
}
.cj-nav a{
  font-family:var(--cj-sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--cj-ink);
}
.cj-nav a:hover,
.cj-nav .current-menu-item>a,
.cj-nav .current_page_item>a{color:var(--cj-green);}
.cj-nav-toggle{
  display:none;
  background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--cj-green);
}

/* ============================================================
   Hero
   ============================================================ */
.cj-hero{padding:clamp(48px,7vw,96px) 0;}
.cj-hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.cj-hero-title{font-size:clamp(34px,5.4vw,62px);margin-bottom:.5em;}
.cj-hero-body{font-size:17px;color:var(--cj-body);margin-bottom:1.6em;max-width:46ch;}
.cj-hero-figure{
  border-radius:var(--cj-radius);
  overflow:hidden;
  box-shadow:var(--cj-shadow);
}
.cj-hero-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;}

/* ============================================================
   Featured works (dark)
   ============================================================ */
.cj-section--dark .cj-eyebrow{color:var(--cj-green-light);}
.cj-section--dark .cj-section-title{color:#fff;}
.cj-grid-4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.cj-art-card{
  position:relative;display:block;overflow:hidden;border-radius:var(--cj-radius);
  background:#111;cursor:zoom-in;
}
.cj-art-card img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .6s var(--cj-ease), opacity .4s var(--cj-ease);
}
.cj-art-card:hover img{transform:scale(1.05);opacity:.92;}
.cj-art-card__plus{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#fff;opacity:0;transition:opacity .4s var(--cj-ease);
  background:rgba(56,102,65,.28);pointer-events:none;
}
.cj-art-card:hover .cj-art-card__plus{opacity:1;}

/* ============================================================
   Reflection (two-column prose)
   ============================================================ */
.cj-prose-2{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
}
.cj-prose-2 p{font-size:17px;}

/* ============================================================
   Collections grid (Artwork CPT or fallback cards)
   ============================================================ */
.cj-collection-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;
}
.cj-collection-card{display:block;}
.cj-collection-card__media{
  overflow:hidden;border-radius:var(--cj-radius);margin-bottom:16px;
}
.cj-collection-card__media img{
  width:100%;height:300px;object-fit:cover;
  transition:transform .6s var(--cj-ease);
}
.cj-collection-card:hover .cj-collection-card__media img{transform:scale(1.04);}
.cj-collection-card__title{font-size:24px;margin:0 0 4px;}
.cj-collection-card__meta{
  font-family:var(--cj-sans);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;font-weight:700;color:var(--cj-green-light);
}

/* ============================================================
   Full-width feature + CTA
   ============================================================ */
.cj-feature-figure{
  border-radius:var(--cj-radius);overflow:hidden;margin-bottom:clamp(32px,5vw,56px);
}
.cj-feature-figure img{width:100%;max-height:520px;object-fit:cover;}
.cj-feature-grid{
  display:grid;grid-template-columns:3fr 2fr;gap:clamp(28px,4vw,56px);align-items:center;
}
.cj-feature-grid h2{font-size:clamp(26px,3.4vw,44px);margin:0;}
.cj-feature-desc{font-size:18px;font-family:var(--cj-display);font-style:italic;color:var(--cj-ink);margin-bottom:1.4em;}

/* ============================================================
   Footer
   ============================================================ */
.cj-footer{background:var(--cj-cream);padding:clamp(48px,6vw,80px) 0 36px;border-top:1px solid var(--cj-line);}
.cj-footer-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:48px;
}
.cj-footer-col h5{
  font-size:18px;margin-bottom:16px;
}
.cj-footer-col ul{list-style:none;margin:0;padding:0;}
.cj-footer-col li{margin-bottom:10px;}
.cj-footer-col a{color:var(--cj-body);font-size:15px;}
.cj-footer-col a:hover{color:var(--cj-green);}
.cj-footer-bottom{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--cj-line);padding-top:24px;
}
.cj-footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0;}
.cj-footer-nav a{color:var(--cj-body);font-family:var(--cj-sans);font-size:14px;font-weight:600;}
.cj-social{display:flex;gap:14px;}
.cj-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--cj-line);
  display:flex;align-items:center;justify-content:center;color:var(--cj-green);
}
.cj-social a:hover{background:var(--cj-green);color:#fff;border-color:var(--cj-green);}
.cj-social svg{width:17px;height:17px;fill:currentColor;}
.cj-copyright{font-size:13px;color:var(--cj-muted);text-align:center;margin-top:28px;}

/* ============================================================
   Generic page / single / archive content
   ============================================================ */
.cj-page{padding:clamp(48px,7vw,96px) 0;}
.cj-page-header{text-align:center;margin-bottom:48px;}
.cj-page-title{font-size:clamp(32px,5vw,56px);}
.cj-entry{max-width:760px;margin:0 auto;}
.cj-entry h2{font-size:32px;margin-top:1.4em;}
.cj-entry h3{font-size:24px;margin-top:1.2em;}
.cj-entry img{border-radius:var(--cj-radius);margin:1.4em 0;}
.cj-entry blockquote{
  border-left:4px solid var(--cj-green-light);
  margin:1.6em 0;padding:.2em 0 .2em 24px;
  font-family:var(--cj-display);font-style:italic;font-size:22px;color:var(--cj-ink);
}

/* Lightbox */
.cj-lightbox{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:5vw;
  background:rgba(8,10,9,.92);
}
.cj-lightbox.is-open{display:flex;}
.cj-lightbox img{max-width:100%;max-height:90vh;border-radius:var(--cj-radius);box-shadow:0 30px 80px rgba(0,0,0,.5);}
.cj-lightbox__close{
  position:absolute;top:24px;right:30px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .cj-hero-grid,.cj-prose-2,.cj-feature-grid{grid-template-columns:1fr;}
  .cj-hero-figure{order:-1;}
  .cj-grid-4{grid-template-columns:repeat(2,1fr);}
  .cj-footer-cols{grid-template-columns:1fr 1fr;}
  .cj-nav{
    display:none;width:100%;
  }
  .cj-nav.is-open{display:block;}
  .cj-nav ul{flex-direction:column;align-items:center;gap:14px;}
  .cj-header-inner{flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
  .cj-nav-toggle{display:block;}
}
@media (max-width:560px){
  .cj-grid-4{grid-template-columns:1fr;}
  .cj-footer-cols{grid-template-columns:1fr;}
  .cj-footer-bottom{flex-direction:column;text-align:center;}
}

/* Accessibility */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;
}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:10px 16px;z-index:100000;border-radius:4px;}