/*
Theme Name: Tropical Paradise
Theme URI: https://example.com/tropical-paradise
Author: Beach Co.
Description: A sun-soaked beach paradise theme. Undulating SVG waves, palm silhouettes, lazy gradients across cyan and sand, and a vacation-ready pairing of Pacifico headlines with Quicksand body type.
Version: 1.0.0
License: GPLv2 or later
Text Domain: tropical-paradise
*/

:root{
  --tp-deep:#164e63;
  --tp-cyan:#06b6d4;
  --tp-sea:#34d399;
  --tp-sand:#fef9c3;
  --tp-foam:#ecfeff;
  --tp-display:"Pacifico", cursive;
  --tp-body:"Quicksand", system-ui, sans-serif;
  --tp-shadow:0 30px 60px -30px rgba(22,78,99,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--tp-body);font-size:16px;line-height:1.65;color:var(--tp-deep);
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(6,182,212,.18), transparent 70%),
    radial-gradient(700px 400px at 0% 60%, rgba(52,211,153,.18), transparent 70%),
    var(--tp-foam);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tp-cyan);text-decoration:none;transition:color .25s}
a:hover{color:var(--tp-deep)}

/* Header */
.tp-bar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(236,254,255,.78);border-bottom:1px solid rgba(6,182,212,.18)}
.tp-bar-inner{max-width:1280px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tp-logo{display:flex;align-items:center;gap:12px;font-family:var(--tp-display);font-size:30px;color:var(--tp-deep);line-height:1}
.tp-sun{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 50% 60%, var(--tp-sand), #fbbf24 60%, #f59e0b);
  box-shadow:0 0 20px rgba(251,191,36,.6);position:relative;
}
.tp-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tp-nav a{font-size:14px;font-weight:600;letter-spacing:.01em;padding:10px 16px;color:var(--tp-deep);border-radius:999px}
.tp-nav a:hover{background:rgba(6,182,212,.12);color:var(--tp-deep)}
.tp-nav .login{
  background:linear-gradient(135deg,var(--tp-cyan),var(--tp-sea));color:#fff;
  box-shadow:0 14px 30px -10px rgba(6,182,212,.6);font-weight:700;
}
.tp-nav .login:hover{transform:translateY(-2px);color:#fff}

/* Hero - beach */
.tp-hero{position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(254,249,195,.7), transparent 30%, rgba(6,182,212,.18))}
.tp-hero-inner{max-width:1280px;margin:0 auto;padding:80px 28px 140px;position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
@media (max-width:920px){.tp-hero-inner{grid-template-columns:1fr}}
.tp-hero h1{
  font-family:var(--tp-display);font-size:clamp(56px,10vw,140px);line-height:1;
  letter-spacing:-.005em;color:var(--tp-deep);margin:0 0 18px;
}
.tp-hero h1 span{
  background:linear-gradient(90deg, var(--tp-cyan), var(--tp-sea));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tp-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-cyan);margin-bottom:18px;font-weight:700}
.tp-tag::before{content:"";width:24px;height:2px;background:var(--tp-cyan)}
.tp-hero p{font-size:19px;color:rgba(22,78,99,.78);max-width:520px}
.tp-cta{
  display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:18px 30px;border-radius:999px;
  background:linear-gradient(135deg,var(--tp-cyan),var(--tp-sea));color:#fff;font-weight:700;letter-spacing:.04em;
  box-shadow:0 20px 40px -14px rgba(6,182,212,.6);
}
.tp-cta:hover{transform:translateY(-2px);color:#fff}

/* Palm silhouette + sun */
.tp-scene{position:relative;height:380px}
.tp-scene .sun{position:absolute;right:30px;top:0;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 50% 60%, var(--tp-sand), #fbbf24 60%, #f59e0b);box-shadow:0 0 60px rgba(251,191,36,.5)}
.tp-scene svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
@media (max-width:920px){.tp-scene{height:280px}}

/* Wave divider */
.tp-wave{display:block;width:100%;height:120px;margin-bottom:-1px}
.tp-wave path{fill:var(--tp-foam)}

/* Crumbs */
.tp-crumbs{max-width:1280px;margin:0 auto;padding:18px 28px;font-size:13px;letter-spacing:.04em;color:var(--tp-deep);font-weight:600}
.tp-crumbs a{color:var(--tp-cyan)}
.tp-crumbs span{margin:0 10px;color:var(--tp-sea)}

/* Layout */
.tp-shell{max-width:1280px;margin:0 auto;padding:30px 28px 80px;display:grid;grid-template-columns:1fr 320px;gap:48px}
@media (max-width:980px){.tp-shell{grid-template-columns:1fr}}
.tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media (max-width:720px){.tp-grid{grid-template-columns:1fr}}

/* Cards */
.tp-card{
  background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:var(--tp-shadow);transition:transform .35s, box-shadow .35s;
  border:1px solid rgba(6,182,212,.12);
}
.tp-card:hover{transform:translateY(-6px);box-shadow:0 50px 80px -30px rgba(6,182,212,.45)}
.tp-thumb{display:block;aspect-ratio:5/3;overflow:hidden;background:linear-gradient(135deg,var(--tp-cyan),var(--tp-sea))}
.tp-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.tp-card:hover .tp-thumb img{transform:scale(1.06)}
.tp-card-body{padding:24px 26px 28px}
.tp-cat{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(52,211,153,.18);color:var(--tp-deep);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.tp-card h2{font-family:var(--tp-display);font-size:28px;line-height:1.2;color:var(--tp-deep);margin:14px 0 10px}
.tp-card h2 a{color:inherit}
.tp-card h2 a:hover{color:var(--tp-cyan)}
.tp-card p{margin:0;font-size:15px;color:rgba(22,78,99,.72)}
.tp-meta-line{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;color:var(--tp-cyan);font-weight:700;letter-spacing:.04em}

/* Sidebar */
.tp-side .widget{
  background:linear-gradient(180deg, #fff, var(--tp-foam));
  border-radius:24px;padding:24px;margin-bottom:22px;
  box-shadow:var(--tp-shadow);border:1px solid rgba(6,182,212,.12);
}
.tp-side h3{font-family:var(--tp-display);font-size:24px;color:var(--tp-deep);margin:0 0 12px}
.tp-side ul{list-style:none;padding:0;margin:0}
.tp-side li{padding:8px 0;border-bottom:1px dashed rgba(6,182,212,.18);font-size:14px;font-weight:600}
.tp-side li:last-child{border-bottom:0}
.tp-side a{color:var(--tp-deep)}
.tp-side a:hover{color:var(--tp-cyan)}

/* Article */
.tp-article{max-width:780px;margin:30px auto;padding:50px 36px;background:#fff;border-radius:30px;box-shadow:var(--tp-shadow);border:1px solid rgba(6,182,212,.12)}
.tp-article header{text-align:center;margin-bottom:30px}
.tp-article .stamp{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(52,211,153,.18);color:var(--tp-deep);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.tp-article h1{font-family:var(--tp-display);font-size:clamp(40px,6vw,72px);line-height:1.05;color:var(--tp-deep);margin:0 0 12px}
.tp-article .meta{font-size:13px;color:var(--tp-cyan);font-weight:700;letter-spacing:.04em}
.tp-article .feat{margin:24px 0;border-radius:24px;overflow:hidden}
.tp-article .body{font-size:18px;line-height:1.85;color:rgba(22,78,99,.88)}
.tp-article .body h2,.tp-article .body h3{font-family:var(--tp-display);color:var(--tp-deep)}
.tp-article .body blockquote{border-left:4px solid var(--tp-sea);padding:16px 22px;margin:28px 0;background:rgba(52,211,153,.15);border-radius:0 18px 18px 0;font-family:var(--tp-display);font-size:22px;color:var(--tp-deep)}

/* Related */
.tp-related{max-width:1280px;margin:0 auto;padding:30px 28px 80px}
.tp-related h3{font-family:var(--tp-display);font-size:36px;color:var(--tp-deep);margin:0 0 24px;text-align:center}

/* Pager */
.tp-pager{display:flex;justify-content:center;gap:8px;margin:30px 0}
.tp-pager a, .tp-pager span{padding:12px 18px;border-radius:999px;background:#fff;border:1px solid rgba(6,182,212,.2);font-weight:700;color:var(--tp-deep)}
.tp-pager .current{background:linear-gradient(135deg,var(--tp-cyan),var(--tp-sea));color:#fff;border-color:transparent}

/* 404 */
.tp-404{max-width:880px;margin:0 auto;padding:120px 28px;text-align:center}
.tp-404 .big{font-family:var(--tp-display);font-size:clamp(120px,22vw,260px);line-height:.9;background:linear-gradient(135deg,var(--tp-cyan),var(--tp-sea),var(--tp-deep));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Comments */
.tp-comments{max-width:780px;margin:0 auto;padding:0 28px 80px}
.tp-comments h3{font-family:var(--tp-display);font-size:32px;color:var(--tp-deep)}
.tp-comments ol{list-style:none;padding:0}
.tp-comments li{background:#fff;border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:var(--tp-shadow);border:1px solid rgba(6,182,212,.12)}
.tp-comments textarea, .tp-comments input[type="text"], .tp-comments input[type="email"], .tp-comments input[type="url"]{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(6,182,212,.2);background:#fff;font-family:var(--tp-body)}
.tp-comments .submit input{background:linear-gradient(135deg,var(--tp-cyan),var(--tp-sea));color:#fff;border:0;padding:14px 28px;border-radius:999px;font-weight:700;letter-spacing:.04em;cursor:pointer;box-shadow:0 16px 30px -10px rgba(6,182,212,.5)}

/* Footer */
.tp-foot-wave{display:block;width:100%;height:90px;margin-bottom:-1px}
.tp-foot-wave path{fill:var(--tp-deep)}
.tp-foot{background:var(--tp-deep);color:var(--tp-foam);position:relative;overflow:hidden}
.tp-foot::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 80% 100%, rgba(6,182,212,.3), transparent 70%);pointer-events:none}
.tp-foot-inner{max-width:1280px;margin:0 auto;padding:40px 28px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative}
@media (max-width:880px){.tp-foot-inner{grid-template-columns:repeat(2,1fr)}}
.tp-foot h4{font-family:var(--tp-display);font-size:22px;color:var(--tp-sand);margin:0 0 14px}
.tp-foot ul{list-style:none;padding:0;margin:0}
.tp-foot li{padding:5px 0;font-size:14px;font-weight:500}
.tp-foot a{color:rgba(236,254,255,.78)}
.tp-foot a:hover{color:var(--tp-sand)}
.tp-foot-bottom{border-top:1px solid rgba(236,254,255,.18);text-align:center;padding:22px;font-size:13px;font-weight:600;color:rgba(236,254,255,.65);position:relative}