/*
Theme Name: Socks With Crocs
Theme URI: https://sockswithcrocs.site
Author: Socks With Crocs
Description: Weathered Old Florida beach-bar theme for SocksWithCrocs.site.
Version: 0.1.0
Requires PHP: 8.3
Text Domain: sockswithcrocs
*/
:root{--swc-sand:#e6d0a6;--swc-cream:#f6ecd2;--swc-teal:#2f7772;--swc-sea:#184f57;--swc-coral:#c85d45;--swc-sun:#dcae45;--swc-palm:#526846;--swc-wood:#4a3022;--swc-ink:#231d18}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#d9c294;color:var(--swc-ink);font-family:Georgia,'Times New Roman',serif;background-image:linear-gradient(rgba(246,236,210,.5),rgba(217,194,148,.55));}a{color:inherit}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:relative;background:#3a281f;color:#fff8df;border-bottom:7px solid #201610;box-shadow:0 8px 20px #0005}.site-header:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,#fff0 0 80px,#ffffff08 81px 83px)}.header-inner{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:1}.brand{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;text-decoration:none;font-size:clamp(27px,4vw,48px);letter-spacing:1px;text-shadow:3px 3px 0 #15100d;transform:rotate(-1deg)}.main-nav{display:flex;gap:18px;flex-wrap:wrap}.main-nav a{text-decoration:none;font-weight:700}.hero{min-height:520px;display:grid;place-items:center;text-align:center;padding:70px 0;background:linear-gradient(#77b6bb 0 48%,#e9c976 48% 72%,#6e8659 72%);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;left:-5%;right:-5%;top:45%;height:35px;background:#f5f0d7aa;transform:rotate(-1deg);border-radius:50%}.hero-sign{position:relative;background:#4b3022;color:#fff6dc;padding:34px 46px;border:9px solid #2a1a13;box-shadow:0 18px 30px #0005;transform:rotate(-1.2deg);max-width:850px}.hero-sign h1{margin:0;font:clamp(52px,9vw,112px)/.82 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;letter-spacing:1px}.hero-sign p{font-size:clamp(18px,2.2vw,27px);margin:24px 0 0}.section{padding:68px 0}.section-title{font:clamp(34px,5vw,62px)/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;margin:0 0 28px}.section-title span{display:inline-block;background:var(--swc-cream);padding:10px 18px;border:4px solid var(--swc-ink);box-shadow:6px 7px 0 #0002;transform:rotate(-1deg)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#f7efd8;border:3px solid #33261e;box-shadow:8px 9px 0 #0002;text-decoration:none;display:block;overflow:hidden;transition:.18s transform}.card:hover{transform:translateY(-5px) rotate(-.3deg)}.card-media{aspect-ratio:16/9;background:#5e8f8c;display:grid;place-items:center;font:bold 18px Arial;color:#fff}.card-body{padding:22px}.card h3{font:30px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;margin:0 0 8px}.card p{margin:0;line-height:1.5}.alt{background:#50736d;color:#fff8e7;border-block:7px solid #294b47}.alt .card{color:var(--swc-ink)}.random-wrap{text-align:center;background:#d7a846}.random-button{display:inline-block;background:#b84632;color:white;text-decoration:none;padding:20px 32px;border:5px solid #442119;box-shadow:7px 8px 0 #0003;font:30px Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;transform:rotate(1deg)}.site-footer{background:#342219;color:#efe1bd;padding:52px 0 26px;border-top:8px solid #1f1510}.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px}.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}.fineprint{opacity:.7;font-size:13px;margin-top:30px}.placeholder{border:3px dashed currentColor;padding:30px;text-align:center;opacity:.72}@media(max-width:800px){.header-inner{align-items:flex-start;flex-direction:column;padding:20px 0}.cards{grid-template-columns:1fr}.hero{min-height:440px}.hero-sign{padding:28px 20px}.footer-grid{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}