/*
Theme Name: Oscar Malo Portfolio
Theme URI: https://oscarmalo.com
Author: Oscar Malo
Author URI: https://oscarmalo.com
Description: Custom responsive photography portfolio theme for Oscar Malo Photography. Editorial layout with full-bleed hero, service cards, masonry portfolio gallery, and press mentions.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: oscarmalo-portfolio
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --color-bg:#ffffff;
  --color-bg-alt:#faf5ef;
  --color-text:#2b2b28;
  --color-text-soft:#6b665f;
  --color-accent:#bc5a34;
  --color-accent-soft:#e7c3a8;
  --font-heading:'Playfair Display', serif;
  --font-body:'Jost', sans-serif;
  --max-width:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:500;line-height:1.2;margin:0 0 20px;color:var(--color-text);}
h1{font-size:clamp(2.4rem,5vw,4rem);}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);}
h3{font-size:1.4rem;}
p{margin:0 0 16px;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px;}
.eyebrow{font-family:var(--font-body);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--color-accent);font-weight:500;}
.btn{display:inline-block;padding:14px 34px;border:1px solid var(--color-text);border-radius:2px;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;transition:.25s ease;background:transparent;cursor:pointer;font-family:var(--font-body);}
.btn:hover{background:var(--color-text);color:#fff;}
.btn-accent{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.btn-accent:hover{background:#a44a28;border-color:#a44a28;}

/* Header */
.site-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 40px;
  max-width:1400px;
  margin:0 auto;
  z-index:100;
}
.site-branding img{max-height:52px;width:auto;}
.site-branding{font-family:var(--font-heading);font-size:1.6rem;}
.main-navigation{position:absolute;left:50%;transform:translateX(-50%);}
.main-navigation ul{display:flex;gap:34px;}
.main-navigation a{font-size:.95rem;letter-spacing:.03em;padding-bottom:4px;border-bottom:1px solid transparent;}
.main-navigation a:hover,.main-navigation .current-menu-item a{border-bottom-color:var(--color-text);}
.header-cta .btn{padding:16px 30px;}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;width:32px;height:24px;position:relative;}
.menu-toggle span{position:absolute;left:0;right:0;height:2px;background:var(--color-text);transition:.25s;}
.menu-toggle span:nth-child(1){top:0;}
.menu-toggle span:nth-child(2){top:11px;}
.menu-toggle span:nth-child(3){top:22px;}
.menu-toggle.is-active span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

/* Hero */
.hero{position:relative;padding:10px 40px 0;max-width:1400px;margin:0 auto;}
.hero-frame{position:relative;}
.hero-frame::before{content:"";position:absolute;right:-24px;top:40px;bottom:-40px;left:60px;background:var(--color-accent-soft);z-index:0;}
.hero-image{position:relative;z-index:1;width:100%;max-height:78vh;object-fit:cover;}
.hero-caption{text-align:center;padding:50px 20px 10px;}
.hero-caption h1{margin-bottom:6px;}
.hero-caption .eyebrow{display:block;margin-bottom:18px;}

/* Sections */
.section{padding:100px 0;}
.section-alt{background:var(--color-bg-alt);}
.section-header{text-align:center;max-width:640px;margin:0 auto 60px;}
.intro-statement{max-width:760px;margin:0 auto;text-align:center;font-family:var(--font-heading);font-size:1.5rem;font-style:italic;color:var(--color-text-soft);}

/* Service / feature cards */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:50px;}
.service-card{text-align:center;padding:50px 30px;border:1px solid #eee;transition:.25s;}
.service-card:hover{border-color:var(--color-accent);}
.service-card h3{margin-bottom:14px;}
.service-card .price{color:var(--color-accent);font-family:var(--font-body);font-weight:500;margin-bottom:20px;display:block;}

/* Split (about) */
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.split-section img{width:100%;}
.split-section .split-text .eyebrow{margin-bottom:14px;display:block;}

/* Portfolio masonry */
.portfolio-grid{columns:3 320px;column-gap:20px;}
.portfolio-grid figure{margin:0 0 20px;break-inside:avoid;overflow:hidden;}
.portfolio-grid img{transition:transform .4s ease;}
.portfolio-grid figure:hover img{transform:scale(1.04);}

/* Arch gallery */
.arch-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px;}
.arch-item{text-align:center;}
.arch-frame{position:relative;border-radius:220px 220px 0 0;overflow:hidden;aspect-ratio:3/4;}
.arch-frame img{width:100%;height:100%;object-fit:cover;}
.arch-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--color-accent);margin:20px auto 0;}

/* Testimonial */
.testimonial-section{background:var(--color-accent);color:#fff;text-align:center;padding:110px 20px;}
.testimonial-section .eyebrow{color:#fff;opacity:.85;display:block;margin-bottom:30px;}
.testimonial-section blockquote{font-family:var(--font-heading);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.5;max-width:900px;margin:0 auto 30px;font-style:normal;}
.testimonial-section cite{font-style:normal;font-size:.95rem;letter-spacing:.05em;}

/* Instagram follow */
.instagram-section{padding:100px 0;text-align:center;}
.instagram-section h2{margin-bottom:50px;}
.instagram-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:1400px;margin:0 auto;}
.instagram-grid a{display:block;overflow:hidden;aspect-ratio:1/1;}
.instagram-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.instagram-grid a:hover img{transform:scale(1.08);}
.instagram-tagline{margin-top:50px;padding:50px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;font-size:1.1rem;color:var(--color-text-soft);}

/* Press */
.press-list{columns:2;column-gap:60px;margin-top:20px;}
.press-list li{padding:14px 0;border-bottom:1px solid #eee;break-inside:avoid;font-size:.95rem;color:var(--color-text-soft);}
.press-list li strong{color:var(--color-text);font-family:var(--font-body);font-weight:600;}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px;}
.pricing-card{padding:50px 34px;text-align:center;background:var(--color-bg);border:1px solid #eee;}
.pricing-card.featured{border-color:var(--color-accent);position:relative;}
.pricing-card .amount{font-family:var(--font-heading);font-size:1.7rem;margin:16px 0;color:var(--color-accent);}

/* Contact */
.contact-section{position:relative;padding:120px 20px;background-size:cover;background-position:center;}
.contact-section::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.82);}
.contact-wrap{position:relative;max-width:620px;margin:0 auto;background:var(--color-bg-alt);padding:60px;text-align:center;}
.contact-wrap h2{margin-bottom:30px;}
.contact-form{text-align:left;}
.contact-form label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--color-text-soft);}
.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #cfc7ba;background:transparent;padding:10px 2px;margin-bottom:28px;font-family:var(--font-body);font-size:1rem;}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-color:var(--color-accent);}
.contact-form .btn{width:100%;}

/* Travel destinations */
.destinations-list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:900px;margin:50px auto 0;padding:0;list-style:none;}
.destinations-list li{padding:14px 28px;border:1px solid var(--color-accent-soft);border-radius:30px;font-family:var(--font-body);font-size:.95rem;color:var(--color-text);background:#fff;}

/* Footer */
.site-footer{padding:50px 40px;text-align:center;border-top:1px solid #eee;}
.site-footer .social-links{display:flex;justify-content:center;gap:22px;margin-bottom:18px;}
.site-footer .social-links a{width:34px;height:34px;border:1px solid #ddd;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;}
.site-footer p{color:var(--color-text-soft);font-size:.85rem;margin:0;}

/* Responsive */
@media (max-width:1024px){
  .services-grid,.pricing-grid{grid-template-columns:repeat(2,1fr);}
.instagram-grid{grid-template-columns:repeat(4,1fr);}
  .split-section{grid-template-columns:1fr;gap:30px;}
  .portfolio-grid{columns:2 260px;}
}
@media (max-width:768px){
  .site-header{padding:20px;}
  .main-navigation{position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;background:#fff;transform:translateX(100%);transition:transform .3s ease;box-shadow:-6px 0 24px rgba(0,0,0,.08);padding:100px 30px;z-index:200;}
  .main-navigation.is-open{transform:translateX(0);}
  .main-navigation ul{flex-direction:column;gap:26px;}
  .menu-toggle{display:block;z-index:210;}
  .header-cta{display:none;}
  .hero{padding:0 20px;}
  .hero-frame::before{left:20px;right:-14px;}
  .services-grid,.pricing-grid{grid-template-columns:1fr;}
  .press-list{columns:1;}
  .section{padding:64px 0;}
  .contact-wrap{padding:36px 22px;}
  .portfolio-grid{columns:1 100%;}
.arch-gallery{grid-template-columns:1fr;gap:26px;}
.instagram-grid{grid-template-columns:repeat(3,1fr);}
}