/*
Theme Name: The Creative
Theme URI: http://localhost/thecreative
Author: Fixels Media
Description: Custom theme for The Creative studio. Built from the original HTML design, with a dedicated Theme Options panel for branding, the home page, the call to action, the contact form, social links and custom code.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 7.1
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: thecreative
*/

/* The design styles live in assets/css/styles.css and assets/css/pages.css.
   This file only holds WordPress-specific additions. */

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.alignleft{float:left;margin:0 25px 20px 0}.alignright{float:right;margin:0 0 20px 25px}.aligncenter{margin-inline:auto}

/* Social links in the footer (only shown when set in Theme Options) */
.footer-social{display:flex;gap:16px;flex-wrap:wrap}
.footer-social a{font-size:11px;color:#b4afb9}

/* Blog, search, single post and 404 */
.entry-list{display:grid;gap:0;border-top:1px solid #17171c30}
.entry-card{display:grid;grid-template-columns:1fr 2fr;gap:6%;padding-block:40px;border-bottom:1px solid #17171c30}
.entry-card .eyebrow{color:#e3299d}
.entry-card h2{font-size:clamp(26px,3vw,42px);line-height:1.1;letter-spacing:-.05em}
.entry-card p{font-size:14px;line-height:1.8;color:#5b5362;margin-top:14px}
.entry-card .text-link{margin-top:20px}
.entry-thumb{display:block;overflow:hidden;border-radius:6px;margin-bottom:30px}
.entry-content{max-width:780px;font-size:16px;line-height:1.8;color:#3b3540}
.entry-content>*+*{margin-top:1.2em}
.entry-content h2,.entry-content h3{color:var(--ink);line-height:1.15;margin-top:1.6em}
.entry-content h2{font-size:clamp(28px,3vw,40px)}
.entry-content h3{font-size:24px;letter-spacing:-.03em}
.entry-content a{color:#c41d84;text-decoration:underline}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content blockquote{margin-inline:0;padding-left:22px;border-left:3px solid var(--pink);font-family:var(--serif);font-size:22px}
.entry-content img{border-radius:6px}
.entry-meta{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#c3c0c5;margin-top:25px}
.pagination{display:flex;gap:10px;justify-content:center;padding-top:40px}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid #17171c40;border-radius:999px;font-size:12px}
.pagination .current{background:var(--ink);color:#fff}
.search-form{display:flex;gap:10px;margin-top:25px;max-width:520px}
.search-form input{border-color:#ffffff50;color:#fff}
.comments-area{max-width:780px;margin-top:60px;color:var(--ink)}
@media(max-width:760px){.entry-card{grid-template-columns:1fr;gap:10px}}

/* Contact form feedback */
.tc-hp{position:absolute!important;left:-9999px!important}
.contact-form-panel button[disabled]{opacity:.6;cursor:wait}

/* Hero eyebrow sits inside the page heading for search engines but keeps its small label style. */
.hero h1 .hero-eyebrow{font-family:inherit;font-size:10px;font-weight:400;line-height:1.5;letter-spacing:.33em;margin-bottom:16px}

/* Team page */
.team-section{padding-block:75px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 28px;margin-top:50px}
.team-photo{aspect-ratio:5/6;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--orange),var(--pink),var(--purple));display:grid;place-items:center}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-photo span{font-size:72px;font-weight:800;color:#fff}
.team-card h3{font-size:25px;line-height:1.1;margin-top:18px}
.team-card .eyebrow{font-size:9px;margin-top:10px}
.team-bio{font-size:12px;line-height:1.8;color:#bfb4cc;margin-top:12px}
.team-card .text-link{display:inline-block;margin-top:12px}

.footer-contact{font-style:normal;font-size:10px;color:#b4afb9;display:flex;flex-wrap:wrap;gap:6px 16px}
.footer-contact a{font-size:10px}

@media(max-width:1100px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hero h1 .hero-eyebrow{font-size:8px;letter-spacing:.2em;margin-bottom:17px}.team-section{padding-block:45px}.team-grid{gap:30px 16px;margin-top:30px}.footer-contact{order:4;width:100%}}

/* Home page: clients, stats, testimonials, latest posts */
.client-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 48px;padding-block:45px}
.client-logos img{width:auto;max-width:130px;height:38px;object-fit:contain}
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-block:55px;border-top:1px solid var(--line)}
.stats-band strong{display:block;font-size:clamp(38px,4.6vw,66px);line-height:1;letter-spacing:-.05em}
.stats-band span{display:block;font-size:12px;color:#bfb4cc;margin-top:12px}
.testimonials{padding-block:65px}
.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
.testimonial-grid figure{margin:0;border-top:1px solid #ffffff40;padding-top:24px}
.testimonial-grid img{width:auto;max-width:120px;height:32px;object-fit:contain;margin-bottom:18px}
.testimonial-grid blockquote{margin:0;font-size:24px;line-height:1.3}
.testimonial-grid figcaption{font-size:12px;color:#bfb4cc;margin-top:18px}
.home-posts{padding-block:65px;border-top:1px solid var(--line)}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;margin-top:40px}
.light-section .post-grid{margin-top:0}
.post-card-image{display:grid;place-items:center;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--orange),var(--pink),var(--purple));margin-bottom:18px}
.post-card-image img{width:100%;height:100%;object-fit:cover}
.post-thumb-fallback{font-size:64px;color:#fff}
.project-image .post-thumb-fallback{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,var(--orange),var(--pink),var(--purple))}
.post-card .eyebrow{font-size:9px}
.post-card h3{font-size:22px;line-height:1.2;letter-spacing:-.03em;margin-top:10px}
.post-card p:not(.eyebrow){font-size:13px;line-height:1.7;margin-top:10px;opacity:.8}
.post-card .text-link{display:inline-block;margin-top:14px}
.article-hero h1{font-size:clamp(32px,4.6vw,64px);line-height:1.06;text-transform:none;letter-spacing:-.04em;max-width:980px}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:7%;align-items:start}
.post-sidebar{position:sticky;top:30px}
.post-sidebar .eyebrow{font-size:10px}
.post-sidebar ul{list-style:none;margin:16px 0 18px;padding:0}
.post-sidebar li{border-top:1px solid #0000001f;padding:12px 0;font-size:13px;line-height:1.5}
.post-share{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:40px;padding-top:20px;border-top:1px solid #0000001f;font-size:13px}
.post-share a{text-decoration:underline}

/* Careers and contact details */
.careers-roles{list-style:none;margin:22px 0 0;padding:0}
.careers-roles li{border-top:1px solid var(--line);padding:12px 0;font-size:14px}
.careers-empty{font-size:14px;line-height:1.8;margin-top:22px}
#careers-form input[type=file]{padding:10px 0}
.contact-info{list-style:none;display:grid;gap:14px;margin:28px 0 0;padding:0;font-size:14px}
.contact-info .eyebrow{display:block;font-size:9px;margin-bottom:5px}
.about-photo:empty{display:none}
.service-artwork>img,.service-leaf-image>img{width:100%;height:100%;object-fit:cover;border-radius:6px}

.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:50;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 8px 24px #0006}

@media(max-width:1100px){.post-grid{grid-template-columns:repeat(2,1fr)}.post-layout{grid-template-columns:1fr;gap:40px}.post-sidebar{position:static}}
@media(max-width:760px){.stats-band{grid-template-columns:1fr 1fr}.testimonial-grid,.post-grid{grid-template-columns:1fr}.footer nav{flex-wrap:wrap;justify-content:flex-start}}

/* Mega menu */
.site-header .desktop-nav{align-self:stretch;align-items:center}
.nav-item{display:flex;align-items:center;gap:2px;height:100%}
.mega-toggle{display:grid;place-items:center;width:20px;height:28px;padding:0;background:transparent;color:inherit;border-radius:4px;cursor:pointer}
.mega-toggle svg{transition:transform .2s}
.nav-item.is-open .mega-toggle svg{transform:rotate(180deg)}
.nav-item.is-open>a{color:#ff91af}
.mega-panel{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;padding:36px;background:#1e1c23;border:1px solid #ffffff25;border-radius:12px;box-shadow:0 30px 70px #000a;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-item.is-open .mega-panel{opacity:1;visibility:visible;transform:none}
.mega-panel a{padding:0}
.mega-panel a:after{display:none}
.mega-intro .eyebrow{font-size:9px}
.mega-lead{font-size:22px;line-height:1.25;margin-top:14px}
.mega-intro .text-link{display:inline-block;margin-top:20px;font-size:11px}
.mega-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mega-link{display:block;padding:14px!important;border-radius:8px;transition:background .15s}
.mega-link:hover,.mega-link:focus-visible{background:#ffffff12}
.mega-link strong{display:block;font-size:14px;line-height:1.3}
.mega-link span{display:block;font-size:12px;line-height:1.5;color:#bfb4cc;margin-top:6px}
.mega-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mega-column .eyebrow{font-size:9px}
.mega-column ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.mega-column li a{font-size:13px;line-height:1.35}
.mega-column li a:hover{color:#ff91af}

/* Mobile accordion */
.mobile-nav:not([hidden]){max-height:calc(100vh - 100px);overflow-y:auto}
.mobile-sub summary{display:flex;align-items:center;justify-content:space-between;font-size:21px;cursor:pointer;list-style:none}
.mobile-sub summary::-webkit-details-marker{display:none}
.mobile-sub summary:after{content:'+';color:var(--pink);font-size:22px;line-height:1}
.mobile-sub[open] summary:after{content:'−'}
.mobile-sub-links{display:grid;gap:13px;padding:16px 0 4px 14px;border-left:1px solid #ffffff25;margin-top:12px}
.mobile-sub-links a{font-size:15px;line-height:1.3}
.mobile-sub-links .mobile-sub-all{color:#ff91af}
.mobile-sub-links .eyebrow{font-size:9px;margin-top:8px}

@media(prefers-reduced-motion:reduce){.mega-panel,.mega-toggle svg{transition:none}}
@media(max-width:1180px){.mega-panel{grid-template-columns:210px minmax(0,1fr);gap:28px;padding:28px}.mega-links{grid-template-columns:repeat(2,1fr)}}