/* ==============================
   COPYRIGHT CLICKANERD.COM 2026
   PACIFIC CLAW CO THEME
   ============================== */


/* =====================================================
   1️⃣ CLIENT BRAND PALETTE
   ===================================================== */

:root {

  /* Neutral Scale */
  --gray-50:  #fafafa;
  --gray-100: #f2f2f2;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;

  /* Pacific / Island Brand Colors */
  --brand-primary:   #F15A29;
  --brand-secondary: #0B7285;
  --brand-accent:    #00B8D9;

  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-secondary)
  );

  /* Typography */
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.12);
  --text-dark: #2d2d2d;

}


/* =====================================================
   2️⃣ GLOBAL BASE
   ===================================================== */

html { overflow-y: scroll; }

html, body {
  height: 100%;
  margin: 0;

  background: transparent;

  color: var(--text-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}


/* =====================================================
   3️⃣ FULL PAGE BACKGROUND
   ===================================================== */

.bg-wrap {
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  overflow:hidden;
}

.bg-image {
  width:100vw;
  height:100vh;
  object-fit:cover;
}

/* subtle overlay for readability */

.bg-wrap::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(
    rgba(0,0,0,.35),
    rgba(0,0,0,.35)
  );
}


/* =====================================================
   4️⃣ TYPOGRAPHY + LINKS
   ===================================================== */

a {
  color: var(--brand-secondary);
  text-decoration: none;
  position: relative;
  font-weight: 600;
  transition: color .2s ease;
}

a:hover { color: var(--brand-primary); }


/* =====================================================
   5️⃣ HEADER
   ===================================================== */

.top {

  max-width:1200px;
  margin:20px auto 0;
  padding:14px 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:rgba(255,255,255,.92);

  backdrop-filter: blur(10px);

  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.brand img {
  height:64px;
  display:block;
  border-radius:10px;
}


/* =====================================================
   6️⃣ NAV
   ===================================================== */

.nav {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav a {

  padding:10px 16px;

  border-radius:999px;

  background:#fff;

  border:1px solid rgba(0,0,0,.12);

  color:var(--brand-secondary);

  font-weight:600;

  transition:all .25s ease;

}

.nav a:hover,
.nav a.active {

  background:var(--brand-gradient);

  color:#fff;

  border-color:transparent;

  transform:translateY(-2px);

}


/* =====================================================
   7️⃣ HERO
   ===================================================== */

.hero {

  max-width:1200px;

  margin:40px auto;

  padding:40px;

  border-radius:var(--radius);

  background:rgba(255,255,255,.92);

  box-shadow:var(--shadow);

  text-align:center;

}

.hero h1 {

  font-family:var(--font-heading);

  font-size:clamp(30px,4vw,48px);

  margin-bottom:20px;

}

.hero p {

  max-width:650px;

  margin:auto;

  margin-bottom:30px;

}


/* =====================================================
   8️⃣ BUTTONS
   ===================================================== */

.btn {

  border:0;

  cursor:pointer;

  padding:12px 20px;

  border-radius:999px;

  font-weight:700;

  display:inline-block;

}

.btn.primary {

  background:var(--brand-gradient);

  color:#fff;

}

.btn.primary:hover {

  transform:translateY(-2px);

}

.btn.ghost {

  border:1px solid #ddd;

  color:#333;

  background:#fff;

}


/* =====================================================
   9️⃣ FEATURE CARDS
   ===================================================== */

.features {

  max-width:1100px;

  margin:40px auto 100px;

  padding:0 20px;

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

  gap:30px;

}

.card {

  background:#fff;

  padding:30px;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  transition:.25s ease;

}

.card:hover {

  transform:translateY(-6px);

}

.card h4 {

  margin-top:0;

}


/* =====================================================
   11️⃣ SHOP PAGE
   ===================================================== */

.shop-wrap {

  max-width:1200px;

  margin:60px auto 80px;

  padding:0 20px;

}

.shop-grid {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:50px;

}

.shop-main-image {

  width:100%;

  max-height:600px;

  object-fit:cover;

  border-radius:14px;

}

.shop-thumb {

  width:90px;

  height:90px;

  object-fit:cover;

  border-radius:12px;

  cursor:pointer;

}


/* =====================================================
   12️⃣ RESPONSIVE
   ===================================================== */

@media (max-width:768px) {

  .brand { display:none; }

  .nav {

    flex-direction:column;

    width:100%;

    gap:0;

  }

  .nav a {

    border-radius:0;

    padding:16px 0;

    font-size:16px;

  }

  .shop-grid {

    grid-template-columns:1fr;

  }

}
/* ================= HERO GRID ================= */

.hero-grid{

display:grid;
grid-template-columns: 220px 1fr 220px;
align-items:center;
gap:40px;

}

.hero-side{
display:flex;
justify-content:center;
align-items:center;
}

.hero-side img{

max-width:200px;
width:100%;

border-radius:18px;

box-shadow:0 20px 40px rgba(0,0,0,.25);

transition:transform .25s ease;

background:#fff;
padding:6px;

}

.hero-side img:hover{

transform:translateY(-6px);

}

/* MOBILE HERO */

@media (max-width:900px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;

}

.hero-side{

margin-top:20px;

}

.hero-side img{

max-width:160px;

}

}

/* ===== HERO OCEAN GLOW ===== */

.hero{
position:relative;
}

.hero::before{

content:"";

position:absolute;
left:50%;
top:50%;

transform:translate(-50%,-50%);

width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(255,255,255,0.35) 0%,
rgba(255,255,255,0.15) 40%,
rgba(255,255,255,0.05) 60%,
transparent 75%
);

filter:blur(40px);

z-index:-1;

pointer-events:none;

}
/* ===== SUN SPARKLE TEXT ===== */

.sun-text{

color:#ffffff;

font-weight:700;

text-shadow:
0 0 6px rgba(255,255,255,.9),
0 0 14px rgba(255,255,255,.7),
0 0 28px rgba(255,255,255,.45),
0 2px 4px rgba(0,0,0,.25);

animation:sunSparkle 6s ease-in-out infinite;

}

/* subtle shimmer */

@keyframes sunSparkle{

0%{
text-shadow:
0 0 4px rgba(255,255,255,.8),
0 0 10px rgba(255,255,255,.6),
0 0 18px rgba(255,255,255,.35),
0 2px 4px rgba(0,0,0,.25);
}

50%{
text-shadow:
0 0 10px rgba(255,255,255,1),
0 0 22px rgba(255,255,255,.85),
0 0 40px rgba(255,255,255,.55),
0 2px 4px rgba(0,0,0,.25);
}

100%{
text-shadow:
0 0 4px rgba(255,255,255,.8),
0 0 10px rgba(255,255,255,.6),
0 0 18px rgba(255,255,255,.35),
0 2px 4px rgba(0,0,0,.25);
}

}
/* ===== WHITE → DARK SHIMMER TITLE ===== */

.sun-title{

margin-top:0;
font-size:2.4rem;
font-weight:800;

background: linear-gradient(
120deg,
#ffffff 0%,
#ffffff 40%,
#b8c2c7 50%,
#ffffff 60%,
#ffffff 100%
);

background-size: 300% auto;

-webkit-background-clip: text;
background-clip: text;

-webkit-text-fill-color: transparent;

animation: sunShimmer 7s linear infinite;

text-shadow:
0 0 10px rgba(255,255,255,.9),
0 0 18px rgba(255,255,255,.6),
0 2px 6px rgba(0,0,0,.35);

}


/* moving shine */

@keyframes sunShimmer{

0%{
background-position:-200% center;
}

100%{
background-position:200% center;
}

}
/* ===== CLEAN WHITE SHOP TEXT ===== */

.shop-white{

color:#ffffff;

font-weight:700;

text-shadow:
0 0 6px rgba(255,255,255,.85),
0 0 14px rgba(255,255,255,.45),
0 2px 4px rgba(0,0,0,.35);

letter-spacing:.02em;

}

.shop-white a{

color:#ffffff;
text-decoration:none;

}

.shop-white a:hover{

opacity:.85;

}
.cart-buttons{
margin-top:30px;
display:flex;
align-items:center;
gap:14px;
}
/* ===== CART WHITE TEXT ===== */

.cart-white{

color:#ffffff;

text-shadow:
0 0 6px rgba(255,255,255,.85),
0 0 14px rgba(255,255,255,.45),
0 2px 4px rgba(0,0,0,.45);

}

.cart-white th,
.cart-white td,
.cart-white p,
.cart-white strong{

color:#ffffff;

}

.cart-white a{

color:#ffffff;
text-decoration:none;

}

.cart-white a:hover{

opacity:.85;

}
/* ABOUT PAGE POLISH */

.story-wrap{
max-width:900px;
margin:auto;
}

/* =========================
   RAISED H1 TITLES
========================= */

h1{

color:#ffffff;
font-weight:800;
letter-spacing:.5px;

text-shadow:
0 1px 0 rgba(255,255,255,.6),
0 3px 6px rgba(0,0,0,.45),
0 8px 18px rgba(0,0,0,.35),
0 0 18px rgba(255,255,255,.35);

}


/* =========================
   OWNER PHOTO
========================= */

.story-photo{
text-align:center;
margin:30px 0 40px 0;
}

.story-photo img{

max-width:100%;
border-radius:10px;

border:4px solid rgba(255,255,255,.25);

box-shadow:
0 15px 40px rgba(0,0,0,.45),
0 6px 18px rgba(0,0,0,.35);

transition:all .35s ease;

}

/* hover lift */

.story-photo img:hover{

transform:translateY(-6px) scale(1.02);

box-shadow:
0 28px 70px rgba(0,0,0,.65),
0 12px 30px rgba(0,0,0,.45);

border:4px solid rgba(255,255,255,.45);

}


/* =========================
   COSMOS PHOTO
========================= */

.cosmos-photo{
text-align:center;
margin:45px 0;
}

.cosmos-photo img{

max-width:420px;
border-radius:12px;

border:4px solid rgba(255,255,255,.25);

box-shadow:
0 18px 50px rgba(0,0,0,.55),
0 8px 22px rgba(0,0,0,.4);

transition:all .35s ease;

}

.cosmos-photo img:hover{

transform:translateY(-8px) scale(1.03);

box-shadow:
0 35px 90px rgba(0,0,0,.75),
0 14px 40px rgba(0,0,0,.55);

border:4px solid rgba(255,255,255,.5);

}


/* =========================
   TEXT SECTIONS
========================= */

.story-section{
margin-bottom:28px;
}

.mission-quote{

font-size:1.3rem;
font-weight:800;
color:#ffffff;
text-align:center;
margin:30px 0;

text-shadow:
0 1px 0 rgba(255,255,255,.8),
0 4px 8px rgba(0,0,0,.6),
0 10px 20px rgba(0,0,0,.45),
0 0 20px rgba(255,255,255,.35);

}

.tagline{

font-size:1.6rem;
font-weight:700;
text-align:center;
margin-top:35px;

text-shadow:
0 2px 6px rgba(0,0,0,.6),
0 0 15px rgba(255,255,255,.35);

}
/* MEET COSMOS FEATURE */

.cosmos-feature{
text-align:center;
margin:40px auto 0 auto;
max-width:420px;
}

.cosmos-frame{

display:inline-block;
padding:10px;
border-radius:12px;

background:rgba(255,255,255,.08);

box-shadow:
0 20px 60px rgba(0,0,0,.55),
0 10px 25px rgba(0,0,0,.45);

transition:all .35s ease;

}

.cosmos-frame img{
width:100%;
border-radius:8px;
display:block;
}

.cosmos-frame:hover{

transform:translateY(-8px) scale(1.03);

box-shadow:
0 40px 100px rgba(0,0,0,.75),
0 18px 40px rgba(0,0,0,.55);

background:rgba(255,255,255,.18);

}

.cosmos-caption{

margin-top:14px;
font-weight:700;
font-size:1.1rem;

text-shadow:
0 0 10px rgba(255,255,255,.5),
0 4px 8px rgba(0,0,0,.6);

}