/*
Theme Name: Coastal Light
Theme URI: https://www.barneycutrer-art.com/
Author: Seapoint Digital
Author URI: https://seapoint.digital/
Description: Barney Cutrer — Maine impressionist portfolio. A refined "Coastal Light" concept ported pixel-for-pixel from a Claude Design handoff. Client-side gallery SPA (Home / About / Landscapes / Abstract / Portraits / Digital) with lightbox.
Version: 1.0.0
Requires at least: 6.0
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: coastal-light
*/

/* ---- Base (from design) ---- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #faf8f3; color: #211e19; font-family: Karla, sans-serif; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #211e19; text-decoration: none; }
a:hover { color: #8a8172; }

@keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.07); } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }

/* ---- Interactions (design used DC "style-hover"; recreated as CSS) ---- */
.cl-nav-item:hover { color: #211e19 !important; }
/* Desktop nav: inline row. Can shrink + scroll internally rather than push the page wide. */
.cl-nav-scroll { display: flex; gap: 32px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cl-nav-scroll::-webkit-scrollbar { display: none; }
.cl-nav-item { white-space: nowrap; }
/* Logo always one line; the nav absorbs any horizontal squeeze. */
.cl-logo { white-space: nowrap; flex-shrink: 0; }
/* Hamburger button — hidden on desktop, revealed in the <=900 block. */
.cl-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 7px; background: none; border: 0; cursor: pointer; }
.cl-burger span { display: block; width: 20px; height: 2px; background: #211e19; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.cl-lift { will-change: transform; }
.cl-lift:hover { transform: translateY(-6px); }

/* ---- Grids (classed so they can go responsive; desktop values match design) ---- */
.cl-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cl-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cl-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.cl-painter { display: grid; grid-template-columns: 1fr 1fr; }
.cl-about-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.cl-about-plein { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cl-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }

/* ---- About chapters ---- */
.cl-about-hero, .cl-ch-a, .cl-ch-b { display: grid; gap: 72px; align-items: center; }
.cl-about-hero { grid-template-columns: 1fr 1fr; }
.cl-ch-a { grid-template-columns: 1fr 1.2fr; }
.cl-ch-b { grid-template-columns: 1.2fr 1fr; }
.cl-ch-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---- Form fields ---- */
.cl-field { -webkit-appearance: none; appearance: none; transition: border-color .2s ease; }
.cl-field:focus { outline: none; border-color: #b8ac96; }

/* ---- Responsive (enhancement; design was desktop-only) ---- */
@media (max-width: 900px) {
  .cl-cats { grid-template-columns: repeat(2, 1fr); }
  .cl-featured { grid-template-columns: 1fr; }
  .cl-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-painter { grid-template-columns: 1fr; }
  .cl-about-row { grid-template-columns: 1fr; }
  .cl-about-plein { grid-template-columns: 1fr; }
  .cl-pad { padding-left: 24px !important; padding-right: 24px !important; }
  .cl-painter-copy { padding: 56px 28px !important; }
  .cl-hero-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cl-footer-grid { grid-template-columns: 1fr; }
  .cl-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .cl-about-hero, .cl-ch-a, .cl-ch-b { grid-template-columns: 1fr; gap: 40px; }

  /* Tablet: keep the inline nav but tighten spacing so all 7 links fit without scrolling. */
  .cl-nav-scroll { gap: 18px; }
  .cl-nav-item { letter-spacing: .1em; }
}
@media (max-width: 560px) {
  .cl-ch-imgs { grid-template-columns: 1fr; }
  .cl-gallery-grid { grid-template-columns: 1fr; }
}

/* ---- Phones only: hamburger + dropdown panel ---- */
@media (max-width: 767px) {
  .cl-burger { display: flex; }
  .cl-nav-open .cl-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cl-nav-open .cl-burger span:nth-child(2) { opacity: 0; }
  .cl-nav-open .cl-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cl-nav-scroll {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #faf8f3; border-bottom: 1px solid #eee8da; box-shadow: 0 16px 30px rgba(33, 30, 25, .10);
    overflow: hidden; max-height: 0; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s ease;
  }
  .cl-nav-open .cl-nav-scroll { max-height: 70vh; opacity: 1; pointer-events: auto; }
  .cl-nav-scroll .cl-nav-item { padding: 16px 24px; letter-spacing: .16em; border-bottom: 0 !important; }
  .cl-nav-scroll .cl-nav-item + .cl-nav-item { border-top: 1px solid #eee8da; }
}